Adding XF dynamically | Community
Skip to main content
bhavigoyal
bhavigoyal
Level 4
September 30, 2024
Solved

Adding XF dynamically

  • September 30, 2024
  • 3 replies
  • 1001 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by konstantyn_diachenko

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>

3 replies

MukeshYadav_
Community Advisor
MukeshYadav_Community Advisor
Community Advisor
September 30, 2024

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

    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity Advisor
    Community Advisor
    September 30, 2024

    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>
    Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
      bhavigoyal
      bhavigoyalAuthor
      Level 4
      October 1, 2024

      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
        Community Advisor
        konstantyn_diachenkoCommunity AdvisorAccepted solution
        Community Advisor
        October 1, 2024

        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>
        Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
          Terms & ConditionsAccessibility statement

          Loading footer...