이번 포스트는 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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <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)이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| @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 되는것을 볼수가 있다.
