Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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.