avatar image
Former Member

UI5: Validation of a Custom Controls' Property Value

Hi all,

I didn't find a "developer space" in this new SCN, so I hope some experts may find my question and help me with it.

I have created a custom control with some properties in its metadata description and assigned types like "string" or "int" to them. Now I would like to set a custom Type for some properties preventing negative values from getting assigned to them (something like "unsignedInteger"). Is there an official possibility to create a custom Type for usage in a custom controls' metadata property definition or another way for automated validation?

I only found this approach, but it does not work for me: https://www.nabisoft.com/tutorials/sapui5/creating-custom-controls-in-sapui5#Step1

Kind Regards, Tim

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    avatar image
    Former Member
    Oct 17, 2016 at 10:24 AM

    Hi again,

    @Emanuele On your comment: I did not get any error despite including it correctly.

    Then I logged the included custom type in my custom control and the constructor contained some lines instantiating something called a lazy stub. So I thought there is something wrong with the require statements or the declaration of my custom type. I tried the jQuery.sap.declare() function and it solved the problem. I don't know why it didn't work without it, but finally it makes my custom control to use the custom type and to reject an invalid value. (Unfortunately custom SimpleTypes don't work. Neither with, nor without the jQuery.sap.declare())

    sap.ui.define(["sap/ui/base/DataType"],
    function(DataType) {
          "use strict";
    
          jQuery.sap.declare("my.ui.types.UnsignedInteger"); // added
          my.ui.types.UnsignedInteger = DataType.createType( // before: var unsignedInteger = ...
             "my.ui.types.UnsignedInteger", 
             {
                isValid: function(value){
                   return value >= 0;
                }
             },
             DataType.getType("int")
          );
    
          return my.ui.types.UnsignedInteger; // before: return unsignedInteger;
       }
    );
    sap.ui.core.Control.extend("my.ui.charts.Chart",
       {
          metadata: {
             properties: {
                axisThickness: {type: "my.ui.types.UnsignedInteger", defaultValue: 2},
                ...

    Thank you for your help and when anyone can explain, why jQuery.sap.declare() seems to be better in this case, please share your experience.

    Kind Regards, Tim

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 14, 2016 at 09:34 AM

    I think that you need to split your problem in 2 different problems. You can easily create come custom types like this:

    First problem: Create a Custom Type

    sap.ui.define([
    	"sap/ui/model/SimpleType"
    ], function(SimpleType) {
    	"use strict";
    
    	return SimpleType.extend("com.df.framework.type.NumberTypeString", {
    
    		formatValue: function(oValue) {
    			if( oValue !== null && oValue !== undefined && oValue !== "" ) {
    				if( isNaN(parseFloat(oValue)) ) {
    					return "";
    				} else {
    					return oValue;
    				}
    			} else {
    				return "";
    			}
    		},
    		
    		parseValue: function(oValue) {
    			return oValue;
    		},
    		
    		validateValue: function(oValue) {
    			return true;
    		}
    	});
    });
    

    This is a stupid CustomType that is extending SimpleType (where you have to override formatValue, parseValue and validateValue). This custom type just validate the value to be a Number. You can have a good read on SAP Documentation.

    Second Problem: automatically load this CustomType based on the $metadata of the field

    In this case I cannot help you, but you can take a look here.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 14, 2016 at 11:28 AM

    Hi Emanuele,

    thank you for your answer. I've tried extending the SimpleType class but the automated type validation of my controls' properties does not use it.

    SimpleType.extend("my.custom.type.UnsignedInteger", {...})
    sap.ui.core.Control.extend("my.custom.control.Chart",
       {
          metadata: {
             properties: {
                axisThickness: {type: "my.custom.type.UnsignedInteger", defaultValue: 2},
                ...

    When i try to call setAxisThickness with a value of -2 or even with values of other types, no validation error occurs. The same with oData Types because they only extend SimpleType as well.

    Add comment
    10|10000 characters needed characters exceeded

Skip to Content