Scribans - Sitecore SXA 9.3

on
The most exciting feature of SXA 9.3 is the introduction of Scribans . A new templating language which is introduced in SXA 9.3 was just to remove the previous NVelocity template . 

WHAT IS SCRIBAN

A fast , powerfull , safe and lightweight templating language is introduced in the rendering variants section of the new Sitecore SXA 9.3. Using creative exchange we can easily import/export the scriban templates and is also very flexible for the front-end developers to work on.







Apart from the standard scriban templating structure , we can also extend it and create a custom scriban extensions , Here is the perfect post   to understand how we can extend the scriban templates.
The beauty of scriban is we can easily achieve the design as per the HTML and including the fields to render .
HOW TO USE 

This example shows you how to render the fields using the new scriban template for the custom event listing component .





Sample item, object and fields using scriban template

<div data-row="{"rid:1,"Date":"{{i_item.CustomEventStart}}","Date Stamp":{{i_item.CustomEventStart.raw}},"Event Name":"{{i_item.CustomEventName}}","Description":"{{i_item.EventDescription}}","Organizers":"{{i_item.PresentedBy}}","City":"{{i_item.City}}","Event type":"{{i_item.CustomEventTypes.target.EventTypeText}}","Register Link":""}">
  <div class="first-table-cell pad col-0">
                <input id="1" type="checkbox" class="rid-select" value="1">
              </div>
              <div class="pad col-0 sp-rid">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">rid</div>
                1</div>
              <div class="pad col-0 sp-date">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
                {{i_item.CustomEventStart}}</div>
              <div class="pad col-45 sp-event-name">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event Detail</div>
                <button class="medium x-bold event-info block ellipsis no-border no-background push-left">{{i_item.CustomEventName}}</button>
                <strong class="x-small color-label-gray field-label">Presented by: </strong><strong class="x-small">{{i_item.PresentedBy}}</strong>
                <div data-hs-match="Class === Class">
                  <div class="hs-pill bg-color-highlighted-green margin-top">{{i_item.CustomEventTypes.target.EventTypeText}}</div>
                </div>
                <div data-hs-match="Class === Webinar" class="hidden">
                  <div class="hs-pill bg-color-highlighted-blue margin-top">{{i_item.CustomEventTypes.target.EventTypeText}}</div>
                </div>
              </div>
  <div class="pad col-20 sp-date-stamp">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
                <span class="color-lite-gray small">{{i_item.CustomEventStart}}</span> </div>
              <div class="pad col-0 sp-description">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Description</div>
               {{i_item.EventDescription}}</div>
              <div class="pad col-0 sp-organizers">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Organizers</div>
                {{i_item.PresentedBy}}</div>
              <div class="pad col-20 sp-city">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">City</div>
                <div data-hs-match="Class === Webinar" class="hidden"> <span class="color-lite-gray small">Online</span> </div>
                <div data-hs-match="Class === Class"> Portland, OR </div>
              </div>
              <div class="pad col-0 sp-event-type">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event type</div>
                {{i_item.CustomEventTypes.target.EventTypeText}}</div>
              <div class="pad col-15 sp-register-link">
                <div class="mobile-header medium-below xx-small uppercase color-lite-gray">Register</div>
                <strong class="x-small">{{i_item.LearnMoreLink}}</strong> </div>
</div>


Using this scriban template Variant in the custom rendering we can achieve this .



SOME OTHER USEFULL COMMANDS
<div>

<h1>Item properties</h1>

<h2> This is <b>i_item.name</b> {{i_item.name}}</h2>

<p><b>i_home</b> {{i_home}}</p>
<p><b>i_datasource</b> {{i_datasource}}</p>
<p><b>i_datasource.name</b> {{i_datasource.name}}</p>
<p><b>i_site.name</b> {{i_site.name}}</p>
<p><b>i_page.name</b> {{i_page.name}}</p>
<p><b>i_site</b> {{i_site}}</p>

<p><b>i_item.title</b> {{i_item.title}}</p>
<p><b>i_item.content</b> {{i_item.content}}</p>
<p><b>i_item.parent</b> {{i_item.parent}}</p>
<p><b>i_item.template_id</b> "{{i_item.template_id}}"</p>
<p><b>i_item.has_children</b> {{i_item.has_children}}</p>
<p><b>i_item.path</b> {{i_item.path}}</p>
<p><b>i_item.url</b> {{i_item.url}}</p>
<br><br>



<h1>Useful Scriban objects</h1>

<h1>Context Object</h1>

<p><b>o_context.database</b> {{o_context.database}}</p>
<p><b>o_context.user</b> {{o_context.user}}</p>
<p><b>o_context.user.name</b> {{o_context.user.name}}</p>
<p><b>o_context.domain</b> {{o_context.domain}}</p>
<p><b>o_context.is_administrator</b> {{o_context.is_administrator}}</p>
<p><b>o_language</b> {{o_language}}</p>


<h1>Page Mode</h1>

<p><b>o_pagemode.is_experience_editor</b> {{o_pagemode.is_experience_editor}}</p>
<p><b>o_pagemode.is_preview</b> {{o_pagemode.is_preview}}</p>
<p><b>o_pagemode.is_normal</b> {{o_pagemode.is_normal}}</p>
<br><br>





<h1>Some basic Scribban functions</h1>

<p><b>sc_link using current item to render link</b></p>
<a href="{{ sc_link i_datasource }}">{{ i_datasource.display_name }}</a>

<br>
<p><b>sc_parameter retrieves Rendering Parameter values | '{{ sc_parameter 'Placeholder' }}' </b></p>
<div>This rendering is added to {{ sc_parameter 'Placeholder' }} placeholder.<div>

</div>

Comments

Post a Comment