VB: URL Query Parameters

DISCLAIMER: The views expressed in this story are my own and do not necessarily reflect the views of Oracle.

Overview

This article describes how to extract and store query parameters from your web application URL in Oracle Visual Builder. These parameters can be used in your application for various purposes depending on your use case. For example, if you need to load different data sets based on a given field value.

<VBCS_Application_URL>?field1=value1&field2=value2…

Setup

NOTE: For this example, we will extract and store the UserID field.

JS

• First, we need to create a function that extracts all query parameters and another function that retrieves value based on given name.

define([], function() {
  'use strict';
var PageModule = function PageModule() {};
  const queryParams = {};
  
  PageModule.prototype.extractQueryParams = function() {
    var queryString = window.location.search;
    queryString = queryString.slice(queryString.indexOf('?') + 1);
 
    const pairs = queryString.split('&');
    
    for (var i = 0; i < pairs.length; i++) {
      const [key, value] = pairs[i].split('=');
      queryParams[key] = decodeURIComponent(value);
    };
  };
  
  PageModule.prototype.lookupQueryParam = function(name) {
    return queryParams[name];
  };
  
  return PageModule;
});

NOTE: All query parameters (field name and value) are stored in queryParams and can be used as needed during your application’s lifecycle.

Actions

• Create an Action Chain called preInitActionChain that calls JS function called extractQueryParams.

• Create an Action Chain called initActionChain that calls JS function called lookupQueryParam with the field name (e.g. UserID).

• Then assign the result from JS function to a page variable (e.g. userId).

• You should have two actions created as show below.

Events

• Create 2 event listeners as shown below mapped to the applicable action chain (vbBefore → preInitActionChain, vbEnter → initActionChain).

Test

• Now we can test by simply creating a label in HTML to display the UserId field value.

<div class="oj-flex">
  <oj-label class="oj-flex-item oj-sm-12 oj-md-12"><oj-bind-text value="[[ 'User ID: ' + $variables.userId ]]"></oj-bind-text></oj-label>
</div>

• Run the application. Be sure to pass the UserId field in the URL as follows: <VBCS_Application_URL>?UserId=1000000201827314