미디어 브라우저 Default View 설정

#HowTo #SearchView

 템플릿에서 Image 필드를 추가하면 "Browser" 버턴이 생성되며, 이 버튼을 클릭하면 자동적으로 미디어 라이브러리로 이동할수가 있으며, 미디어 브라우저를 통하여 미디어 파일을 업로드 또는 선택할수가 있다. 미디어 브러우저는 Sitecore 버전 7부터 "Search View" 와 "Tree View"를 제공하며, 기본적인 세팅은 "Search View"로 되어있다.

하지만, 미디어를 선택하고 업로드하는데 있어서 "Search Tree"는 미디어 라이브러리의 구조를 보기 불편함이 있으므로, "Tree View"를 선택하여 미디어 파일을 선택하고, 원하는 디렉토리에 파일을 업로드한다.

사이트 코어의 .config파일을 통하여 default 세팅을 변경할수가 있다.
Sitecore 7.1 and lower: `\App_Config\Include\Sitecore.Speak.config`
Sitecore 7.2 and higher: `\App_Config\Include\Sitecore.Speak.Application.config`

<overrideXmlControls>
    <!-- <override xmlControl="Sitecore.Shell.Applications.Media.MediaBrowser" with="/sitecore/client/applications/Dialogs/SelectMediaDialog" /> -->
    <override xmlControl="Sitecore.Shell.Applications.Media.MediaBrowser" with="/sitecore/client/applications/Dialogs/SelectMediaViaTreeDialog" />
</overrideXmlControls>

업데이트후, 미디어 브라우저를 오픈하면 "Tree View"가 기본값으로 적용되어있다.

Telerik에 새로운 명령어 추가하기

#HowTo #Javascript #RichTextCommands #Telerik

 Telerik은 자바스크립트를 이용하여 에디터의 커맨드를 불러온다.
먼저 자바스크립트의 경로는 "\sitecore\shell\Controls\Rich Text Editor\RichText Commands.js"이며, 커맨드 리스트를 통하여 새로운 버튼을 추가할수가 있다.

첫번째로, Core DB에서 "/setting/HTML Editor Profile"에서 새로운 Profile을 만든 후 버턴 아이템을 만들어준다. "Click" 값은 반드시 Unique한 값을 지정하며, 커맨드 리스트에 추가될 값과 일치하여야한다.

다음 단계로 "RichText Command.js" 파일에 리스트를 추가한다.

1 2 3 4 5 6 7 8 9

