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

[sesmic]

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

[Mahesh_Gunaje]

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]

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]

@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)

[ShivamKumar]

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]

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]

@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

[sesmic]

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 · Accepted solution]

@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.

[kautuk_sahni]

@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.