Create Dynamic Tree Navigation List in VBCS

There are some requirements for which we need to dynamically generate Navigation structure, this can be due to Role based security or a custom functionality.
Below i have step by step guide on achieving the same.

  • Navigate to the Default Root Page
    • In Most instances it is the shell page but can be customized to use another page
  • In the code section you can see the div tag which is responsible for loading the flow pages, this is the section which we have to edit to include a navigation list
  • Inside above div tag we need to create 2 flex items which divide the page into 2 vertical blocks, one for navigation and another for displaying the actual flow content

  • We can do this by creating 2 oj-flex-item inside the main oj-flex div giving it space content as shown above, below is the code snippet for the same.

<div class="oj-web-applayout-content oj-flex">
      <div class="oj-flex-item oj-md-2">
             <!-- Add Navigation List Pane here -->
      </div>
      <div class="oj-flex-item oj-md-10">
      <!-- Where Visual Pages will be rendered -->
            <oj-vb-content id="vbRouterContent" class="vbcs-pages-module oj-flex-item" config="[[vbRouterFlow]]">
      </oj-vb-content>
      </div>
    </div>

  • Now create a Array of Json structure to show the Navigation list, here we are defaulting the JSON structure but it can be generated dynamically based on custom logic or can be retrieved from a Service Connection or can be created from Business Objects
    • Create a variable/constant to store the calculated JSON structure

    • Assign it below value
[
    {
        "name": "HomePage",
        "id": "homepage",
        "icons": "oj-ux-ico-home"
    },
    {
        "name": "TestNav1",
        "id": "testnav1",
        "icons": "oj-ux-ico-blog-post-detail"
    },
    {
        "name": "TestParent",
        "id": "testParent",
        "icons": "oj-ux-ico-administration",
        "children": [
            {
                "name": "TestChild1",
                "id": "testchild1"
            },
            {
                "name": "TestChild2",
                "id": "testchild2",
                "children": [
                    {
                        "name": "TestChild2-1",
                        "id": "testchild2-1"
                    },
                    {
                        "name": "TestChild2-2",
                        "id": "testchild2-2"
                    }
                ]
            }
        ]
    }
]

Note : This is a sample JSON structure it should be customized as per requirement

  • On Application Load event generate a ArrayTreeProvider(ATP) based on the JSON
    • Create below JS function to generate an ATP
PageModule.prototype.buildTreeFromJson = function (jsonData){
    return new ArrayTreeDataProvider(JSON.parse(jsonData), { keyAttributes: 'id', });
  };

    • On shell Page Load event call this function passing the generated JSON structure and store the returned ATP in another variable navDataTree


  • Create Navigation component in first div
    • Drag and Drop a Navigation component or create a Navigation list structure manually
    • Modify default navigation list to pick up navigation components from above created ATP, below is the code snippet for the same 
<oj-navigation-list drill-mode="sliding" aria-label="Choose a navigation item"
          data="[[ $variables.navDataTree ]]" id="navlist">
          <template slot="itemTemplate" data-oj-as="item">
            <li :id="[[item.data.id]]">
              <a href="#">
                <span :class="[['oj-navigationlist-item-icon ' + item.data.icons]]"></span>
                <span :class="oj-navigationlist-item-icon"></span>
                <oj-bind-text value="[[item.data.name]]"> </oj-bind-text>
              </a>
            </li>
          </template>
        </oj-navigation-list>


  • On Page load we can see the navigation list on the left
    • We can test the drill down by clicking on TestParent Navigation

  • Create Selection Change Event on Navigation List and in Action Chain add code to Navigate to corresponding Flow/Page.

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