Format field server side validation for custom widgets not working

HCL Leap Leap Forum
1

Leap Version: 9.3.7
Leap Deployment: Standalone
Operating System: Linux for server, macOS for browser

Problem/Query:

I’ve been testing the usage of the ‘format’ field for server side validation of inputs.

Using this for LEAP native input fields has worked as expected, the input is validated both in the frontend and in the backend before submitting.
But when using the format field in our custom widgets, the validation seems to be skipped in the backend during submission.
I’m able to store values that don’t adhere to the formatting rules, and LEAP does not seem to mind.

This is a snippet of our configuration. For testing purposes I’ve set the ‘simplePattern’ to accept only a single number digit, but in the real setup we want to use a regex pattern.

export class BldcInputAmountWidgetInfo extends WidgetInfo {
    id: string = 'bldc.InputBedrag';

    label: IWidgetTranslatableProperty = {
       default: 'Input - Bedrag',
    };
    description: IWidgetTranslatableProperty = {
       default: 'Input - Bedrag',
    };
    datatype?: IWidgetDataType | undefined = {
       type: DataTypeEnum.NUMBER,
       numberType: 'decimal',
       format: {
          simplePattern: '#',
          invalidMessage: 'Doe normaal man',
       },
    };
    category: IWidgetCategoryProperty = {
       id: CategoryIdEnum.INPUT_FIELDS,
       label: {
          default: CategoryTitleEnum.INPUT_FIELDS,
       },
    };

    iconClassName: string = 'euro';

I believe I have set everything up correctly as described here: Data Types
But perhaps I’m overlooking something?

Any help is appreciated! Thanks in advance!

2

The "format " property is only valid for datatype of “string”. Notice in the documentation that it is indented under “string”.

If you do want a single digit number stored in the database, then you can define the datatype as follows:

   datatype: {
     type: 'number',
     numberType: 'integer',
     minValue: 1, 
     maxValue: 9
   }
3

Unfortunately it’s also not working with a string type.
This is a snippet of one of our custom widgets with a string type:

export class BldcInputGeneralTextWidgetInfo extends WidgetInfo {
	id: string = 'bldc.InputAlgemeenTekst';

	label: IWidgetTranslatableProperty = {
		default: 'Input - Algemeen: tekst',
	};
	description: IWidgetTranslatableProperty = {
		default: 'Input - Algemeen: tekst',
	};

	datatype?: IWidgetDataType | undefined = {
		type: DataTypeEnum.STRING,
		length: 255,
		format: {
			simplePattern: '#',
			invalidMessage: 'Doe normaal man',
		},
	};
	category: IWidgetCategoryProperty = {
		id: CategoryIdEnum.INPUT_FIELDS,
		label: {
			default: CategoryTitleEnum.INPUT_FIELDS,
		},
	};

	iconClassName: string = 'text-fields';

	getNewInstance(): BldcInputGeneralTextWidgetInstance {
		return new BldcInputGeneralTextWidgetInstance();
	}

	constructor() {
		super(BldcInputGeneralTextWidgetProperties, BldcInputGeneralTextWidgetPropertiesDisplayOrder);
	}
4

ok, I’ll look closer. If it is not working as documented then we have a bug to fix, or documentation to adjust.

5

I have confirmed that our sample “US Zip Code” custom widget works as expected. The value is correctly validated on the client-side and the server-side, with the latest product code. Perhaps there was a deficiency in Leap 9.3.7? I will verify that next. In the meantime please look for any typos etc on your side.

The datatype for our “US Zip Code” custom widget is defined as:

    datatype: {
        type: "string",
        format: {
            simplePattern: "#####,#####-####",
            invalidMessage: "Please enter a valid US zip code"
        },
    },

I just realized that changes to a custom widget definition might require re-editing of the app and redeployment. In some case it might require recreating the widget so that it takes on its new default properties. What this does hint at though are some limitations in the Custom Widget API w.r.t changes in custom widgets over time.

6

I have confirmed this works for me in 9.3.7.

The sample “US Zip Code” widget is included in the product. You can look at the code in your browser at https://your-leap.example.com/apps/custom-widgets/samples/acme/Acme_ZipCode_Widget.js