레이블이 Dynamic Placeholder인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Dynamic Placeholder인 게시물을 표시합니다. 모든 게시물 표시

2017년 11월 20일 월요일

Sitecore 9.0 Dynamic Placeholder 사용법

사이트코어는 9.0을 릴리즈하면서, DynamicPlaceholder라는 새로운 SitecoreHelper를 소개하였다.

기존의 @Html.Sitecore().Placeholder("key")와는 달리, @Html.Sitecore().DynamicPlaceholder("Key", optional parameters)는 새로운 Placehoder를 좀 더 효율적으로 생성 및 관리할수 있으며, Placeholder Key이름에 렌더링 아이템 아이디와 인덱스를 추가하여 똑같은 Placeholder key를 중보긍로 사용할수 있도록 하였다.

예: placeholderName-RenderingID-Count
content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-0

먼저, 아래는 DynamicPlaceholder Method에서 사용가능 한 Parameter의 목록을 나열하였고, 각각 어떻게 사용되어지는지 알아보도록 하자.


DynamicPlaceholder(string placeholderName, int count = 1, int maxCount = 0, int seed = 0)
DynamicPlaceholder(string placeholderName, TagBuilder chrome, int count = 1, int maxCount = 0, int seed = 0)
DynamicPlaceholder(string placeholderName, Func<DynamicPlaceholderRenderContext, TagBuilder> chromeResolver, int count = 1, int maxCount = 0, int seed = 0)
DynamicPlaceholder(string placeholderName, Func<HtmlString, HtmlString> outputModifier, int count = 1, int maxCount = 0, int seed = 0)
DynamicPlaceholder(DynamicPlaceholderDefinition definition)


  1. DynamicPlaceholder(string placeholderName, int count = 1, int maxCount = 0, int seed = 0)

    기본 Placeholder Method처럼 @Html.Sitecore().DynamicPlaceholder("placeholder name") 처럼 사용할 수 있지만, 추가적으로 기본 선택적인 Parameter인 count, maxCount, 그리고 seed를 사용함으로써 해달 Placeholder를 제한적으로 사용할 수가 있다.

    @Html.Sitecore().DynamicPlaceholder("content", count:2)
    

    - count: 사용하고 싶은 Placeholder 수를 정함.
    - maxCount: 맥시멈 Placeholder 수를 정함. 예를들어, count가 "5"이고 maxCount를 "3"으로 정했다면, 페이지에서는 maxCount인 3개의 Placeholder만 나타남.
    - seed: Placeholder의 카운티은 "0"에서 시작되며, 특정하게 시작하는 수는 정하고 싶다면 seed를 사용하면 됨


  2. DynamicPlaceholder(string placeholderName, TagBuilder chrome, int count = 1, int maxCount = 0, int seed = 0)

    첫번째, 메소드의 형식과 달리 이번 메소드는 TagBuilder 오브젝트를 패스하여 새로운 HTML 마크업을 생성할수가 있다.

    @{
        TagBuilder newTag = new TagBuilder("div");
    
        newTag.GenerateId("unique-id-here");
        newTag.AddCssClass("custom-class-name-here anotheer-class-here");
        newTag.InnerHtml = "This DIV is built by TagBuilder";
    }
    
    @Html.Sitecore().DynamicPlaceholder("content", newTag, count: 2, seed: 5)
    
    // 또는,
    
    @Html.Sitecore().DynamicPlaceholder("content", 
                                        output =>
                                        {
                                            newTag = new TagBuilder("Div");
                                            newTag.GenerateId("unique-id-here");
                                            newTag.AddCssClass("custom-class-name-here another-class-here");
                                            return newTag;
                                        }, 
                                        count: 2,
                                        seed: 5)
    

    위의 예제처럼, 새로운 태크 생성을 위한 Argument를 메소드에 전달하였으며 seed를 "5"로 세팅함으로써 Placeholder 카운터가 "5"부터 시작한다.

    HTML Preview Output 
    <div class="custom-class-name-here another-class-here" id="unique-id-here"></div>
    <div class="custom-class-name-here another-class-here" id="unique-id-here"></div>
    

  3. DynamicPlaceholder(string placeholderName, Func<DynamicPlaceholderRenderContext, TagBuilder> chromeResolver, int count = 1, int maxCount = 0, int seed = 0)

    두번째 예제에서의 문제점은 똑같은 HTML 마크업을 생성할수는 있으나, 마크업의 Attribute (클래스 이름 또는 아이디 이름)등을 Unique하게 생성할수가 없다. 똑같은 클래스 이름이나 아이디를 사용하면 Javascript 이벤트를 불러오는데어서 Conflict 문제가 생길수가 있다. 사이트코어 Presentation 네임스페이스의 DynamicPlaceholderRenderContext 클래스를 사용하여, Placeholder의 속성값을 가져올수가 있다.

    // @View
    <div class="row">
        @functions
        {
            TagBuilder CreateColumn(DynamicPlaceholderRenderContext context)
            {
                var col = new TagBuilder("div");
                col.GenerateId("column-id-" + context.Index);
                col.AddCssClass("col-lg-" + 12/context.PlaceholdersCount));
                return col;
            }
        }
        @Html.Sitecore().DynamicPlaceholder("content", CreateColumn, count: 3, seed: 20, maxCount: 4)
    </div>
    

    위의 예제는 context.PlaceholderCount을 Argument에 세팅한 Count의 값 "3"의 불러와 새로 생성되는 "<div>" 마크업의 클래스이름 "col-lg-{count}"으로 정하도록 하였다. 또한, Unique한 ID를 생성하여 context.Index값을 차려로 나열하도록 만들었다.



    HTML Preview Output
    <div class="row">
        <div class="col-lg-4" id="column-id-0"></div>
        <div class="col-lg-4" id="column-id-1"></div>
        <div class="col-lg-4" id="column-id-2"></div>
    </div>
    

  4. DynamicPlaceholder(string placeholderName, Func<HtmlString, HtmlString> outputModifier, int count = 1, int maxCount = 0, int seed = 0)

    이번에도 3번째 예제와 비슷하게 Placeholder 속성값을 전달하여 새로운 HTML 마크업 또는 값을 생성하여, 원하고자하는 Placeholder의 마크업을 생성할수있다.

    @Html.Sitecore().DynamicPlaceholder("content", 
                                        (input, context) => new HtmlString(String.Format("<div class=\"custom-class-{1}\">{0}</div>", 
                                                            input, 
                                                            context.DynamicKey)
                                        ), 
                                        count: 50,
                                        maxCount: 3, 
                                        seed: 50)
    

    이번 예제에서는 해당 Placeholder의 DynamicKey의 값을 사용하였고, 값은 PlaceholderName-UniqueRenderingID-Count 값으로 HTML 마크업에 나타난다.

    <div class="custom-class-content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-50"></div>
    <div class="custom-class-content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-51"></div>
    <div class="custom-class-content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-52"></div>
    

  5. DynamicPlaceholder(DynamicPlaceholderDefinition definition)

    마지막으로 DynamicPlaceholderDefinition 오브젝트는 지금까지 설명한 모든 옵션을 통합한 클래스이다. 새로운 오브젝트에 Placeholder 이름을 정하고, 필요한 인덱스값을 정해주며, Placeholder의 속성값을 HTML 마크업의 Unique한 값으로 정할수가 있다.

    @Html.Sitecore().DynamicPlaceholder(new DynamicPlaceholderDefinition("content")
    {
        Count = 5,
        MaxCount = 10,
        Seed = 100,
        OutputModifier = (input, context) => new HtmlString(String.Format("<div class=\"definition-{1}\">{0}</div>", input, context.Index))
    })
    


    <div class="definition-0">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-100</div>
    <div class="definition-1">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-101</div>
    <div class="definition-2">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-102</div>
    <div class="definition-3">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-103</div>
    <div class="definition-4">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-104</div>
    


