I had to develop a multifield widget for a CQ component. My requirement was to present the What’s New documents for a product’s releases. There could be many releases in an year. These need to be captured in a table row. A product release is associated with a specific product name and a What’s New URL.

To cut the story short, let me present you with some screenshots. The following is the dialog box where a user enters the release information:

In this case, in an year, the product had two releases. One in March and the second one in Dec. The details are displayed as follows in the publish instance:

March being the third month, it’s displayed in the third column, and for the obvious reason, Dec is displayed in the 12th column. It displays the release name as a hyperlink to the What’s New doc.

Follow these steps to develop this widget:

1. Install the Custom Multifield Widget. Follow Adobe’s instructions on how to do it. We will develop the component based on the Custom Multifield Widget that you will install as
   a part of the instructions.
2. Copy the extjstraining/clientlib folder to your app/yourCompany folder, where you want to develop your component.
3. Create a component in yourCoumpany folder.
4. Now, expand to the extjstraining/components/customwidgets folder.
5. Expand the multifield dialog box.
6. Copy the multi node to your component’s dialog.
   
7. Change the xtype of the node that you copied in the fieldConfig as follows:
   
8. In yourCompany folder, open the clientlib/js/CustomWidget.js file.
   1. Add one more text field as follows:
      
      //new textfield start
      this.allowText = new CQ.Ext.form.TextField({

      cls:”ejst-customwidget-2″,

      listeners: {

      change: {

      scope:this,

      fn: this.updateHidden

      }

      }

      });
      this.add(this.allowText);

      //end
   2. Set value for the new text field as follows:
      
      // overriding CQ.form.CompositeField#setValue

      setValue: function(value) {

      var parts = value.split(“/”);

      this.allowField.setValue(parts[0]);

      this.allowText.setValue(parts[1]);

      this.otherField.setValue(parts[2]);

      this.hiddenField.setValue(value);

      },

   3. Change the xtype as follows:
      
      // register xtype
      CQ.Ext.reg(‘ejstcustom1’, Ejst.CustomWidget);
9. In yourCompany folder, open the clientlib/js/exercises.js file. Upadate the provider options for the drop-down list as follows:
   
10. Now, you can create the component’s JSP to format the values entered by the author:
    PropertyIterator propertyIterator= currentNode.getProperties();

    while(propertyIterator.hasNext())

    {

    Property currentProperty=propertyIterator.nextProperty();

    String currentValue=””;
    if(currentProperty!=null &&
    currentProperty.getName()!=null &&
    currentProperty.getName().toLowerCase().compareTo(“multi”)==0)

    {

    if(currentProperty.isMultiple())

    {

    Value[] values=currentProperty.getValues();
    String[] months={“Jan”,”Feb”,”March”,”April”,”May”,”June”,”July”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”};
    int[] table=new int[12];
    String[] version=new String[12];
    int k=0;

    for(Value value:values)
    {
    currentValue=value.getString();
    String[] splitValue=currentValue.split(“/”);

    for (int i=k; i<months.length; i++)
    {
    if (splitValue[0].equals(months[i]))
    {
    table[i]=1;
    version[i]=splitValue[1];
    }

    }

    }

    for (int m=0; m<table.length; m++)
    {
    if (table[m] == 1)
    {
    out.write (“<td>”+version[m]+”</td>”);
    }
    else
    {
    out.write(“<td>”+” “+”</td>”);
    }

    }
    }

    else
    {
    currentValue=currentProperty.getString();
    }

    }
    properties.isEmpty();
    }
    %>

11. Test the component.