Skip to Content
2
Aug 31, 2023 at 03:26 PM

Validate SmartFields for new entry

248 Views

Dear experts,

I am currently struggling with validation of currency SmartFields in a freestyle UI5 application.

Background: This is a freestyle SAPUI5 app (version 1.96.22) built using an OData V2 SAP Gateway service.

I have the following Demo entity:

image.png

On the frontend side, I am creating a new entry:

this.getModel().createEntry("/DemoEntitySet", {
   properties: {
      Currency: "EUR" // Default
   },
   created: function (oContext) {
      this.getView().bindElement(oContext.getPath());
   }.bind(this)
});
My view has the following layout:

image.png

Note: None of the attributes are marked as Nullable in the Gateway Builder, which correctly renders all fields as required.

<smartForm:SmartForm editable="true">
	<smartForm:Group>
		<smartForm:GroupElement label="Description">
			<smartField:SmartField
                                id="Description"
                                value="{Description}" />
		</smartForm:GroupElement>
		<smartForm:GroupElement label="Price">
			<smartField:SmartField
                                id="Price"
                                value="{Price}" />
		</smartForm:GroupElement>
	</smartForm:Group>
	<smartForm:Group>
		<smartForm:GroupElement label="Start Date">
			<smartField:SmartField
                                id="StartDate"
                                placeholder="dd.MM.yyyy"
                                value="{StartDate}" />
		</smartForm:GroupElement>
		<smartForm:GroupElement label="End Date">
			<smartField:SmartField
                                id="EndDate"
                                placeholder="dd.MM.yyyy"
                                value="{EndDate}" />
		</smartForm:GroupElement>
	</smartForm:Group>
</smartForm:SmartForm>
When pressing ‘Save’, without touching any of the input fields, I don’t want to send a request to the backend. Instead, I want to highlight all the mandatory fields as per Fiori guidelines:
https://experience.sap.com/fiori-design-web/form-field-validation/#on-create-or-save

image.png

This seems to work using the following logic:

onSave: function () {
   ["Description", "StartDate", "EndDate", "Price"].forEach(function (sPropertyName) {
      this.byId(sPropertyName).checkValuesValidity();
   }.bind(this));

   if (this.getModel("messages").getData().length > 0) {
      return;
   }
},
For most fields except the Price:

image.png

For whatever reason, the JavaScript null value is not seen as ‘Null’ by the OData model. Any ideas on how to solve this? Is there some missing information in the metadata? I don’t want to switch to regular Input fields and have to write all the validations and formatting by myself.

If I type something in the field, then it seems to work:

image.png

When I remove the invalid value, the field is correctly parsed as 0:

image.png

This is still not that great, as in case of the ABAP backend, this 0 is still initial. However, at least the end user confirmed the input.

Attachments

image.png (73.7 kB)
image.png (19.9 kB)
image.png (63.7 kB)
image.png (39.4 kB)
image.png (21.3 kB)
image.png (11.0 kB)