Creating Custom Renderers

The Content Template Creator (CTC) allows for  static markup.  For complex logic (eg. SOQL, javascript, APIs...) developers can create their own renderers to produce the markup for the content.  Developers can write a Lightning component to produce the markup and set the name of the Lightning component in the Controller field on the Content Layout record for the content template.

The component must extend cms:LightningTemplateController

LightningTemplateController 

The LightningTemplateController has the following properties:

• contentBundle: OrchestraCMS contentBundle
• renderedContentLayout: Name of the content layout being displayed
• socialBundle: OrchestraCMS socialBundle
• contentAttrs: A map of the content attributes saved from the content editor
• contentSiteBundle: OrchestraCMS siteBundle for the site the content originates from
• hostSiteBundle: OrchestraCMS siteBundle of the current site
• tagPathsMap: Map of the full path in the taxonomy and the category eg. /News/Global/Canada: Canada
• tagPathList: A list of the taxonomy paths assigned to the content
• taxonomyBundles: OrchestraCMS taxonomyBundle
• detailType: The value of the Display Content Detail field on the Content Loader in Community Builder (sobject, custom, modal or inline)
• customDetail: The page name from the Custom Detail Page URL field of the component config in Community Builder
• loadedInline: Boolean indicating if the content has been loaded as a detail view inline or modal
• parentComponentType: API Name of the component that loaded the content
• contentProperties: Map of properties for the content returned by the overrride or enhancer controllers
• formattedPublishedDateComponent: Content publish date, not available on draft content
• unreadStatusComponent: A flag for unread content provided if the loader has the display unread status selected
• likeButtonComponent: A like button displayed if the component hasdisplay likes enabled
• chatterFeedComponent: A chatter publisher + feed  provided if the component has display Chatter enabled
• inlineBackButtonComponent: Back button if the content is loaded inline or modal

<aura:component extends="cms:LightningTemplateController" description="Article detail content template" access="global">

    <div class="ArticleDetail_Template">
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <lightning:icon iconName="standard:article" alternativeText="Article" />
                        </div>
                        <div class="slds-media__body">
                            <h1 class="slds-page-header__title slds-m-right--small slds-align-middle">{!v.contentAttrs.Headline}</h1>
                            <div class="date">
                                <!-- component provided by the parent. Displays the content's publish date -->
                                {!v.formattedPublishedDateComponent}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slds-col slds-no-flex slds-align-top">
                    <!-- components provided by the parent -->
                    {!v.inlineBackButtonComponent} <!-- If loaded inline, renders a button to return to the summary view -->
                    {!v.likeButtonComponent} <!-- If liking is enabled, renders a button allowing liking/unliking content -->
                </div>
            </div>
        </div>
        <aura:if isTrue="{!!empty(v.contentAttrs.LargeImageId)}">
            <figure class="slds-image--card">
                <div class="slds-image__crop slds-image__crop--16-by-9">
                    <!-- Image attributes need to be combined with the site url. Use the host SiteBundle - the user may not have access to the content site in the case of cross-site loading -->
                    <img src="{!v.hostSiteBundle.siteUrl + v.contentAttrs.LargeImageId}" alt="" />
                </div>
                <figcaption class="slds-image__title slds-image__title--card">
                    <span class="slds-image__text slds-truncate">{!v.contentAttrs.TitleImageText}</span>
                </figcaption>
            </figure>
        </aura:if>

        <div class="article-text">
            <aura:unescapedHtml value="{!v.contentAttrs.HTMLContent}"/>
        </div>

        <aura:if isTrue="{!v.chatterFeedComponent}">
            <div class="article-feed">
                <h3>Comments</h3>

                <!-- component provided by the parent. Salesforce chatter publisher + feed -->
                {!v.chatterFeedComponent}
            </div>
        </aura:if>
    </div>

</aura:component>