The Visual Builder Cloud Service Blog

Data Security and Role-Based UI in Visual Builder Applications

John Jullion-Ceccarelli
Product Manager

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lab we will add some role-based UI based on groups in IDCS. We will also implement Data Security on our Expense Report business object.

It's important before we go on that you understand the difference between data security and role-based dynamic UI. You need to do both to provide a secure app that has elegant usability.

Data Security

Data Security controls what data a user can fetch from the back-end. You can limit access to an entire resource - i.e. all Expense Reports - or define more complex rules for a resource - i.e. all Expense Reports created by me. Data security is enforced at the service endpoint so it's always secure and can't be spoofed by changing settings in your browser or changing the URL of the REST service being called.

For business objects, you can define your own security rules at the object level. You can't set data security rules for fields in an object - i.e. only Managers can see the Salary field in an Employee object.

For external REST services, you have to set the permissions at the service endpoints. There is no way to set additional VBCS-specific security rules over what the endpoints already specify. For many Oracle PaaS and SaaS services, like Oracle Sales Cloud or Oracle Mobile Cloud Service, you can define the security rules for the endpoints exposed.

Role-Based Dynamic UI

Role-based dynamic UI controls what components a user sees on a page. You can set restrictions on entire pages, or just on certain components in a page. For example you can hide the navigation button to a page or a tab.

We use this expression to set component visibility by role:

<oj-bind-if test=“$application.user.roles.role_name” > </oj-bind-if>

Role-based dynamic UI is only enforced on the client. It is easy to go into the browser's developer tools and change the value of the user role. As such it alone is not enough to make a secure application - you must always use it with data security. So you hide the navigation to a page and make the contents of that page appear only to certain roles, but you must also secure the data returned on that page so that if someone spoofs the role the REST call only returns an empty data set.

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, go to Building Your First VBCS Application and follow the steps to import the project, then continue below.

  1. Download this ZIP file to your computer.
  2. In your project, click the menu in the top right and choose Import Resources.
  3. Drag and drop the ZIP file into the dialog. Select Delete existing files and resources and click Import.

Setting Up a Role

When you set up additional roles in your project, the roles map to groups in your IDCS account. Roles are defined at the project level and are available to all applications and business objects in the project. These roles act as additional roles on top of the standard VBCS "Authenticated User" role. We will talk more about what that means in the next section. For now, let's just set up a role.

  1. Open Project Settings in the top-right of the application window.

    project settings
  2. Click User Roles. Then click Create Role. Name the role Admin and click Create.
  3. In the Admin tile that was created, click Assign groups or users and in the Users section assign yourself to the group.

Setting Up Data Security

Now let's define data security rules on our Expense Report business object. We will it configure it so that:

  • Authenticated User can only see their expense reports
  • Admin user can see all expense reports

So let's do that now:

  1. In the Business Objects panel, click Expense Report to open the Business Object Editor
  2. Click the Security tab in the editor, click the icon next to Role-based Security
  3. Select Authenticated User. The View, Edit, and Delete rows display below.
  4. Click the menu for each of these and select Allow if user created row
  5. Notice you can expand each node to see the exact query being checked for and add additional conditions to the query.

Previewing the App as Different Roles

The Page Designer has a Who Am I button  that allows you to preview the application in different roles. As we said, the Admin role is an additional role layered onto the Authenticated User role. But you can have different settings for all authenticated users and just Admin users. So if you want to preview the app as Admin, you have to deselect Authenticated User, even though Admin users are also authenticated users.


Note that the Who Am I only spoofs the role in the UI and does not change the identity with which you call the services. Therefore, the Expense Reports REST calls will still return all the data that you - the currently logged in VBCS designer user - are allowed to see.

Setting Role-Based View Restrictions on a Page

You can set role-based permissions on a page or flow in the JSON metadata for the page/flow. 

  1. In the Web App panel, click the admin flow node to open the admin flow editor page.

  2. Click the {} node to view the JSON for the page. 
  3. Enter the following code at the end of the JSON. Don't forget the comma at the end of the variable line:
      "variables": {},
      "security": {
        "access": {
          "requiresAuthentication": true,
          "roles": ["Admin"]
  4. If you run the page as a user who does not have Admin access, the Administration link no longer works

Hiding the Navigation Link to the Admin Page

Now we will set up a rule on the Administration link to make it visible only to people with the Admin role.

  1. In the Web Apps panel of the App Navigator, click root pages > shell.
  2. Click the source tab {} and under navDataSource.defaultValue.data delete the second object so that it looks like this:
    "variables": {
        "navDataSource": {
            "type": "vb/ArrayDataProvider",
            "description": "The model describing the flows in the app",
            "defaultValue": {
                "idAttribute": "id",
                "data": [
                        "name": "My Expense Reports",
                        "id": "my-expense-reports",
                        "iconClass": "oj-fwk-icon oj-fwk-icon-list oj-navigationlist-item-icon"
  3. Click the Events tab click Create Event. Select vbEnter event and click Next.
  4. Add a new Page Action Chain called setNavVisibility and click Select.
  5. Open the setNavVisibility action chain. 
  6. Drop an If action onto the action chain. Set the condition to:
    [[ $application.user.roles.Admin ]]
  7. Drag an Assign Variables action to the true path of the action chain. Click Assign in the Property Inspect. On the right side, select navDataSource > data. Set Reset Target to empty. Enter the following in the expression field:
      "name": "My Expense Reports",
      "id": "my-expense-reports",
      "iconClass": "oj-fwk-icon oj-fwk-icon-list oj-navigationlist-item-icon"
      "name": "Administration",
      "id": "administration",
      "iconClass": "oj-fwk-icon oj-fwk-icon-list oj-navigationlist-item-icon"
  8. Click Save. Use the Who Am I button to check that the nav link shows/hides correctly.

Join the discussion

Comments ( 2 )
  • karen cannell Sunday, March 10, 2019
    cannot fillow the end of this nee - #2 of last section:
    Right-click on Administration link? Where is this ? Still looking. Plese clarify this section.
  • John Ceccarelli Tuesday, May 7, 2019
    Karen when you've opened the shell page, in the navigation bar at the top of the page, there should be a tab called Administration. This is the one you need to right-click.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.