Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Adding XF dynamically

Avatar

Level 4

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.

1 Accepted Solution

Avatar

Correct answer by
Level 4

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>

View solution in original post

5 Replies

Avatar

Community Advisor

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

Avatar

Level 4

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>

Avatar

Level 4

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??

 

Avatar

Correct answer by
Level 4

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>