Build dynamic forms using JET! — Part 2/5

Check out Part 1 if you haven’t. In this post i’ll talk about the form descriptor — Metadata

In the first part of the series i mentioned the usage of oj-bind-for-each and oj-bind-if for rendering dynamic UI and i also mentioned the usage of type for rendering inputs based on field type. The fields and their types are all part of the form descriptor a.k.a. Metadata.

Metadata

Its a JSON where you describe your form. Imagine, to create an input field what information would you need? type is definitely one that pops up. Others can be whether it is required or not or the label maybe some label hints, you want to limit min-value when its of type number or max-value perhaps? Or you want some rich validators to make sure user enters proper email perhaps. Well, whatever it might be, it should go to the form metadata.

{
                  "Id": {
                    "readonly": true,
                    "type": "string",
                    "labelHint": "Id",
                    "helpHints": {
                      "definition": "Auto-generated when the SR is saved"
                    }
                  },
                  "BarCodeSKUEAN_c": {
                    "readonly": false,
                    "type": "string",
                    "labelHint": "Bar Code SKUEAN",
                    "required": true,
                    "validators": [
                      {
                        "type": "regExp",
                        "options": {
                          "pattern": "^[0-9]+$",
                          "messageDetail": "Please enter digits from 0 to 9"
                        }
                      }
                    ]
                  }
}

Lets see how the field Id will be rendered. It is of type string so we’ll use oj-input-text . ID has to be auto-generated to manage conflicts and uniqueness. For the other properties like readonly, labelHint and helpHints, we will resort to the setProperties method available on each JET component. The reason i chose to use setProperties is simple — I don’t know what other properties an input field can accept and in future if JET adds new properties i could simple start adding them into my metadata without the need for a code change!

Input Value

I created a _value object with each field as a property which points to an Observable. The values entered by the user can be found at one place i.e. _value.

var arr = Object.keys(metadata.properties);
for (var i = 0; i < arr.length; i++) {
      self._value[arr[i]] = ko.observable(val[arr[i]])
}

I’ll cover dynamic form as web component in Part 3. Thanks for reading 🙏