How can I generate a dynamic custom icon-picker generic list | Community
Skip to main content
N
neos45149736
Level 2
November 30, 2021
Solved

How can I generate a dynamic custom icon-picker generic list

  • November 30, 2021
  • 1 reply
  • 2123 views

I have a task to create a custom icon-picker. As you may know, AEM already has a prebuilt generic list of icons and icons fonts. In my case, I would like to generate a fresh list of icons without making use of the ones AEM provides, as this is what I am required to do. 

basically I understand one needs to do this and define a datasource:

<icon xmlns:jcr="http://www.jcp.org/jcr/1.0"
      xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
      xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
      jcr:primaryType="nt:unstructured"
      fieldLabel="Icon" name="./icon"
      sling:resourceType="acs-commons/components/authoring/graphiciconselect">
            <datasource jcr:primaryType="nt:unstructured"
                        path="/etc/acs-commons/lists/font-awesome-icons"
                        sling:resourceType="acs-commons/components/utilities/genericlist/datasource"/>
</icon>

In the case above we are using AEM genericlist datasource. Now I would like to create my own, basically by using my icons. How would one create this list without manually going onto the AEM GUI and create each one at a time. How can the icon-list be generated automatically each time one wanted to update the list. So in my case I am going to be given a list of icons, how to I auto-generate a genericlist I can use as my datasource from that?

I hope I am making sense, thanks

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 Shubham_borole

I am not sure about retrieving datasource items if it works. If you are looking to use this route. To dynamically update a list of items in datasource, you can may be explore using  servlet to dynamically populate the data source. See - https://aem4beginner.blogspot.com/dynamically-populate-drop-down-values

Regarding storage of the icons, you can use tags for example. Add your icon details in tags.

eg: content/cq:tags/root/iconlist/icon1 content/cq:tags/root/iconlist/icon2, ...

in description section of the tags you will have to add the datasource value. and the tag name can be the display name for datasource item.


Now in case you need to add new icons, just add more 'icon' tags and it should be available to the data source.

Other than tags other option can be reading a text file that is uploaded in dam with a list of icons. The servlet should parse that and display the desired data sources. If a new list needs to be updated just upload the file with same name again with updated icon content.

1 reply

Shubham_borole
Community Advisor
Shubham_boroleCommunity AdvisorAccepted solution
Community Advisor
December 6, 2021

I am not sure about retrieving datasource items if it works. If you are looking to use this route. To dynamically update a list of items in datasource, you can may be explore using  servlet to dynamically populate the data source. See - https://aem4beginner.blogspot.com/dynamically-populate-drop-down-values

Regarding storage of the icons, you can use tags for example. Add your icon details in tags.

eg: content/cq:tags/root/iconlist/icon1 content/cq:tags/root/iconlist/icon2, ...

in description section of the tags you will have to add the datasource value. and the tag name can be the display name for datasource item.


Now in case you need to add new icons, just add more 'icon' tags and it should be available to the data source.

Other than tags other option can be reading a text file that is uploaded in dam with a list of icons. The servlet should parse that and display the desired data sources. If a new list needs to be updated just upload the file with same name again with updated icon content.

    Terms & ConditionsAccessibility statement

    Loading footer...