User preferences on table in Oracle VBCS

Objective

Allow every user to customize a table and automatically restore their preferences whenever they log in.

This project break into two slices, they are Resizable Columns and Drag & Drop Column Ordering

Slice 1: Resizable Columns

User Story
As a user, I want to resize table columns and have Oracle VBCS remember my preferred widths.

As you know create application and table data in the page.
Focus on every columns data and changes to Enable fields.

FYR

To visual the table into grid ,I used grid option also I enable Selection Mode, Column & Selection Mode, Row to single for further Dnd option.

Slice 2: Drag & Drop Column Ordering

User Story
As a user, I want to rearrange columns according to my work style.

Small manipulation required follow me more!!

1.From the code, cut the table column property and write it into js function as return statement.

FYR
The below highlighted column property has to cut it.

Under Js function return as like

we added the column source data from js

Now whenever user wants to change columns preference it should be store in local, for this we will build via event action.

let's rock it properly!!

With help of property changes on columns, we will make it followed by new action chain created

Below code snippet has used in the action chain

define([
  'vb/action/actionChain',
  'vb/action/actions',
  'vb/action/actionUtils',
], (
  ActionChain,
  Actions,
  ActionUtils
) => {
  'use strict';

  class TableColumnsChangeChain extends ActionChain {

    /**
     * @param {Object} context
     * @param {Object} params
     * @param {object} params.event
     * @param {any} params.previousValue
     * @param {any} params.value
     * @param {string} params.updatedFrom
     * @param {any[]} params.columns
     */
    async run(context, { event, previousValue, value, updatedFrom, columns }) {
      const { $page, $flow, $application, $constants, $variables, $functions } = context;

      await this.LocalDatastore(context,columns);
    }

    /**
     * @param {Object} context
     */
    async LocalDatastore(context, columns) {
      const { $page, $flow, $application, $constants, $variables } = context;
      localStorage.setItem("table1",JSON.stringify(columns));


    }
  }

  return TableColumnsChangeChain;
});

And final js function

define([], () => {
  'use strict';

  class PageModule {
    tableColumn(){
      return JSON.parse(localStorage.getItem("table1")) || [{"headerText":"DOB","field":"dOB","resizable":"enabled","sortable":"enabled"},{"headerText":"EMAIL","field":"eMAIL","resizable":"enabled","sortable":"enabled"},{"headerText":"NAME","field":"nAME","resizable":"enabled","sortable":"enabled"},{"headerText":"PH","field":"pH","resizable":"enabled","sortable":"enabled"}];
    }
  }

  return PageModule;
});

Result

Finally we are successfully able to drag the columns as user expectation and store his/her preferences in locally !!.

This makes a great internal innovation showcase because it is simple to understand, highly visible and demonstrates how Oracle VBCS can deliver consumer-grade personalization using stored user preferences.