Draggable Lists

Available since version 2.5.0/3.1.0

Purpose

The Draggable List component lets you create an ordered list of elements that are generated by a datasource. The ACS Commons Query Autocomplete Datasource can be used with it.

Draggable List Widget

How to Use

  • Set up your component and its Touch UI dialog as usual.
  • Add a new widget node with sling:resourceType = acs-commons/components/authoring/draggablelist
  • If using the ACS Commons Query Autocomplete Datasource, set the predicates and the displayProperty properties
  • Create a new datasource node under the draggablelist widget node.
  • If using the ACS Commons Query Autocomplete Datasource, set sling:resourceType = acs-commons/granite/ui/components/form/queryautocomplete/datasource
  • If using your own datasource, set the sling:resourceType accordingly.

Sample Datasource.

<%@include file="/libs/granite/ui/global.jsp" %>
<%@page session="false"
        import="com.adobe.cq.commerce.common.ValueMapDecorator,
                com.adobe.granite.ui.components.ds.DataSource,
                com.adobe.granite.ui.components.ds.SimpleDataSource,
                com.adobe.granite.ui.components.ds.ValueMapResource,
                org.apache.sling.api.resource.ResourceMetadata,
                java.util.ArrayList,
                java.util.HashMap,
                java.util.List" %>
<%
    List<Resource> resourceList = new ArrayList();

    for( int i = 0; i <= 3; i ++) {
        ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());
        vm.put("value", i);
        vm.put("text", i);
        resourceList.add(new ValueMapResource(resourceResolver, new ResourceMetadata(), "nt:unstructured", vm));
    }

    DataSource ds = new SimpleDataSource(resourceList.iterator());
    request.setAttribute(DataSource.class.getName(), ds);
%>

Example Dialog

<?xml version="1.0" encoding="UTF-8"?>
   <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" jcr:primaryType="nt:unstructured" jcr:title="List" sling:resourceType="cq/gui/components/authoring/dialog" helpPath="en/cq/current/wcm/default_components.html#List">
      <content
      	jcr:primaryType="nt:unstructured"
      	sling:resourceType="granite/ui/components/foundation/container">
      	<layout
      		jcr:primaryType="nt:unstructured"
      		margin="false"
      		sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
      	<items
      		jcr:primaryType="nt:unstructured">
      		<column
      			jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
      			<items
      				jcr:primaryType="nt:unstructured">
      				<list
      					jcr:primaryType="nt:unstructured"
      					displayProperty="jcr:content/jcr:title"
      					fieldLabel="Draggable List"
      					name="./list"
      					sling:resourceType="acs-commons/components/authoring/draggablelist">
      					<datasource
      						jcr:primaryType="nt:unstructured"
      						sling:resourceType="mytestcomponents/datasources/draggablelist"/>
      				</list>
      			</items>
      		</column>
      	</items>
      </content>
   </jcr:root>
Please report any issues with the Feature or documentation on the ACS AEM Commons GitHub Issue tracker.
comments powered by Disqus