Bind constraints in Input control of SAPUI5

Question

My rest service expose me a group of fields: each filed has a value and a list of attributes: enabled, maxLength (in case of string), minLength (in case of string), decimals (number of decimal digits - in case of float).

In OpenUi5 I have:

• value and enabled are properties of Input control Link (Good!! I can bind properties with model contains the attributes)
• maxLength and decimals are optionsof String type and Float type (Link) but I can't bind options with a model :-/
• minLength I can't find a property/option

I would like map (bind) each attribute with component so that automatically the library control for me without writing more code.

Answer 1

there is a property called maxLength for Input Control.

So the only problem I see is binding minLength and decimals for which there is little bit effort is needed.

Solution

• Create your own input control by extending the existing Input Control.How to achieve it?

Sample Code Structure:

jQuery.sap.require("sap.m.Input");
jQuery.sap.declare("sap.m.ComplexInput");

sap.m.Input.extend("sap.m.ComplexInput", {
    metadata: {
        properties: {
            minLength: {
                type: "int"
            },
            decimals: {
                type: "int"
            },
            events: {
                //define your own events like checkMinLength,checkDecimals 
            }
        },
        onInit: function () {
            //on init do something
        },
        onAfterRendering: function () {
            //called after instance has been rendered (it's in the DOM)
        },
        _somePrivateMethod: function () {
            /*do someting...*/
        },

        somePublicMethod: function () {
            /*do someting...*/
        },
    }
});

sap.m.ComplexInput.prototype.exit = function () {
        /* release resources that are not released by the SAPUI5 framework */
        //do something
};

• Adding CustomData and using wherever you want to. Then you can access custom data in validation process or on liveChange or so..

Bind the other properties to the value of customData

var input = new sap.m.Input({
    value: '{value}',
    enabled: '{enabled}',
    maxLength: '{maxLength}',
    customData: [
        new sap.ui.core.CustomData({
        key: 'minLength',
        value: '{minLength}'
        }),
        new sap.ui.core.CustomData({
            key: 'decimals ',
            value: '{decimals}'
        })
    ],
    change: function(oEvent) {
        var src = oEvent.getSource();
        var minLen = src.getCustomData()[0].getValue();
        var decimals = src.getCustomData()[1].getValue();
        if (src.getValue() && src.getValue().length > minLen) {
            src.setValueState('Success');
        } else {
            src.setValueState('Error');
        }
    }
});