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

Migrating custom xtypes to Touch UI

Avatar

Community Advisor

Hello

We are trying to migrate the classic UI custom xtypes developed by extending "CQ.form.CompositeField" to Touch UI but unfortunately not able to find the approach in Touch UI.

custom-xtype.png

Please provide your guidance.

Regards

Albin I

1 Accepted Solution

Avatar

Correct answer by
Level 10

We checked with the Touch UI team. Reply is here:

Hey – the respective granite widget is ootb in 64 - /libs/granite/ui/components/coral/foundation/form/multifield

I recommend changing their storage structure from comma separated properties to nodes and properties (ootb coral multifield)

A sample - http://experience-aem.blogspot.com/2018/04/aem-64-touch-ui-nested-composite-multifield-coral-3.html

View solution in original post

5 Replies

Avatar

Community Advisor

could you please elaborate what you are trying to achieve here? I mean if it is multifield, then you have lot of helpx articles to go through. or let us know what is your use case here.

Avatar

Community Advisor

The fields should be displayed horizontally as shown in the below diagram.

The field values are currently stored as - field1/field2(multiple rows are comma separated) - this is implemented in custom xtype JS

custom-xtype.png

custom-xtype.png

Custom xtype JS

Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    hiddenField: null,

    allowField: null,

    otherField: null,

    

    constructor: function(config) {

        config = config || { };

         var defaults = {

            "border": false,

            "layout": "table",

              "padding":"2px",

            "columns":2

        };

        config = CQ.Util.applyDefaults(config, defaults);

        Ejst.CustomWidget.superclass.constructor.call(this, config);

    },

    // overriding CQ.Ext.Component#initComponent

    initComponent: function() {

        Ejst.CustomWidget.superclass.initComponent.call(this);

        this.hiddenField = new CQ.Ext.form.Hidden({

            name: this.name

        });

        this.add(this.hiddenField);

        this.allowField = new CQ.form.Selection({

            type:"select",

            cls:"ejst-customwidget-1",

            loader: {

                dataUrl:CQ.HTTP.externalize("/bin/tree.json"),

                requestMethod:"GET"

                },

            listeners: {

                selectionchanged: {

                    scope:this,

                    fn: this.updateHidden

                }

            },

            optionsProvider: this.optionsProvider

        });

        this.add(this.allowField);

        this.otherField = new CQ.Ext.form.TextField({

            cls:"ejst-customwidget-2",

            listeners: {

                change: {

                    scope:this,

                    fn:this.updateHidden

                }

            }

        });

        this.add(this.otherField);

    },

    // overriding CQ.form.CompositeField#processPath

    processPath: function(path) {

        console.log("CustomWidget#processPath", path);

        this.allowField.processPath(path);

    },

    // overriding CQ.form.CompositeField#processRecord

    processRecord: function(record, path) {

        console.log("CustomWidget#processRecord", path, record);

        this.allowField.processRecord(record, path);

    },

    // overriding CQ.form.CompositeField#setValue

    setValue: function(value) {

        var parts = value.split("/");

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

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

        this.hiddenField.setValue(value);

    },

    // overriding CQ.form.CompositeField#getValue

    getValue: function() {

        return this.getRawValue();

    },

    // overriding CQ.form.CompositeField#getRawValue

    getRawValue: function() {

        if (!this.allowField) {

            return null;

        }

        return this.allowField.getValue() + "/" +

               this.otherField.getValue();

    },

    // private

    updateHidden: function() {

        this.hiddenField.setValue(this.getValue());

    }

});

// register xtype

CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

Regards

Albin I

Avatar

Level 10

When moving to Touch Ui, you should be using Granite typeA. If granite types do not meet your business requirements, you can develop custom sling resource type. Do not try and use xtype in Touch UI.

Avatar

Community Advisor

Yes, we are trying to migrate this Classic UI implementation to Touch UI but not getting appropriate details on Touch UI implementation.

Please guide me with details

Avatar

Correct answer by
Level 10

We checked with the Touch UI team. Reply is here:

Hey – the respective granite widget is ootb in 64 - /libs/granite/ui/components/coral/foundation/form/multifield

I recommend changing their storage structure from comma separated properties to nodes and properties (ootb coral multifield)

A sample - http://experience-aem.blogspot.com/2018/04/aem-64-touch-ui-nested-composite-multifield-coral-3.html