API를 사용하여 Datasource를 생성하고 페이지 레이아웃 업데이트하기 [Part 3]

이번 포스트는 API를 사용하여 렌더링 아이템의 Datasource를 생성한 Implementaion의 추가로써, xEditor에서 Datasource를 생성하고 페이지에 저장 및 Apply를 조금 더 효율적으로 할수있는 팁을 알아보자.
우린 Datasource 생성 버튼을 클릭하여 메인 소스를 만들었지만, 추가적으로 필드 에디터 버턴을 생성하여 Content Editor를 Dialog Popup 형식으로 xEditor 띄워 필드정보를 수정할수있다.
데이타소스의 필드정보 업데이트는 "webedit:fieldeditor" 커맨드를 통하여 실행할 수 있지만, "webedit:componentoptions"처럼 Content Editor 팝업에서 "OK" 버튼을 클릭할시 자동저장 (autosave) 기능이 없다.

"webedit:fieldeditor" 커맨드는 Sitecore의 Content Manager 어플리케이션의 FieldEditorPage 클래스를 호출하며 우리는 간단한게 "FieldEditor.aspx" 페이지에 Javascript을 추가하여 Auto-Saving을 적용할것이다. 추후 "componentoptions" 커맨드처럼 기능이 추가될지 모르겠으나, 이 업데이트는 Sitecore 버전 9.1 (현재 가장 최근 버전) 및 하위 버전까지 모두 적용되어질수 있다.

자, 이제 렌더링 아이템의 데이터소스 필드를 xEditor에서 손 쉽게(?) 수정하는 방법과 업데이트 되어진 Field값을 자동저장하는 방법에 대하여 알아보도록 하겠다.

우선, 해당 경로의 FieldEditor 파일을 오픈하고, 아래의 자바스크립을 추가한다.

"\sitecore\shell\Applications\Content Manager\FieldEditor.aspx"

<script type="text/javascript">
    var p = parent.parent;
    var iframes;
    try {
        iframes = p.jQuery('#jqueryModalDialogsFrame').contents().find('.ui-dialog');
    } catch (e) { }
    if (p && typeof iframes != 'undefined' && iframes.length == 1) {
        var footerRow = document.getElementById("FooterRow");
        var inp = footerRow.getElementsByTagName("input");
        var btn;
        for (i = 0; i < inp.length; i++) {
            if (inp[i].value == "OK") {
                if (p.autoSaveItems != false) {
                    btn = inp[i];
                    btn.setAttribute("onclick", "javascript:return ClickAndSave()");
                }
                break;
            }
        }
    }
    function ClickAndSave() {
        if (p.Sitecore.PageModes.PageEditor.isModified()) {
            p.Sitecore.PageModes.PageEditor.postRequest("webedit:save", function() { p.onbeforeunload = null; }, false);
        }
        scForm.invoke("contenteditor:saveandclose");
        p.Sitecore.PageModes.PageEditor.postRequest("webedit:saved", function() { p.location.reload(); }, true);
    }
</script>

아래는 업데이트 되어진 VIEW (RichTextEditor.cshtml)이다.

@model Sitecore.Custom.Component.Models.RichTextEditor
@if (!Model.IsDatasourceSet && Sitecore.Context.PageMode.IsExperienceEditor)
{
    <div style="padding:20px 0;" class="border border-success">
        <h4>RichText Editor Added</h4>
        <button type="button" class="btn btn-success" onclick="SendAjaxPOST(); return false;">Create Rich Text Editor Datasource</button>
        <script>
        function SendAjaxPOST() {
            if (Sitecore.PageModes.PageEditor.isModified()) {
                alert("There are unsaved items on this page.\rPlease save the page, then create a new datasource.");
                return false;
            }
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "http://sc910.sc/customapi/createitem/@Model.PageItem.ID.Guid.ToString()");
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send("{\"itemName\": \"@Model.NewItemName\", \"templateGuid\": \"@Model.RteTemplate.ID.Guid.ToString()\", \"isDatasourceItem\": \"1\", \"renderingUid\": \"@Model.Rendering.UniqueId.ToString()\"}");
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status === 200) {
                        window.onbeforeunload = null;
                        this.returnValue = true;

                        setTimeout(function () { location.reload() }, 500);
                    } else {
                        console.log('Error Status: ' + this.status + '\nHeaders: ' + JSON.stringify(this.getAllResponseHeaders()) + '\nBody: ' + this.responseText);
                    }
                }
            };
        }
        </script>
    </div>
} else if (Sitecore.Context.PageMode.IsExperienceEditor) {
    <div style="border-bottom: solid 1px grey;">
        <button type="button" class="btn btn-warning" style="margin-bottom: 5px;" onClick="updateRTEStyle()">Update Style</button>
    </div>
    <div style='@Model.Rendering.Item.Fields["Custom CSS"].Value'>@Html.Sitecore().Field("Content")</div>
    <script>
        function updateRTEStyle() {
            Sitecore.PageModes.PageEditor.postRequest(
                "webedit:fieldeditor(" +
                    "command={11111111-1111-1111-1111-111111111111}, " + 
                    "fields=Custom CSS, " + 
                    "id=@(Model.RenderingDatasource))"
                );
        }
    </script>
} 
else
{
    <div style='@Model.Rendering.Item.Fields["Custom CSS"].Value'>@Html.Sitecore().Field("Content")</div>
}

아래는 최종적으로 업데이트 되어진 화면이며, ContentEditor 팝업박스의 OK 버턴을 누르면 자동으로 업데이트되고 xEditor가 Reload 되는것을 볼수가 있다.

Sitecore Space - 사이트코어

2019년 5월 29일 수요일

API를 사용하여 Datasource를 생성하고 페이지 레이아웃 업데이트하기 [Part 3]