Delay Display of SDP Data

To improve the performance of your visual application, you can delay fetching of SDP data until it's requested by the user.

An SDP automatically executes the REST point that it's bound to when the associated UI component is first shown on the page, so if we want to delay the execution of the SDP call, we need to hide the UI component. For example, you can delay display of table data on a page until the user clicks a button.

In this procedure, we use an oj-if component to hide a table, then we add an ojAction event to a button on the page. When the button is clicked, the variable controlling the oj-if component is updated, and the REST call is executed to fetch and display the data in the table. For more information on the oj-ifcomponent, see Use Conditions to Show or Hide Components.

An SDP is bound to REST endpoints that fetch many records, which can come from a service or a business object.

In this example, we've set up a service connection using the Create Service Connection wizard to create a Human Capital Management service connection from the catalog and chose the publicWorkers object. For more information, see Create Service Connections from the Oracle Cloud Applications or Integration Applications Catalog.
  1. In your visual application Page Designer, drag a Button component to the canvas and add a label for it in the Properties pane, for example, View List.
  2. Now create a table using a service connection.
    1. From the Page Designer Data tab, expand Services and drag an object (for example, publicWorkers) to the canvas. Choose the second Table item from the Render as list.
      Description of data-delay-choose-table.bmp follows
      Description of the illustration data-delay-choose-table.bmp

    2. In the Bind Data page, search for and select the endpoints that you want to add as table columns (for example PersonID, DisplayName, and LocationTownOrCity). Click Next.
      Description of data-delay-setup-columns.png follows
      Description of the illustration data-delay-setup-columns.png

    3. In the Define Query page, click Finish.
  3. Create a boolean variable to control the table display.
    1. In the Variables tab, click + Variable.
    2. Update the ID to (for example) EmpList and choose Boolean in the Type field.
    3. Select false as the Default Value.
  4. Use the oj-bind-if component to hide the table.
    1. In the Structure view, right-click the Table component and select Surround, then If.
      Description of data-delay-surround-if.png follows
      Description of the illustration data-delay-surround-if.png

    2. Select the If component in the Structure view. In the Properties pane, hover over the Test field and click Select Variable to open the Variables picker.
      Description of data-delay-select-variable.png follows
      Description of the illustration data-delay-select-variable.png

    3. Select EmpList from the Variables list.
      Description of data-delay-assign-variable.png follows
      Description of the illustration data-delay-assign-variable.png

      The table is hidden.
  5. Create an oj-action event for the button.
    1. Select the button component in the Designer, then in the Events tab of the Properties pane, click + Event Listener and select On 'ojAction'.
      Description of data-delay-ojaction.bmp follows
      Description of the illustration data-delay-ojaction.bmp

      You're taken to the Action Chain editor.
    2. Add an Assign Variables action to the canvas. In the action's Properties pane, select EmpList in the Variable list and true in the Value list.
      Description of data-delay-assign-variables-action.png follows
      Description of the illustration data-delay-assign-variables-action.png

Now when users reach the page, they will need to click the button to view the table.