RadEditorCommandList["Button Generator"] = function (commandName, editor, args) { var d = Telerik.Web.UI.Editor.CommandList._getLinkArgument(editor); Telerik.Web.UI.Editor.CommandList._getDialogArguments(d, "A", editor, "DocumentManager"); //Retrieve the html selected in the editor var html = editor.getSelectionHtml(); scEditor = editor; scEditor.pasteHtml("버턴을 클릭하면 메세지가 출력된다."); };

Telerik's RichText Editor

#FYI #RichTextEditorProfile

 Sitecore는 Telerik 플랫폼을 통하여 RichTextEditor를 제공하한다. 템플릿에 Rich Text 데이터 타입을 선택하면 에디터를 사용할수있으며, Core 데이타베이스의 HtmlEditor Profile을 통하여 에디터의 HTML 기능을 추가할수가있다.

추가적으로, source경로가 비어있다면 기본값은 RTE Default로 적용되면, 이는 web.config 파일에서 설정할수가 있다.

1	<setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Default" />

Fig 1. Data field in template and set source location (HTML Profile Location)

Fig 2. RTE Default

Fig 3. RTE Medium

Fig 4. RTE Full

SPEAK UI는 무엇인가?

#FYI #SPEAK #XSLT

 SPEAK UI는 무엇인가?

Sitecore는 버전 6.6부터 SPEAK(Sitecore Process Enablement and Acceleration Kit) UI를 CMS 추가하기 시작하였다. 부분적으로, 기존에 사용하고있던 Sheer UI의 약점(?)을 보완하기 위하여 시작하였으며, 개발자에게 있어서 어플리케이션을 만드는데 더 유연하게 사용할수있도록 설계가 되어있다.

기존의 Sheer UI는 XSLT기기반으로 코드는 aspx/ascx/xml 등으로 만들어져있으며, 부분적으로 플래쉬 파일(.swf)을 렌더링하여 유저에게 인터페이스를 제공한다. 다시 말하면, Sheer UI를 업데이트하는데 있어서, 많은 리소스가 필요할뿐더러 개발자로써도 수정을 많은 어려움을 있을수있다. 하지만 SPEAK UI는 MVC기반으로 만들어졌으며, 인터페이스는 Javascript를 이용하여 유저의 Request를 실행한다. 추가적으로 /App_Config/Inlcue/ 폴더에서 "Sitecore.Speak.Applications.config" 파일을 수정하여 SPEAK UI를 Disable 할수가 있다.

미디어 아이템 렌더링

#FYI #HowTo #.NET

 먼저, 렌더링 아이템의 미디어 정보를 가져오는 중, 아주 유용한 정보를 찾았다. 아래는 Muhammad Jameel 블로그에서 가져온것이다.

Create an object for the target item in the database- replace itempath with the relative path to the item in the Content Tree, such as “home/about/item1” or start the path with a backslash (/) to indicate an absolute path, such as “/sitecore/content/home/about/item1”– a null value will be set in either case if the item does not exist - Sitecore does compare case when evaluating item paths.

1 2 3 4 5 6 7 8 9 10 11 12

Sitecore.Data.Database db = Sitecore.Context.Database; Sitecore.Data.Items.Item item = db.GetItem("itempath"); Sitecore.Data.Fields.ImageField image = item.Fields["imagefield"]; if (image!=null && image.MediaItem!=null) { Sitecore.Data.Items.MediaItem image = new Sitecore.Data.Items.MediaItem(imageField.MediaItem); string src = Sitecore.StringUtil.EnsurePrefix('/', Sitecore.Resources.Media.MediaManager.GetMediaUrl(image)); if (!string.IsNullOrEmpty(src)) { string imgTag = String.Format(@"<img src=""{0}"" alt=""{1}"" />", src, image.Alt); } }

자바스크립트를 통하여 Item 업데이트 하기

#HowTo #Javascript #WebEdit

 Sitecore에서는 자바스크립트를 통하여 Sitecore.Client 또는 Sitecore.Kernel에 포함되어진 Class의 Method를 실행할 수 가 있다.

Sitecore Website폴더에서 /Website/App_Config/ 폴더를 보면 Command.config 파일이 있는데, 해당 파일을 열어보면 각각 커맨드에 해당되는 Assembly와 네임스페이스를 포함하고 있다. 해당 컨맨드 목록을 여기를 참고한다. https://github.com/udt1106/Sitecore-Item-Buckets/blob/master/Sitecore.ItemBucket.Tests/App_Config/Commands.config

먼저 내가 자주 사용하고 Command는 save, new, delete 등등이 있는데, 기본적인 사용법은:

1 2 3

<a href="#" onclick="javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:save()')">Save current item</a> <a href="#" onclick="javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:delete()')">Delete current item</a> <a href="#" onclick="javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:fieldeditor(command={11111111-1111-1111-1111-111111111111},fields=Field Name 1|Field Name 2,id={item-id-to-edit-with-braces})')">Edit Fields</a>

자바스크립트를 통하여 페이지 감지

#HowTo #DetectMode

 Sitecore에서는 자바스크립트를 통하여 Code-behind에서 선언할수있는 클래스의 method들을 실행할수가 있다. 기본적으로 code-behind에서 현재 페이지가 Page Editor인지 아니면 Preview mode인지 확인하는 방법은,

1 2 3 4 5

if (Sitecore.Context.PageMode.IsPageEditor) { // this is page page editor } else if (Sitecore.Context.PageMode.IsPreview) { // this is preview }

이것과 같은 방법으로 자바스크립트를 통하여 현재 페이지를 Detect할 수 가있다.

1 2 3 4 5 6 7

var isPageEditor = function(){ return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor); }; if(isPageEditor()) { // this is PageEditor }