Build dynamic forms using JET! — Part 1/5

Dynamic forms are not new. They have been always lurking around in modern web apps — because with JavaScript, what can’t you do?

But i promise this is new. I’m not talking about a simple form where we lay out the fields based on some type check and do a very basic mandatory check when we hit the submit. Because, is it enough? that’s all a dynamic form will ever be? Let’s face it — real forms can be far more complex than this and we need something where we are not restricted to validations and the types of component support in the form.

Enter Oracle JET. Oracle JET or simply JET is Oracle’s strategy for building rich responsive web and mobile clients. Lets reserve the deep-dive into JET for some other time, For now i’ll just focus on why i chose JET for building my dynamic form.

Mainly for 3 reasons (or components) : oj-bind-for-each, oj-bind-if and the biggest of all oj-validation-group

JET happens to have the most robust and easy-to-use front end validation framework i have come across. You can specify a list of validators (from basic min-max to RegEx and Async)in your JET component and each validator is executed whenever your value changes. They do store the final result of the validation execution in a read-only attribute call valid which can be used to check the state of the input at any given time.

Now comes the oj-validation-group. It sound exactly what it does — you can put a bunch of inputs inside the tags and the components happens to keep a track of the valid state as a whole. So, if you have 5 inputs and one of the inputs have a valid state of invalidHidden, the valid state of this component will be set to invalidHidden since its the most invalid state among the others (assuming others are valid).To summarize, if you have a bunch of inputs and you want to keep a track of the validity of your inputs, you just need to wrap them inside the validation group tags and it keeps a track for all your inputs!

oj-bind-for-each, oj-bind-if are exactly how they sound like. You could simply iterate over an array of fields and introduce them into the DOM conditionally based on type.

<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>
        ...
      </template>
    </oj-bind-for-each>
  </oj-form-layout>
</oj-validation-group>

So there you have it — all the essentials for building your dynamic form. Use oj-bind-for-each and oj-bind-if to render and use the rich JET validators and oj-validation-group to keep the check on the validity of your form.

Wait for part 2 where it all comes together 🎉