2017년 10월 26일 목요일

Sitecore 9.0 새로운 기능 및 기술

저번 주에 라스베가스에서 열린 Sitecore Symposium 2017을 무사히 마치고 돌아왔며, 이번 Symposium에서 사이트코어는 Sitecore Experience Cloud 9.0 릴리즈 하였다.

개인적으로 이번 토론회는 처음 참석하는 것이므로 무엇보다 기대가 많았다. Sitecore MVP로써 Sitecore 9.0을 미리 시험할수 있었으며, MVP들의 피드백을 토대로 사이트코어는 새로운 SIF (Sitecore Installation Framework) 보완하는 계기도 되었다.

아래는 이번 Sitecore 9.0 에서 적용되는 새로운 중요 기술 및 기능들이며, 차후 각각 기술에 대한 상세한 설명을 포스트 할 예정이다.

xConnect

사이트코어 XP와 xDB 사이에 존재하는 새로운 Service Layer로써, xConnect는 사이트코어가 아닌 다른 플랫폼 및 디바이스와 연동 할수가 있다. xConnect는 Collection과 Search 서비스로 구성되어 있으며, 다른 플랫폼과 디바이스는 xConnect를 통하여 사이트코어 xDB의 데이타를 불러올 수 있으며, 또한 xConnect는 다른 플랫폼의 데이타를 xDB를 가져올수가 있다.

