Dynamic Fields using Oracle Visual Builder

Oracle Visual Builder offers a component called “oj-bind-for-each” which binds items of an array to the specified markup section. The markup section is duplicated for each array item when element is rendered.

So, what if we want to create a dynamic fields where the fields can change by time either by adding or removing them?

We can do so using the “oj-bind-for-each”.

Our scenario will be as follows, we will have a page that has a table where we add the needed fields, then navigate to the other page where we will display the added fields and have a table that contains these fields as columns to add data as wanted

After adding the attributes in the table and clicking ‘Go to Request Page’, the data will be passed to the other page as below:

[{"attrField":"emp_num","attrName":"Employee Number","attrType":"NUMBER","isActive":"Active","isRequired":"Yes","notes":"Enter numbers only"},{"attrField":"emp_name","attrName":"Employee Name","attrType":"TEXT","isActive":"Active","isRequired":"No","notes":"Enter characters only"}]

We will need to format the data to be used in “oj-table” and to draw our fields, so we will check if the entered attribute is “Active” or not to make sure to show only active attributes, and also to know if it is required or not and so on

for (let i = 0; i < arr.length; i++) {

      if (arr[i].isActive === "Active") {

        cols.push({ field: arr[i].attrField, headerText: arr[i].attrName, isRequired: arr[i].isRequired === "Yes" ? true : false, fieldValue: "", fieldType: arr[i].attrType,fieldNotes: arr[i].notes });
      }

    }

The output:

[{"field":"emp_num","headerText":"Employee Number","isRequired":true,"fieldValue":"","fieldType":"NUMBER","fieldNotes":"Enter numbers only"},{"field":"emp_name","headerText":"Employee Name","isRequired":false,"fieldValue":"","fieldType":"TEXT","fieldNotes":"Enter characters only"}]

Now comes the use of “oj-bind-for-each”, where we will loop on the new array and based on the fieldType we can use validators to make sure entered data is as expected and make the field required or not..

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-12">

    <oj-validation-group id="contractLoop">
      <oj-form-layout label-edge="top" max-columns="2" class="" direction="column">

        <oj-bind-for-each data="[[ $variables.editableFields ]]">
          <template>
            <oj-input-text label-hint="[[ $current.data.headerText ]]" required="[[ $current.data.isRequired ]]"
              value="{{ $variables.editableFields[$current.index].fieldValue }}"
              validators="[[ $functions.validateInput($current.data.fieldType) ]]"
              placeholder="[[ $current.data.fieldNotes]]"></oj-input-text>

          </template>
        </oj-bind-for-each>

      </oj-form-layout>
    </oj-validation-group>

  </div>
</div>

And as for drawing the table with the dynamic fields, all we need is to pass the new formatted array to the “columns” property

<div>
  <oj-table scroll-policy="loadAll" columns="{{ $variables.fieldsADP.data }}" data="[[ $variables.contractADP ]]"
    on-first-selected-row-changed="[[$listeners.tableFirstSelectedRow]]" selection-mode.row="single"></oj-table>
</div>

So, how to add data to the table?

1. Create an ADP of type “Any”
2. Using JavaScript function, populate your ADP

PageModule.prototype.populate = function (data, objArr,rowsCount) {
    let obj = {};
    obj.id = rowsCount;

    for (let i = 0; i < objArr.length; i++) {
      obj[objArr[i].field] = objArr[i].fieldValue;
    }

    data.push(obj);

    let adp = new ArrayDataProvider(data, {
      keyAttributes: 'id'
    });

    return adp;
  };

I hope you found this helpful and have a nice day 😄