UI5: Validation of a Custom Controls' Property Value

[tim_schauder]

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

[tim_schauder · Accepted solution]

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

[tim_schauder]

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.

[ericci]

Do you get some error in console? Because you have to include the Custom Type inside your Control or at least in the Controller's View

[ericci]

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.