SQL Server

Sitecore 7.5부터 적용해오던 MongoDB 를 필수요소에서 제외하였다. SQL Server를 기본 Provider로 설정되어졌으며, MongoDB 는 선택적인 항목이 되었다. 사용자 및 개발자 환경에 따라 SQL Server, SQL Azure, CosmosDB, 또는 MongoDB를 사용할수있으며, 어떤 DB 타입 상관없이 xConnect는 이 모든 데이타베이스 서버와의 호환되며 작동한다.


Forms

사이트코어 8.2까지 WFFM (Web Form For Marketers) 모듈을 사용하여, 온라인 폼 페이지를 만들고, xMarketing과 컨넥하여 사용자 및 유저의 정보를 모아왔으나, 9.0부터는 새로운 Form 빌더를 Sitecore XP (Experience Platform)에 추가였으며, UI/UX 역시 더 세련(?)되어 만들어졌다.. 이로써, 새로운 폼 모듈을 추가적으로 설치 하지 않아도 된다. Sitecore 9.0까지는 계속 WFFM을 지원하고 서포트를 하지만, 9.1부터는 WFFM 모듈 및 서포트를 중단할 계획인다.

Marketing Automation

기존에 사용해오던, Engagement Plan를 보완한 기능이며, Drag/Drop을 통하여 쉽게 마케팅 로직을 생성할수있다. 손 쉬운 UI/UX 바탕으로 마케터는 쉽게 자동화된 마케팅 캠페인을 생성할 수 있다.

Search

Sitecore 8.2까지 기본 서치엔진이던 Lucene 사용을 중단하고, 기본 엔진으로 Solr 또는 Azure Search를 사용한다. Lucene를 파일을 기반으로한 서치엔진으로 모든 데이타가 파일형식으로 저장되는것으로 반해, Solr 은 웹어플리케이션으로써 Lucene 을 탑재하여 다양한 API를 제공하며, 서치엔진은 사용 용도에 맞게 구현할수가 있다. 
Sitecore 9.0는 OWIN authentication 미드웨어를 통하여 새로운 로그인 방식을 구현한다. 기존의 LDAP 모듈을 이용하여 Active Directory의 데이터를 Sitecore CMS와 통합하여 로그인을 구현하였지만, 이번 Federated Authentication을 사용함으로써 아래의 다양한 플랫폼과 연동시킬수 있다. 예를 들면, Sitecore의 로그인을 Azure AD와 통합을 할수가 있다.
  • OpenId Connect (AzureAD, identity server) 
  • Microsoft Account 
  • Google
  • Facebook 
  • Twitter 
  • WS-Trust (Web Services Trust Language)
  • OAuth 
  • SAML


Dynamic Placeholder

이전부터 많이 문제가 제기되어왔던 기존 Placeholder에 대한 기능은 많이 제약이 따랐다. 예를 들어 렌더링 아이템에는 같은 이름의 Placeholder를 사용하지 못하였으며, 이로인하여 각각 새로운 Placeholder Setting을 적용해야만 했다. 하지만, 이름처럼 이를 다이나믹하게 보안하여 하나의 Placeholder Setting 아이템을 다양하게 구현하도록 만들었다. 차후, 여기에 대한 자세한 설명을 포스트하도록 하겠다.