Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Multi value checkbox populed from datasource

jonimarrero95
Level 2
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
Nupur_Jain
Correct answer by
Community Advisor
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

4 Replies
Nupur_Jain
Correct answer by
Community Advisor
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