Introduction:

Implementing forms in Mendix is easy, we just drop the input widgets according to fields required into a data view widget and map them to attributes. In addition, we can validate and provide feedback to assist the user to input appropriate values. We also have tools such as conditional visibility and on change events in widgets to accept data according to sophisticated conditions.

JSON Schema to JSON form:

JSON Schema to JSON form is a widget available in Mendix marketplace that accepts JSON string to create form. It is based up a react component called react-jsonschema-form. So, this widget accepts JSON schema from our Mendix string attribute and constructs a form based on it and renders on the screen.

JSON Schema to JSON form widget shines in following use cases:

  • Creating forms from the client where we may not know the data model required for it during the development.

  • Form data is complex with multiple levels of associations required.

  • We already have unstructured database in our application where we easily collect the form data.

Key features of this widget include:

  • Enables us to create and use forms dynamically during runtime.

  • Allows us to create complex forms with nested structures like object of arrays or array of objects etc.

  • Perform required and dependency validation at the client on submit.

  • Create disabled, read-only and select widgets with custom options.

  • Allows us to define on Submit action

Dynamic forms in Mendix:

  • The widget configuration in Mendix as follows:

    • JSON Schema - String attribute containing the form structure definition.

    • UI Schema - String attribute defining UI features of input elements.
    • Placeholder - String attribute defining default values on initial rendering
    • Form output - Attribute to which the output JSON should be assigned when the form in submitted.
    • On Change – Activity to be performed when the form is submitted.

  • The widget handles construction of form, setting the submitted output to the attribute, and calling the on-change event. Creating and Mapping responses to forms should be handled separately by us.

  • We can construct the JSON schema in our application itself (by using form attributes entity and script the JSON in microflow), but to keep it simple for now we will create the schema using playground provided by react-jsonschema-form.

Form template creation:

Kindly refer the Form basic in sandbox application to get gist of dynamic form creation in Mendix.

To create a Form, we must configure the following attributes.

  • JSONSchema creation – We define the title, description, and fields for the form as properties and define the data for the dropdown etc.

  • UISchema – We define the placeholder, default value, input widget type, read only or disable mode here in UISchema.

  • Output attribute – The widget renders the form based on the string passed into JSON schema and UI schema attributes. When the form is submitted it generates a JSON string based on the values entered in the form and sets it to Output attribute. This attribute should be a part of the Response object. To preview during form creation, I have created a duplicate output attribute in Form details object.

  • Readonly attribute – The output received is a JSON and we won’t be importing it into Mendix objects as its structure in dynamic and unknown during deployment. We will be using the same widget with slightly altered configuration to display the output. Read only attribute is UI schema with all the fields disabled and submit button hidden.

  • Placeholder attribute – To output the form data we pass the output received from the form submit into placeholder. So, the widget renders the form prefilled with output.

To wrap things up...

Try creating your own form in the sandbox or add response to a form. There is jungle of options available to configure the widget, we can explore on them at the documentation. In addition, we also have the playground with tons of examples to get used to the pattern. Yes, the learning curve might seem steep at the beginning but in truth it becomes a walk-in park after few forms.