Build dynamic forms using JET! — Part 3/5

Checkout part 1 and part 2 if you haven’t . In this post i will cover form html generation aka rendering the form.

Photo by Branko Stancevic on Unsplash

I part 2 we saw how forms could be described using json metadata and in part one we saw how oj-bind-for-each and oj-bind-if could be used for rendering html dynamically. In this post we will see how they all come together and help us render the form.

The below JS function is responsible for inserting each field into the DOM. Field is inserted when the field prop is pushed to _metadataArr array and all properties are added via self.applyProperties(prop.id, prop) function call which internally calls setProperty on each field inserted to set the properties (label, hints, validators etc).

DynamicForm.prototype.generateField = function(attribute, props) {
    var self = this;
    return new Promise(function(resolve, reject) {
      var prop = props;
      prop.id = self.getAttributeId(attribute);
      prop.attribute = attribute;
      try {
        require([REQUIRE_PATHS[self.getType(prop)]], function() {
          self._metadataArr.push(prop);
          self.applyProperties(prop.id, prop);
          resolve();
        })
      } catch (err) {
        resolve(err);
      }
    })
};

The corresponding html looks like this. Notice how we loop over _metadataArr which we are populating with the field props above.

<oj-validation-group :id="[[_validationGroupId]]" on-valid-changed="[[setValid]]">
  <oj-form-layout :id="[[_formId]]">
    <oj-bind-for-each data="{{_metadataArr}}">
      <template>
      <oj-bind-if test="[[getType($current.data) == 'string']]">
        <oj-input-text  value="{{_value[$current.data.attribute]}}" :id="[[$current.data.id]]" ></oj-input-text>
      </oj-bind-if>
      <oj-bind-if test="[[getType($current.data) == 'number']]">
        <oj-input-number value="{{_value[$current.data.attribute]}}" :id="[[$current.data.id]]"></oj-input-number>
      </oj-bind-if>
     
      ...
     
      <oj-bind-if test="[[getType($current.data) == 'oj-switch']]">
      <oj-switch disabled="[[readonly]]" value="{{_value[$current.data.attribute]}}" :id="[[$current.data.id]]"></oj-switch>
      </oj-bind-if >
    </template>
    </oj-bind-for-each>
  </oj-form-layout>
</oj-validation-group>

In the next part we will look at how values are captured and forms are validated.