Over a million developers have joined DZone.

Query-Based Conditional Navigation in Oracle VBCS

DZone's Guide to

Query-Based Conditional Navigation in Oracle VBCS

Want to introduce logic into your navigation? Here is how you can let queries dictate where your users go when using Visual Builder Cloud Service.

· Cloud Zone ·
Free Resource

Learn how to migrate and modernize stateless applications and run them in a Kubernetes cluster.

A couple of threads on the Oracle Visual Builder Cloud Service forum asked about writing code in buttons in VBCS that compares values entered in a page to data in business objects and perform conditional navigation based on the values. In a past blog, I showed the code needed for querying VBCS objects from the UI, but another sample never hurts, so here is another demo...

For this demo I'm going to show how to do it in a login flow — assuming you have a business object that keeps usernames and passwords, and you want to develop a page where a user types a user/pass combination and you need to verify that this is indeed a valid combination that exists in the business object.

(In reality, if you want to do user authentication in VBCS, you should use the built-in security frameworks and not code it this way. I'm just using this as an example.)

Here is a quick video of the working app — with pointers to the components detailed below.

The first thing you'll do is create the business object that hosts the user/pass combination — note that in the video since "user" is a reserved word, the ID for the field is actually "user_" — which is what we'll use in our code later on.

Next, you'll want to create a new page where people can insert a user/pass combination — to do that, create a new page of type "Create". This page will require you to associate it with a business object, so create a new business object. We won't actually keep data in this new business object. In the video and the code, this business object is called "query".

Now design your page and add the user and pass fields — creating parallel fields in the query business object (quser and qpass in the video). You can then remove the "Save" button that won't be used, and instead add a "validate" button.

For this new button, we'll define a new custom action that will contain custom JavaScript code. Custom code should return either a success state using resolve(); or failure using reject();.

Based on the success or failure, you can define the next action in the flow. In our case, we are showing either a success or error message:

Now let's look at the custom JavaScript code:

require(['operation/js/api/Conditions', 'operation/js/api/Operator'], function(Conditions, Operator) {
    var eo = Abcs.Entities().findById('Users');
    var passid = eo.getProperty('pass');
    var userid = eo.getProperty('user_');
    var condition = Conditions.AND(
        Conditions.SIMPLE(passid, Operator.EQUALS, $QueryEntityDetailArchetypeRecord.getValue('qpass')),
        Conditions.SIMPLE(userid, Operator.EQUALS, $QueryEntityDetailArchetypeRecord.getValue('quser'))
    var operation = Abcs.Operations().read({
        entity: eo,
        condition: condition
    operation.perform().then(function(operationResult) {
        if (operationResult.isSuccess()) {
            operationResult.getData().forEach(function(oneRecord) {

    catch(function(operationResult) {
        if (operationResult.isFailure()) {
            // Insert code you want to perform if fetching of records failed
            alert('didnt worked');

Explaining the code:

  • Lines 2-4: getting the pointers to the business object and the fields in it using their field id.
  • Lines 5-8: defining a condition with AND, referencing the values of the fields on the page
  • Lins 9-11: defining the operation to read data with the condition from the business object
  • Line 12: executing the read operation
  • Line 14-18: checking if a record has been returned, and if it has, then we are ok to return success — there was a user/pass combination matching the condition.
  • Line 19: otherwise we return with a failure.

One recommendation while coding JavaScript, use a good code editor that will help highlight open/close brackets matches. It will save you a lot of time.

For more on the VBCS JavaScript API that you can use for accessing business components, see the doc.

Join us in exploring application and infrastructure changes required for running scalable, observable, and portable apps on Kubernetes.

cloud ,oracle visual builder cloud service ,navigation ,queries ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}