Expand my Community achievements bar.

SOLVED

Multi value checkbox populed from datasource

Avatar

Level 2

Hi all!

 

I'm migrating a classic ui dialog to touch ui dialog. In the old dialog I have a multi checkbox populating data from a json added in a "options" property in the dialog. Then I have multi checkbox saving data in just one property String array. Like a radiogroup widget but with the possibility to check all checkbox. I'm trying to do something similar but I don't find anything, my last options is use select widget with multivalue property or create a custom checkbox widget.

Do you know if exist something like that? The select widget with datasource is perfect if I could to adapt it to checkbox widget...

 

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @jonimarrero95 

 

There is no OOTB coral component to do so. But I tried to achieve the same usecase you have, you can try this and make changes as per your liking:

 

1. Create a folder named "coral/checkboxgroup" under your components folder like /apps/weretail/components/content/coral/checkboxgroup. You can create folder wherever you seem appropriate and create file checkboxgroup.jsp
Screenshot from 2020-06-12 21-33-33.png

2. Paste the given code checkboxgroup.jsp 

<%@ include file="/libs/granite/ui/global.jsp" %><%
%><%@ page session="false"
          import="java.util.Iterator,
    			  org.apache.commons.lang3.StringUtils,
                  com.adobe.granite.ui.components.AttrBuilder,
                  com.adobe.granite.ui.components.Config,
                  com.adobe.granite.ui.components.Field,
                  com.adobe.granite.ui.components.Tag,
				  org.apache.sling.api.resource.ValueMap,
				  org.apache.sling.api.wrappers.ValueMapDecorator,
				  com.adobe.granite.ui.components.ds.ValueMapResource,
				  java.util.HashMap,
				  org.apache.sling.api.resource.ResourceMetadata" %>
<%

    Iterator<Resource> itemIterator = cmp.getItemDataSource().iterator();
	if (itemIterator != null && itemIterator.hasNext()) {
        while(itemIterator.hasNext()) {
			ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());
            vm.putAll(resource.getValueMap());
            vm.putAll(itemIterator.next().getValueMap());
            Resource checkboxResource = new ValueMapResource(resourceResolver, resource.getPath(), "/libs/granite/ui/components/coral/foundation/form/checkbox", vm);
            %>
			<sling:include resource="<%= checkboxResource %>" />
			<%
        }
    }
%>

3. Now wherever you want to use the checkbox group in cq:dialog, create nodes like this:
Screenshot from 2020-06-12 21-49-18.pngScreenshot from 2020-06-12 21-50-07.png

Give datasource just like you would have done for coral select and change resource type in multi-checkbox node according to where you have created your checkboxgroup folder.

 

Once done, group of checkboxes given in the datasource will start coming in dialog.

 

Try and let me know if it works for you.

 

Thanks,

Nupur

 

 

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

Hi @jonimarrero95 

 

There is no OOTB coral component to do so. But I tried to achieve the same usecase you have, you can try this and make changes as per your liking:

 

1. Create a folder named "coral/checkboxgroup" under your components folder like /apps/weretail/components/content/coral/checkboxgroup. You can create folder wherever you seem appropriate and create file checkboxgroup.jsp
Screenshot from 2020-06-12 21-33-33.png

2. Paste the given code checkboxgroup.jsp 

<%@ include file="/libs/granite/ui/global.jsp" %><%
%><%@ page session="false"
          import="java.util.Iterator,
    			  org.apache.commons.lang3.StringUtils,
                  com.adobe.granite.ui.components.AttrBuilder,
                  com.adobe.granite.ui.components.Config,
                  com.adobe.granite.ui.components.Field,
                  com.adobe.granite.ui.components.Tag,
				  org.apache.sling.api.resource.ValueMap,
				  org.apache.sling.api.wrappers.ValueMapDecorator,
				  com.adobe.granite.ui.components.ds.ValueMapResource,
				  java.util.HashMap,
				  org.apache.sling.api.resource.ResourceMetadata" %>
<%

    Iterator<Resource> itemIterator = cmp.getItemDataSource().iterator();
	if (itemIterator != null && itemIterator.hasNext()) {
        while(itemIterator.hasNext()) {
			ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());
            vm.putAll(resource.getValueMap());
            vm.putAll(itemIterator.next().getValueMap());
            Resource checkboxResource = new ValueMapResource(resourceResolver, resource.getPath(), "/libs/granite/ui/components/coral/foundation/form/checkbox", vm);
            %>
			<sling:include resource="<%= checkboxResource %>" />
			<%
        }
    }
%>

3. Now wherever you want to use the checkbox group in cq:dialog, create nodes like this:
Screenshot from 2020-06-12 21-49-18.pngScreenshot from 2020-06-12 21-50-07.png

Give datasource just like you would have done for coral select and change resource type in multi-checkbox node according to where you have created your checkboxgroup folder.

 

Once done, group of checkboxes given in the datasource will start coming in dialog.

 

Try and let me know if it works for you.

 

Thanks,

Nupur

 

 

Avatar

Level 2

Hi @Nupur_Jain ,
Thank you for this.
Just one doubt, I am able to populate values from JSON but the values are not getting saved in crxde, can you help with that as well.

 

Avatar

Level 4

Hi @Nupur_Jain ,

Thanks for this helpful article.

In this checkboxgroup.jsp, how can we include the field label and description to be inserted in the touch UI dialog field.

 

Thanks.