Change tags or resource path in Sling model based on dropdown or any page UI elements? | Community
Skip to main content
sesmic
sesmic
Level 4
March 30, 2024
Solved

Change tags or resource path in Sling model based on dropdown or any page UI elements?

  • March 30, 2024
  • 5 replies
  • 1530 views

Hi All,

I am having a requirement where I need to change the tags or resource path that's in Sling Model depending on the option selected by user on page.

There's already one default tag or resource path in my Sling Model with logic on it & used on page to display.  Now, I want to change this by giving the options to the user which can be dropdown or radio buttons with some values for tag or resource path. Depending on the selected option, tags or path should change, run logic in Sling Model & use it on page.

 

So, could you please suggest me how to change something in Sling Model through the page?

Edit: 

Actually, in component dialog the tag or CF path is given & used on page via Sling Model. You can say its default. Now I want the ability such that whichever option/dropdown, outside of dialog but will be in components HTML, is selected the path for tag/CF associated to the option's value should be used instead of default.

Indirectly, can we change component's dialog values?

 

Thanks in advance,

sesmic

 

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 aanchal-sikka

@sesmic 

 

I am still trying to figure out why would someone change a components configuration from its HTML

- It is a write operation, which should not be allowed on publish servers (especially anonymous users)

- Also, you wouldn't be able to cache the component.

- You would need to refresh the page/component when end-user updates it.

 

Rather I would request you to use ajax + selectors + query params

- Selectors can help you choose the Servlet that uses tags or CF as source. Seperate servlets can help you keep the code cleaner. Use Abstract class for common code.

- Tags can be passed via Query params

- Generate the HTML structure via HTL, and fill in values via ajax.

 

When using servlets with query param, you would get following benefit:

- Don't need to refresh content to update html based on drop-down value change.

- Can cache each request and thus reduce load on publish servers.

- You don't need to persist value. End-users shouldn't be allowed to modify content. Only visualization should change for them.

 

 

5 replies

M
Mahesh_Gunaje
Level 7
March 30, 2024

Hi @sesmic 

 

Your query is bit confusing.  You want to change the resource path??

If possible, could you please add the code snippet here?

    sesmic
    sesmicAuthor
    Level 4
    March 30, 2024

    Hi @mahesh_gunaje,

    Thanks for replying. By resource path I mean it can be image, content fragment or tags. For e.g. my tag path in Sling Model, added via component's dialogue, is {base.path}/dam/fruit/apple/braeburn. Now, depending on the option selected I want to change it.

      AMANATH_ULLAH
      Community Advisor
      AMANATH_ULLAHCommunity Advisor
      Community Advisor
      March 30, 2024

      @sesmic 

      As per your requirement, you can prefer to use servlet instead of sling model and call the servlet when the user performs actions (such as selecting dropdown value)

      Amanath Ullah
        S
        ShivamKumar
        Level 4
        March 30, 2024

        Hi @sesmic,

         

        You can implement a servlet that serves as an endpoint for AJAX requests. When a user selects an option, you can trigger an AJAX request to this servlet. The servlet will receive the selected option and utilize it to dynamically modify the behavior of the Sling Model. You can give it a try.

         

          sesmic
          sesmicAuthor
          Level 4
          March 30, 2024

          Hi @shivamkumar @amanath_ullah,

          Thanks for the suggestion. But isn't any other way to achieve this? Can we do something with JavaScript?

          If possible, could you please share example of what Servlet would be like?

           

            aanchal-sikka
            Community Advisor
            aanchal-sikkaCommunity Advisor
            Community Advisor
            March 31, 2024

            @sesmic 

             

            I guess both the source and rendering is changing for a component, depending on whether author chooses CF/image.

             

            I would suggest you to divide the resolution in following sections:

            - Rendering via component based on source: Create separate HTL templates to render CF/Image. From the component.html, use cf.html or image.html depending on the source.

            - in the cf.html or image.html you can them refer to specific Sling models.

             

             

            This way the logic that defines rendering/Sling Model is in specific HTL templates. Based on the source selected by author, image.html/cf.html can be called from main component.html

            Aanchal Sikka
              sesmic
              sesmicAuthor
              Level 4
              March 31, 2024

              Hi @aanchal-sikka,

              Thanks for responding. Actually, in component dialog the tag or CF path is given & used on page via Sling Model. You can say its default. Now I want the ability such that whichever option/dropdown, outside of dialog but will be in components HTML, is selected the path for tag/CF associated to the option's value should be used instead of default.

              Indirectly, can we change component's dialog values?

               

                aanchal-sikka
                Community Advisor
                aanchal-sikkaCommunity AdvisorAccepted solution
                Community Advisor
                April 1, 2024

                @sesmic 

                 

                I am still trying to figure out why would someone change a components configuration from its HTML

                - It is a write operation, which should not be allowed on publish servers (especially anonymous users)

                - Also, you wouldn't be able to cache the component.

                - You would need to refresh the page/component when end-user updates it.

                 

                Rather I would request you to use ajax + selectors + query params

                - Selectors can help you choose the Servlet that uses tags or CF as source. Seperate servlets can help you keep the code cleaner. Use Abstract class for common code.

                - Tags can be passed via Query params

                - Generate the HTML structure via HTL, and fill in values via ajax.

                 

                When using servlets with query param, you would get following benefit:

                - Don't need to refresh content to update html based on drop-down value change.

                - Can cache each request and thus reduce load on publish servers.

                - You don't need to persist value. End-users shouldn't be allowed to modify content. Only visualization should change for them.

                 

                 

                Aanchal Sikka
                  kautuk_sahni
                  Community Manager
                  kautuk_sahniCommunity Manager
                  Community Manager
                  May 16, 2024

                  @sesmic Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

                  Kautuk Sahni
                  Terms & ConditionsAccessibility statement

                  Loading footer...