AEM · AEM 6

AEM | Classic UI – Multifield – Auto-populate Value


Multifield is a commonly used xtype in AEM components. It allow author to add a list of values. Sometime we need to use multifield to allow authors to add no of values (in a pattern).

An example is Tabs/Accordion Component, we can allow authors to add no of tabs/accordions in multifield and add values like (tab1, tab2 …) and for each tab/accordion item, we include a item component, benefit of this approach is that author can simply rearrange sequence of these items in single dialog.

In above scenario or similar scenarios, we can save author’s time by autopopulating field values in this pattern.

Purpose of this post is to create a clientlib which extend CQ.form.MultiField and add capability to autopopulate items in OOB Multifield xtype.

Solution

  1. Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder/apps/plugins/classic-ui/multifield/autopopulate
  2. Create node /apps/plugins/classic-ui/multifield/autopopulate/clientlib of type cq:ClientLibraryFolderand add a String property categories with value cq.widgets
  3. Create file (nt:file) /apps/plugins/classic-ui/multifield/autopopulate/clientlib/js.txt and add following files
    multifield_autopopulate.js
  4. Create file (nt:file) /apps/plugins/classic-ui/multifield/autopopulate/clientlib/multifield_autopopulate.js and add the following code:
    (function() {
        var originalAddItemFunction = CQ.form.MultiField.prototype.addItem;
        CQ.Ext.override(CQ.form.MultiField, {
            getActualItemValue: function() {
                var maxVal = 0;
                for (var i = 0; i < this.items.getCount(); i++) { 
                    var value = this.items.items[i].items.items[0].items.items[0].value; 
                    if(value != undefined) { 
                        value = value.replace(this.prefix,""); } if((value*1) > maxVal) {
                        maxVal = value*1;
                    }
                }
                return maxVal+1;
            },
            addItem: function(value) {
                if (this.autoPopulate && this.autoPopulate==true && this.prefix) {
                    if(!value) {
                        value = this.prefix+this.getActualItemValue();
                    }
                }
                originalAddItemFunction.apply(this, [value]);
            }
        });
    }());

Configuration: To use this configuration, add two properties in multifield node

<config
    jcr:primaryType="cq:Widget"
    fieldLabel="Configuration"
    autoPopulate="{Boolean}true"
    prefix="tab"
    name="./config"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="nt:unstructured"
        allowBlank="{Boolean}false"
        fieldLabel="Value:"
        xtype="textfield"/>
</config>
  1. autoPopulate: a flag to invoke autopopulate action on multifield
  2. prefix: String which will be used. so values will be {prefix}1, {prefix}2 …
Multifield with Auto-populated value
Multifield with Auto-populated value

Code: Package can be downloaded from here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s