How to create a custom multifield component

The Problem

You are trying to capture a list of key/pair values in a custom component in the admin interface.

The Solution

Create a custom multified component to capture values.

1. Create multifield component

1.1 Create the component

The first thing we are going to do is to create a new component for our tutorial project. This component will be visible in the siteadmin editor.

Open up CRXDE and create a new components directory in the following location:

\apps\tutorial\components\ConfigComponent

Right click on the apps folder-> New -> Folder. Name this tutorial

Right click on the tutorial folder->New -> Folder. Name this components

Right click on the components folder -> New -> Component

Label -> ConfigComponent

Title -> Config Component

Description -> Key pair configuration component

Super Resource Type -> blank

Group -> Admin (Or whatever group you want this component to live in)

Click on next

in AllowedParents enter

*/*parsys

Click on finish.

You have now created your new skeleton component. 

1.2 Create the component display

If you look into the ConfigComponent directory, you will see a ConfigComponent.jsp file.

This jsp will be the component as it renders for display.

In this case, I have decided both for backwards compatibility reasons, and simplicity, to use a table. You can style this in whatever fashion that you desire, however, for the purposes of this tutorial, we will keep it vanilla.

Note, we could also abstract this functionality out into seperate java classes etc, but again, for simplicity, we will just do this in a vanilla fashion.

<%@include file="/libs/foundation/global.jsp"%>Configuration Settings

<table>

    <tr>

        <th>Key</th>

        <th>Value</th>

    </tr><%

   PropertyIterator propertyIterator= currentNode.getProperties();

   while(propertyIterator.hasNext())

   {

  Property currentProperty=propertyIterator.nextProperty();

  String currentValue="";

  if(currentProperty!=null && 

  currentProperty.getName()!=null && 

  currentProperty.getName().toLowerCase().compareTo("keyvaluepairs")==0)

  {

  if(currentProperty.isMultiple())

  {

  Value[] values=currentProperty.getValues();

  for(Value value:values)

  {

  currentValue=value.getString();

  String[] splitValue=currentValue.split("#");

  %><tr><%

  for(int splitLoop=0; splitLoop< splitValue.length; splitLoop++)

  {

       %><td><%= splitValue[splitLoop] %></td><%

  }

  %></tr><%

  }

  }

  else

  {

  currentValue=currentProperty.getString();

      %><td><%= currentValue %></td><%

  }

  }

  properties.isEmpty();

   }

%></table>

What we are doing in this code, is taking the current node:

PropertyIterator propertyIterator= currentNode.getProperties();

and iterating through its properties.

   while(propertyIterator.hasNext())

We then get the values from the property keyvaluepairs, and split the value by the delimitation of a hashtag.

We follow the route of separating values by hashtag, as we wish to avoid having to rewrite the multi-field component entirely. Note that if the # character is a requirement for the field, you can use a multi character delimeter.

1.3 Create the component Dialog

Right click on the ConfigComponent folder -> New Dialog

Name -> dialog

Title -> Key Value Pairs

Click on finish

Navigate down to the tab 1 node, and change the title to Key Value Pairs

Right click on tab1 -> new -> Node

Name -> items

Type -> cq:WidgetCollection

Click Finish

Right click on items -> new -> Node

Name-> trainingmulti 

Type -> cq:Widget

Set the following properties on the trainingmulti node

fieldLabel -> Key Value Pairs

jcr:primaryType -> cq:Widget

name -> ./keyvaluepairs

xtype -> multifield

So what have we done so far? We've created a component that displays a table of values coming from ./keyvaluepairs.

So if we go to our siteadim, open a geometrixx page, and create a template with a parsys such as wide page.

On the sidekick, click on switch to design mode.

Click on edit, scroll down to Admin, or whatever group you've added the component to, and enable the component for inclusion in the sidekick.

If you expand the sidekick again, you should be able to see the component either in Admin section, or the Other section, depending on how many other groups you have enabled.

Add the component to parsys on the left by dragging and dropping it on.

You won't see any key pairs or information at this point in time.

Double click on the component to open the edit dialog.

Click the add button to add a new row, and enter the following:

Test Pair one

Test#Pair two

2. Create custom dual textfields

2.x Hooking in the custom xtype

create  new node on the trainingmulti node of an nt:unstructured type

Add the xtype property of trainingSelection.

Add the xtype component -> list out error

3. Customize display to show read only fields

How to create a custom multifield component.

Gotchyas

1. XType component not registered/found