Expand my Community achievements bar.

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 5

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 5

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 5

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>