Multi value checkbox populed from datasource

[jonimarrero95]

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.

[Nupur_Jain · Accepted solution]

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

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:


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

[kautuk_sahni]

Very well explained

[Mohit1]

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.

[Keerthi0555]

why getItemDataSource here is used?

[jonimarrero95]

It work perfectly!! Thanks a lot! @Nupur_Jain 

[Nupur_Jain]

@jonimarrero95  I am glad it helped

[Keerthi97]

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.