Migrating custom xtypes to Touch UI

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

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.

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 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

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.