Creating editable form table using Buffer Data Provider in VBCS (Part2)

 This is a continuation of previous blog.

  • Now add another blank column to the table where we will later add the edit row button to edit the respective row

  • Create an ANY type of variable editRow and assign the same to edit-row property of the table


  • Modify edit-mode to rowEdit

  • Create an object rowData having same type as the Employee data to store user updates on ui

  • Create rowTemplate inside the table as shown below to display rows in navigation and edit mode
<template slot="rowTemplate" data-oj-as="row">
      <tr>
        <!-- ko if: row.mode === "navigation" -->
        <td>
          <oj-bind-text value="[[row.item.data.FirstName]]"></oj-bind-text>
        </td>
        <td>
          <oj-bind-text value="[[row.item.data.LastName]]"></oj-bind-text>
        </td>
        <td>
          <oj-bind-text value="[[row.item.data.PhoneNumber]]"></oj-bind-text>
        </td>
        <td>
          <oj-bind-text value="[[row.item.data.Email]]"></oj-bind-text>
        </td>
        <td class="oj-sm-padding-0-vertical">
          <oj-button display="icons" chroming="borderless" data-oj-clickthrough="disabled">
            <span slot="startIcon" class="oj-ux-ico-edit"></span>
            Edit
          </oj-button>
        </td>
        <!-- /ko -->
        <!-- ko if: row.mode === "edit" -->
        <oj-bind-if test='[[ row.mode === "edit" ]]'>
          <td colspan="5" class="oj-form-control-default oj-sm-padding-2x oj-table-data-cell-padding">
            <oj-validation-group id="validate-edit-form">
              <oj-form-layout id="ofl1" max-columns="4" direction="row">
                <oj-input-text id="it1" label-hint="FirstName" value="{{ $variables.rowData.FirstName }}"
                  class="editable" required="true"></oj-input-text>
                <oj-input-text id="it2" label-hint="LastName" value="{{$variables.rowData.LastName}}">
                </oj-input-text>
                <oj-input-text id="it3" label-hint="PhoneNumber" value="{{$variables.rowData.PhoneNumber}}">
                </oj-input-text>
                <oj-input-text id="it4" label-hint="Email" value="{{$variables.rowData.Email}}">
                </oj-input-text>
              </oj-form-layout>
            </oj-validation-group>
            <oj-button id="cancel" chroming="borderless" data-oj-clickthrough="disabled">
              Cancel
            </oj-button>
            <oj-button id="update" chroming="outlined" data-oj-clickthrough="disabled">
              Apply
            </oj-button>
          </td>
          <!-- /ko -->
      </tr>
    </template>
  • After implementing the above templte the ui should look like below

  • Create an ojAction on edit row button and assign shown value to editRow variable


  • Now run the application, on click of edit row button an editable form will open

  • Now lets pass value to this form, for this we will have to create a ojBeforeRowEdit event and assign value to our custom rowData object



  • Now let’s rerun the application, this time we should see data populate in the form on click of edit button


Comments

Post a Comment

Popular posts from this blog

Mavenize an Oracle ADF Application

Image
To Mavenize an Oracle ADF Application first step would be to Setup Maven in Jdeveloper after this we Mavenize Oracle ADF Application . Follow below steps to Setup Maven in Jdeveloper 1.> Navigate to Tools > Preferences > Maven > Settings 2.> Get user settings file path - For me it is : C:\Users\username\.m2\settings.xml 3.> Navigate to path and modify settings file server tag as below  <servers>     <server>     <id>maven.oracle.com</id>     <username>OracleUserName</username>     <password>OraclePwd</password>     <configuration>       <basicAuthScope>         <host>ANY</host>         <port>ANY</port>         <realm>OAM 11g</realm>       </basicAuthScope>       <httpConfiguration>       ...
Read more

Creating Column Filter on a VBCS Table using ListDataProvider(LDP)

Image
 In this blog we will create filter functionality for a table using ListDataProvider (LDP). Create an ADP based Table in VBCS based on any Data Source For this example, I will use a JSON file as Data Source and create an ADP based table for the same Create textboxes on top of columns which will act as filters for the columns Create 5 textboxes on top of each column to act as filters Create searchObject variable and map all filter text values to it Convert the ADP to ListDataProviderView Create function to convert ADP to ListDataProviderView Call custom function getListViewProvider , it takes a custom ADP and filter Criteria as parameters, on Page all data are shown hence filter criteria passed will be null Call on vb-Enter event and assign the same to oj-table data Assign a single value change event for all the filter fields Call custom function getFilterCriterion to get filter criteria for ListDataProviderView Filter the ListDataProviderView based on the filter criteria Run the Ui...
Read more

Using Custom Colors in Sunburst Chart

Image
 In  Previous blogs we have created Sunburst Chart, now we will try to add custom color to the same Create VBCS App with Sunburst Chart Create a Global array and provide it custom rgb color palette values. Now create a custom function which will return an array value randomly or based on any custom logic, for this example i will be passing the color based on the node’s id value. Replace the old function with the newly created one Now you can see custom colors as per our logic and also these colors will remain static and will not change every time the ui is opened.
Read more