Adding XF dynamically

[bhavigoyal]

Hi all,

I want to add a Experience Fragment in HTL using data sly resource. but there problem that i want to author that on initial content on template  and render it on page on the basis of some conditions. and i want to add code for both in sightly of my custom component.

[MukeshYadav_]

Hi @bhavigoyal ,

One approach can be as below-

Create a component with pathfield(default path) for XF and one checkbox enable or disabe(this field is optional if you want to control at component level)

In this component inside data-sly-resource we can put data-sly-test for checkbox(enable/disable) and add this component in initials of the template.

We can also put enable/diable checkbox as page properties and inside component we can put data-sly-test based on currentPage.check

Thanks

[SureshDhulipudi]

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-i-can-include-xf-direc...

[konstantyn_diachenko]

Hi @bhavigoyal,

If you want to configure XF as an initial content and include it explicitly via data-sly-resource on the page resource type, you will need to do the following:

<div>
    <sly data-sly-test.someCondition="${yourSomeConditionHere}"
         data-sly-set.isNotAuthorable="${conditionToKnowWhetherItIsConfigurable ? 'disabled' : ''}"
            data-sly-resource="${ 'fragment' @ resourceType='core/wcm/components/experiencefragment/v2/experiencefragment', wcmmode=isNotAuthorable}"></sly>
</div>

[bhavigoyal]

Hi @konstantyn_diachenko 

<div class="experienceFragmentText">
<sly data-sly-test="${coursePageFees.fees}">
<sly data-sly-list.feeSubHeading="${coursePageFees.fees}">
<sly data-sly-test="${coursePageFees.fees[feeSubHeading][0].fee != '0'}">
<!-- Fees List for fees -->
<sly data-sly-list.feesList="${coursePageFees.fees[feeSubHeading]}">
<sly
data-sly-test="${feesList.fee != '0' && feesList.fee != '$0 Per Year' && feesList.feeCategory == 'General Services Fee'}">
<sly data-sly-resource="${'gsf' @ resourceType='holmesglen/components/experiencefragment'}"></sly>
</sly>
</sly>
</sly>
</sly>
</sly>
</div>

above i smy code and in this data-sly-list i snot working on initil content page as list is not available tehre so how to modify that??

[konstantyn_diachenko · Accepted solution]

I can assume that your coursePageFees object is empty. That's why list doesn't render anything. In this case I see that you are going to reuse 1 resource (XF) for some fee category, so I would suggest to render this resource separately 1 time. It doesn't make any sense to have it N times in the edit mode.

Code example:

<div class="experienceFragmentText">
    <sly data-sly-test="${coursePageFees.fees}">
        <sly data-sly-list.feeSubHeading="${coursePageFees.fees}">
            <sly data-sly-test="${coursePageFees.fees[feeSubHeading][0].fee != '0'}">
                <!-- Fees List for fees -->
                <sly data-sly-list.feesList="${coursePageFees.fees[feeSubHeading]}">
                    <sly data-sly-test="${feesList.fee != '0' && feesList.fee != '$0 Per Year' && feesList.feeCategory == 'General Services Fee'}">
                        <sly data-sly-test="${wcmmode.disabled}"
                             data-sly-resource="${'gsf' @ resourceType='holmesglen/components/experiencefragment', wcmmode='disabled'}"></sly>
                    </sly>
                </sly>
            </sly>
        </sly>
    </sly>
    <sly data-sly-test="${wcmmode.edit}">
        <p>Configure General Services Fee XF below:</p>
        <sly data-sly-resource="${'gsf' @ resourceType='holmesglen/components/experiencefragment'}"></sly>
    </sly>
</div>