Replacing Component Markup

OrchestraCMS provides three parameters for replacing the markup of the Lightning components. 

{
    "bodyComponent":"c:SampleTaxonomyMenuBody",
    "itemComponent":"c:SampleTaxonomyMenuItem",
    "inlineComponent":"c:SampleViewerBody"
}

The bodyComponent parameter is a Lightning Component that can be used to replace the main markup normally output by the component.

<aura:component description="SampleContentLoaderBody" access="global">

    <!-- attributes provided by parent component -->
    <aura:attribute name="contentComponents" type="Aura.Component[]" access="global" description="Rendered content components" />
    <aura:attribute name="contentBundles" type="ContentBundle[]" access="global" description="Raw contentBundle objects representing rendered content" />
    <aura:attribute name="contentSiteBundle" type="SiteBundle" access="global" description="SiteBundle object representing the OrchestraCMS site the content is pulled from" />
    <aura:attribute name="hostSiteBundle" type="SiteBundle" access="global" description="SiteBundle object representing the community being viewed" />
    <aura:attribute name="componentHeading" type="String" access="global" description="Heading text specified in the core component" />
    <aura:attribute name="detailRendering" type="Aura.Component" access="global" description="Rendered detail content component to display" />

    <div class="SampleContentLoaderBody">
        <!-- detailRendering is null until a user clicks to view a content's detail template -->
        <aura:if isTrue="{!v.detailRendering == null}">
            <aura:iteration items="{!v.contentComponents}" var="cmp">
                <div class="ContentItem">
                    {!cmp}
                </div>
            </aura:iteration>
            <aura:set attribute="else">
                {!v.detailRendering}
            </aura:set>
        </aura:if>
    </div>

</aura:component>

The itemComponent parameter is a Lightning Component that can be used to replace the markup of the individual taxonomy menu items.  This component has to extend the cms:TaxonomyMenuItemOverride.  TaxonomyMenuItemOverride exposes the following properties:

• contentBundle : The OrchestraCMS contentBundle
• contentSiteBundle: The OrchestraCMS siteBundle for the origin site of the content
• hostSiteBundle: The OrchestraCMS siteBundle for the current site
• tagPath: The whole taxonomy path of the current category
• topLevelName: The value of the Top-most Category Heading field of the component configuration in Community Builder
• instanceName: The value of the Taxonomy Menu ID field of the component configuration in Community Builder
• depth: The value of the Taxonomy Levels to Include field of the component configuration in Community Builder
• ariaLevel: Current depth in the taxonomy
• ariaExpanded: Boolean is this level node currently expanded 
• isActive: Boolean is this level node current selected
• tagName: The current relative category in the taxonomy path
• contentChildren: List of the contentBundles of the child nodes of the current node
• childComponents: Rendered markup of the child nodes of the current node

<aura:component extends="cms:TaxonomyMenuItemOverride" access="global" description="Sample replacement markup for taxonomy menu items">

    <aura:attribute name="componentName" type="String" default="c:SampleTaxonomyMenuItem" access="global" description="Must define the component name as an attribute" />

    <li class="list-group-item">
        <a onclick="{!c.changeTaxonomyPath}" class="{!v.isActive ? 'active' : ''}" aria-level="{!v.ariaLevel}">{!v.tagName}</a>
        <aura:if isTrue="{!v.contentChildren.length}">
            <ul class="list-group">
                {!v.childComponents}
            </ul>
        </aura:if>
    </li>

</aura:component>

The associated controller code of the component needs to be used when a menu item is clicked to update the taxonomy loader.

({
    changeTaxonomyPath: function(component, event, helper) {
        // notify all linked components that the taxonomy path has changed
        var taxClickedEvt = $A.get('e.cms:TaxonomyPathChangeEvt');

        taxClickedEvt.setParams({
            tagPath: component.get('v.tagPath'),
            instanceName: component.get('v.instanceName')
        }).fire();

        component.set('v.isActive', true);
    }
})

The inlineComponent parameter is a Lightning Component that can be used to replace the markup of the inline detail loader.