Shay Shmeltzer

With newer versions of Oracle JET we are recommending using the new select-single instead of the old (and deprecated) select-one component. In a past blog entry about tips for using lists in Visual Builder, I showed how to get additional values from the record you selected in a select single. I figured I owe you an update that shows how to achieve the same thing with a select-single. 

When you bind a select-single to a set of options, beyond selecting the value and the label, you are also able to select additional fields that will construct the row of data. In the demo below for example I use id for the value, name for the label, and then add salary as the additional field. The select-single expose an event for value-item change. The payload for this event include not just the key selected, but also "data" - which has all the fields in the record you chose.

You can then simply get their value in the action chain using something like $action.variables.data.fieldName - so in the video below I'm using the $variables.data.salary to get the value of the salary for the selected employee and then assign it to another variable on the page.

With the new support for Oracle JET 9 in Oracle Visual Builder, it's much simpler to create a multi-row selection enabled table that with checkboxes for row selection. Below is a quick video showing how this is done. This is much simpler compared to the approach you had to take before.

The table automatically adds a selection checkbox column when you set the selection-mode.row="multiple" attribute. There is an on-selected-changed event on the table - and you can attach an action chain to it. The event gets an array of the selected row keys as an input parameter. In the video, I'm simply looping over this array and show a notification with the row key referring to them with the expression - [[ $variables.keys[$current.index] ]]. You can of course use this array for any follow up steps you want to do on the rows.

Note that this will only work if your app is using the Redwood theme (the default for new apps in VB). If your app is still using an Alta based theme you won't see the checkboxes, you'll need to switch your app to Redwood to get them.

Perceived performance is how your end user perceived the speed of your application. There are all sorts of "tricks" you can use to influence this perception and help your application seem faster in the eyes of the user. In this blog we are going to cover two quick ideas - the first is shifting delays from initial page load to a later time, and the second is providing the user with a distraction while a long running action is taking place.

Control Data Fetch Timing

In the first part of the demo below I show how you can control the timing of data fetching in your application, delaying data fetch until it is actually shown on the page. This is a common technique you can use to improve the initial rendering of a page. There is a tradeoff to take into account between slow initial rendering and slowness later on when working with the page. In the demo we use an oj-bind-if component to hide a table/list until it is actually shown on the page. Since the table is not rendered, the SDP backing the table not executing the REST call initially. When we actually need to show the data, we update the variable controlling the oj-bind-if and only then is the REST call executed and the data fetched and displayed. Another advantage of this technique is that if the user never actually require to see the specific component, the REST call won't be executed and you saved overall time. In the demo I'm demoing how to do this with a collapsible area, but similar approach could be implemented for other hidden areas - such as tabs on a page.

Notify The User About Delays

The second part of the video shows how to notify a user that the delay they are experiencing is because the app is actually busy doing something. Again there is a psychological aspect here - a user is more likely to accept a delay if they know that something is happening, and in addition the user mind is busy reading the text which distract them from noticing the delay. To do this we add a dialog to the page, and open it at the start of an action chain, closing it as the last step in the action chain using the call component method action.

As you can see there are various things you can do to help tune your application as well as your end user experience working with the app.

Visual Builder is often used to create apps that let users review and update data located in an external system. When the external system lacks proper REST APIs to support directly reading and writing the data, a common solution is to extract data from the origin system and load it into business objects in the VB app. Users can then directly modify the data in the BOs, and the data is synched later back to the original system. 

In this blog I show how to create an automated data loading process into the business objects leveraging Visual Builder Studio. The blog doesn't cover extracting the data from the origin system - there are many ways to do this including Oracle Integration Cloud. We start from a situation where the data we need to upload is available in csv files.

Data Management Build Tasks

Among the new build tasks added to Visual Builder Studio specifically for Visual Applications are tasks for import and export of data. These will allow you to load the data into the business objects and export it later on.

If you are working on a live production application, you will need to first lock the application in order to bulk load the data. You achieve this using the lock and unlock build steps. This is needed since the import process replaces the data currently in the business objects - so you don't want people working on that data at this point of time and losing their work.

In the demo video below, we added a Git repository to our project into which we'll be uploading a zip file containing csv files with the data we want to load into business objects. You can generate an initial zip file with the correct structure of the files using the export option in the data manager in Visual Builder.

We create a build job with 3 build steps: we first lock the live app, then import data, and then unlock the app. The steps for doing this require the Root URL and version number for the deployed app - which you can see in the deployment tab in the Environments section of Visual Builder Studio (or in the visual-application.json file in the root directory of your git repo).

In the video I show how to define a periodic schedule to trigger these build job. But if you prefer, you can also trigger the build automatically when the zip file in the git repository is changed.

Note that the import functionality replaces the content of the BOs - so be sure to first export the data if you need a copy.

The export step can also be used to get the updated data out of the BOs, so you can then load it into the source system or leverage it in other places.

 

With Visual Builder Studio the lifecycle of the application's code is managed separately from that of data that is stored in business objects. In this blog we'll show you how to hook up data management into the process that deploys your application. Managing the data lifecycle can be done using the new Visual Application build steps that were added to Visual Builder Studio. Note that this demo is a continuation of the previous blog that shows the initial configuration of a package and deploy steps.

The data manager in Visual Builder helps you get data in and out of business objects while developing the app. We'll use the Visual Builder Data Manager "Export all Data" option to generate a zip file with base data we can use in our dev/test app. This will create a zip file with csv files with the data for each business object.

In Visual Builder Studio, we create a separate Git repository to store this file, as it is not part of your application code. Then we are going to load the exported file into that repository. 

To automate populating business objects we create a new build job that uses the Import Data step from the Visual Application category. Note that the application we are importing into in the video is published with a version in the path ("Include the application version in the URL" is checked) - which means this is not a "live" app as the URL will change when we modify the app version. We can therefor import data into it directly.

Applications that don't have the "Include the application version in the URL" checked are your "live/production" apps - with a fixed URL that won't change when you deploy new versions. If you want to do a similar import of data into a live/production app, then you need to first use the Lock step to lock the app, then import the data, and then Unlock the app.

Note that the options also include an Export Data - which you can use to first export data from the current instance of the app, then do the deploy step, and then import the data back in.

Here are the base steps:

If you currently develop applications with Visual Builder we hope you already saw the news about the new Oracle Visual Builder Studio offering. This new service adds a complete environment that helps manage VB apps development across team members, and can automate continuous integration and continuous deployment of VB apps. If you haven't read about this - here is a quick blog summary of the advantages VB Studio offers for VB developers - and here is a short video showing the day-to-day experience working with VB Studio and VB apps.

So how do you take your existing apps and bring them to this new environment?

It's quite simple - you export the app from your Visual Builder instance - and then import the code into a new project in Visual Builder Studio.

The following video shows the steps you need to take to get your app into Visual Builder Studio.

As you can see, when you bring in your app, we load it into a Git repository in your project - this is now the source of truth for your application's code. The workspace you create is your own "local copy" of the code that is for your use only. The workspace can map to different branches of the app, and once you are done working on this copy you push the changes to the branch in the git repo - so others can access them.

The life cycle of your application also changes - no longer will you be using the stage and publish menu - you'll be using the VB Studio build jobs to package and deploy your app. As you can see in the video the deployment pipeline is created for you automatically when you import your app - but feel free to adjust it, or add additional deployment pipelines or steps.

Now that your code is in Visual Builder Studio you can start leveraging the advanced Git support, as well as the integration with the issue tracking system and agile project management feature of VB Studio.

P.S. - If your application uses Business Objects - you'll also want to automate the lifecycle of the BO data as shown in this blog.

 

Visual Builder can work with any REST service as a source of data, but it provides additional built-in features for services exposed by Oracle Cloud Application (Oracle SaaS). Visual Builder is familiar with the specific syntax those services use for advance functionality such as query by example, sorting, pagination, drilling into related items and other capabilities they support. However some VB developers might miss these capabilities and treat Oracle SaaS services like any "regular" service. In this blog I show how to take advantage of the special capabilities by using the "Define by Specification" option in Visual Builder.

Most of the services exposed from Oracle Cloud Applications are built on top of the Oracle ADF framework, and leverage the built-in features that this framework offers. One of those features is a detailed set of meta-data about each object. To get to the metadata you simply add "/describe" to the end of the URL for the object you want to access. This is explained in the "Access Metadata" part of the Oracle SaaS documentation around REST service.

In Visual Builder when you are adding a service, you have the option to define a service based on specification, using either the OpenAPI/Swagger spec or using the ADF Describe spec. So when you are working with Oracle Cloud Applications services, you should take advantage of this capability. In addition to allowing you to define multiple operations/endpoints on the object in a single step, you'll get declarative ability to specify things like filtering, sorting, and paginations/limits parameters - saving you from the need to specify transform options.

An additional note, if you are building an app that access Oracle Cloud Applications, you should setup the application's services connection to point to your Oracle SaaS instance, and then you'll be able to choose objects directly from the catalog, as shown in the first minute of the demo video.

For seamless experience, don't forget to also setup single-sign-on between VB and SaaS, and configure your SaaS for CORS situations.

 

 

In some cases you will want to access Oracle Visual Builder application through an interface built with another product/service. For example, embed the VB app in a portal or another app. Embedding Visual Builder UI in an Oracle Cloud Application (Oracle's SaaS) page is another example of this use case. In this blog we'll show how to achieve this.

Adapting the Visual Builder App

There are three things you'll likely want to setup in your Visual Builder app when you know it is going to be embedded.

The first one is a must do - in the web app settings->security section you should allow your application to be embedded in other servers. If not set, when a site will try to embed the URL of your app it will be denied and in the console you'll see a message similar to "Refused to display 'URL' in a frame because it set 'X-Frame-Options'". By default VB apps are not allowing other sites to embed them because of security concerns, so you need to specifically set this entry. (Note that you must re-publish your app after you change this setting).

The other thing you likely want to do is remove any surrounding chrome around the core content of your app. These parts are usually defined in the shell page which acts as the template for your page. Simply go and edit the HTML removing things that are not needed in the embedded version.

A third thing you can do is set variables in your app to accept input through the URL. This will allow the surroudning app to pass information to your VB app in an easy way. Simply mark a VB variable as "Input Parameter" and check the "pass on URL" box.

Configuring The Oracle Cloud Apps Side

For integration into Oracle Cloud Applications, you can use the ability to customize pages in the app using the Page Composer functionality. In the video you can see that I work in a sandbox - which you should create if you are doing any changes to the app. Make sure your sandbox enables the page composer functionality.

When you are in a page you want to customize you can click to edit the page choose the area where you want to include the Visual Builder UI (a bit of understanding of ADF layout components helps to figure out where to add your section). Then you simply add a component of Web Page type (which is adding an iframe into your page). Then you can configure the URL that would be invoked.

One nice thing you can do is add parameters that you pass to your VB app whose values come from other items on the page. In the video we are passing a parameter to a VB app on the URL - and then use that value to filter which records are fetched, and as a default value on the "create" page.

In the video above I show embedding the VB app in SaaS, but in some cases you might actually open the VB app in a separate tab/window. To do that you use the page composer to add a hyperlink to your Cloud Apps page. Then you use the URL of the live VB app in the same way as the destination of this link. In the Target Frame attribute of the link you'll probably want to use _blank.

One part that is not covered in this blog, and that you'll likely want to configure when embedding VB apps in Oracle Fusion Apps, is setup of single-sign-on between VB and SaaS. There is a solution doc that explains how to setup federated identity between Oracle SaaS and PaaS here. Another good resource is the blog entry from Aparna that cover setup of identity propagation between Visual Builder and Oracle Cloud Applications. 

 

A while back I posted a blog/video showing how to access Oracle ATP DB through ORDS from Visual Builder. One update that happened since then on both the ORDS side and the Visual Builder part is support of OpenAPI/Swagger standard. This accelerates and simplifies adding ORDS based REST services to a VB app and creating apps leveraging them. 

ORDS is a simple solution for anyone looking to build Visual Builder based apps on top of existing tables in an Oracle DB. ORDS provides a very simple way to expose a set of REST services on top of tables (and other DB objects). Once the services are created you can add them to Visual Builder and consume the data they expose.

While in the previous blog I showed how to add specific endpoints, with the support for OpenAPI on both sides, you can use the "Define by Specification" approach to create many endpoints in one simple action in VB (and have the correct mappings to the specific actions and data types). 

To get to the ORDS OpenAPI meta-data, add open-api-catalog to the URL for your object so the URL will be something like:

https://servername/ords/schema/open-api-catalog/tablename/

Check out the demo below to see the end to end flow:

One more thing to remember, ORDS uses a specific format of REST requests to provides capabilities such as filtering, sorting, and paginating through data. If you want Visual Builder to leverage these features, you'll need to add a transform option that specify how to do this. You can find an example of such code for ORDS in the previous blog.

Last year I wrote a blog post showing how to switch REST backend as part of the CI/CD of your Visual Builder application. Since then we released both an update to Visual Builder - which included the new servers, backends, and profiles features - as well as the new Visual Builder Studio - which provides a declarative way to define CI/CD automation for VB apps. So, I thought it would be a good idea to show how you combine the two to automate deployment that uses the specific backend you need.

The key to the simplification of the process is the use of Application Profiles - a feature that we introduced in our March 2020 release. App profiles work together with the concepts of services and backends to define a "pluggable" set of servers your app connects to. You can define multiple profiles for an app, and in each one contains a different set of servers that will be used by the application. The server definition can dynamically control not just the server end point, but also aspects like the authentication the services need, the headers, and even the way you reach them (direct or through our proxy). More about these features in these two blogs by Aparna part1, part2. 

In the video below I start by creating a new server connection that has the same REST endpoint but on a different server with a different authentication schema.

Then I define a new application profile, that will be using the new server definition to access data.

Next we are switching to Visual Builder Studio - where we leverage the new Oracle Deployment build step to define a CI/CD pipeline that deploys our app. I have one deploy job that uses one profile (dev), and then I run another deploy job that deploy using the alternative app profile (qa).

As you'll see while the application behaves the same in both cases the data is different in each deployment since they are coming from different sources.

It's important to mention that VBS is just providing your with an easy to use declarative interface to define deployment (and packaging) for VB apps. If you need to do the work from outside VBS, you can use the VB grunt commands that do app packaging and deployment. These grunt commands now have a new "profile" parameter used to indicate which profile to use.

With this approach you can have the same code base (which is stored in your Git repo) deploy to different location with different backends. All in an automated way.

 

Back in 2017 I wrote a blog entry with a demo video showing how to manage the development lifecycle of database objects in a database with Liquibase and Oracle Developer Cloud Service. That post, which also acted as a brief intro to Liquibase concepts, has been quite popular, and it's time for an update that will reflect a couple of new features Oracle added that makes life even simpler.

Liquibase as Part of SQLcl

Oracle has been investing resources at building better support for the Oracle database into Liquibase, contributing enhancements back to the community. In parallel, support for Liquibase commands has been added to the SQLcl utility - detailed doc here. These new features allow you to issue direct Liquibase commands as part of your work with an Oracle database. These changes further contributed to the adoption of Liquibase as a framework for managing database objects lifecycle across instances of Oracle DBs.

Visual Builder Studio

Another change is that Oracle transitioned Developer Cloud Service to a new name - Oracle Visual Builder Studio - adding many new features to the service. One update is the inclusion of the latest version of SQLcl utility in the list of software you can configure for build machines. Which makes it easier to incorporate Liquibase commands into your CI/CD pipelines (no need to leverage maven or include the jar files in your build process). You can simply write the Liquibase commands as part of the SQLcl script you are running in your build.

Let's see how these two enhancement make the lifecycle simpler

Lifecycle Demo

The video below aims to show a simple approach to replicating structure of database schemas across multiple databases in a consistent and automated way. 

In the video below I show the following flow:

• Start with a new project in Visual Builder Studio that includes a git repo
• Clone the git into your local machine
• Use SQLcl on your machine to create a controller file with the lb gencontrolfile command
• Use the command "lb genobject table" to generate object definition file for a table in your local DB
• Add a reference to that file to your controller.xml file
• Push the changes into the git repository in Visual Builder Studio
• Define a build job that is hooked to your Git repo, connects to a DB, and update that DB schema with the objects definitions from our git repo
• Execute the job

Then we go through a change management flow:

• Create a new table in your local DB
• Generate a Liquibase definition file for the new table
• Modify the controller.xml file to include a pointer to the new file
• Push the additions and changes into the Git repo
• The change automatically starts a CI/CD pipeline that deploys the changes to another database instance - in this case an Oracle ATP database in the Oracle cloud. This is done with the lb update (and lb status) SQLcl commands.

With this type of flow it is easy to keep multiple database instances with the same structure of objects. Useful for synching your dev/test/prod environments in a consistent way.

Try It Out

As a quick reminder - any customer of Oracle Cloud can spin up an instance of Oracle Visual Builder Studio and get the free git repos (along with issue tracking, wiki, agile and sprint management features and more). You will only need to pay if you execute CI/CD pipeline for the time that the build compute instance is up and running.

Give it a go and see how we can help streamline your DB DevOps.

In this blog I'll show you how to use functions such as Sum, Avg and Count on the data you store in business objects in Visual Builder. While you don't have direct way to write a sql statement to get this data, the ability to create object functions gives you access to similar functionality.

Object functions leverage groovy to interact with the business objects. I covered an intro to this topic in the blog entry about service methods for BOs, and we have a reference book that explains how to work with business objects and groovy. If you'll look at this chapter in the book you'll find out that there are many methods you can invoke on a viewObject - which maps to a BO. These include the ability to perform CRUD operations, add where and sort clauses to queries, and also to use group functions.

In the video demo below I use the following code in an object function:

def vo = newView('Employees'); println(vo.max('id')); return vo.avg("salary");

This simply returns the average of the salary field across all employees. The second line prints the maximum value in the id field across employees in the log of the business objects - print is a useful step when debugging your groovy code.

Once you have the function in place it is exposed as a POST type of REST operation on the business object. You can call it from action chains in Visual Builder - but remember to pass in a content-type of application/vnd.oracle.adf.action+json (or it will error with 415).

As a small added bonus, in the second part of the video (from about 5:00) I show how to add a reference line to a chart in your VB app, and base that line on the value we got from the function.

Keyboard shortcuts can speed up operation for end users while working in the forms you are creating, especially for common action while doing data entry. In this short blog I show you how to capture and react to a keyboard event in your page.

Each Visual Builder UI component exposes events for keyboard and mouse events, including for example keyPress event - which is invoked when you press a key in your keyboard. You can hook up an action chain to that event and react to that action.The next thing you'll want to know is which key was pressed - and you can use event parameters to get this info.

In the video below I show how to add a couple of parameters to the event and then assign values to them that will get you access to the key pressed (and the modifier keys such as ctrl and alt). Once you have that info you can condition your action based on the key pressed. 

In the video I'm using a ctrl+N shortcut to add a row to an editable table - which also shows you how to use a dataProviderEvent to mutate the ADP populating the table to add an empty row (with a default value in a field).

In this blog and video I'll show how to display hierarchical data in a tree component in Oracle Visual Builder. Oracle JET has various ways to show these type of hierarchies, and I'm going to start from the most basic tree component. While showing how to do this, we'll also cover a few other tips/techniques in Visual Builder. Here are some to the tips you'll learn along the way:

Getting Master and Details in a Single REST Call

In a tree situation, you might want to fetch both the parent and child records in one go. When working with the Visual Builder business components, such relationships are usually implemented with two separate objects with a reference field between them. To enable the master to fetch the details as part of the query, you'll need to enable the accessor access on the relationship between the two. (See 1:10 in the videos). You will also need to specify the expand option in the REST call to have the actual data fetched. (See 5:20 in the video).

Adding "Missing" JET Components

While some JET components don't show up in the component palette, you do have access to them in the code editor (7:10 in the video). If you add them through the code editor code insight, we'll automatically add the needed definition code to the json file for the page.

Working with Unique Variable Types 

Once you have the array of data, you'll need to transform it to the type of variable that the tree UI component expacts - an ArrayTreeDataProvider in our case. However this type doesn't actually exist as a built-in type in VB. So the video shows you at 8:40 how to create a JS function that returns the needed type and assign it to an Any type variable.

One thing that got cut from the video is adding missing dataTypes in the JS code by including them in the require part of the JS file. You add those at the top of the JS code: define(['ojs/ojarraytreedataprovider'], function(ArrayTreeDataProvider) 

Note that because our array of data might have shared ids between records in the master and records in the details - we need to specify keyAttributesScope : 'siblings' the to the constructor. And because our children don't come under a "children" attribute in the array we also specify the childrenAttribute property to the constructor.

The complete JavaScript Code is:

define(['ojs/ojarraytreedataprovider'], function(ArrayTreeDataProvider) {   'use strict';   var PageModule = function PageModule() {};   PageModule.prototype.buildTree = function (myarray){     return new ArrayTreeDataProvider(myarray, { keyAttributes: 'id' , keyAttributesScope : 'siblings' , childrenAttribute : 'employeesCollection.items'});   }   return PageModule; }); Passing Values to Action Chain

The last part of the video shows how to switch the display item to be a link, and assign an action chain to a click event on it. It then shows you how you can specify which information is passed to this action chain - for example the name of an employee - which you can then use in the action chain for further processing. While in the video I replace the detail parameter to the event, you can instead add a new parameter that is passed to the action and assign value to that one.

 

Here is the complete process:

In a previous post I showed how to create editable tables in Visual Builder. This entry will cover two additional behaviors you might want to add to your tables - sending only changed records to the backend, and adding a single click option to edit a row.

Update Only Changed Rows

In the video I published on creating an editable table, I looped over every record in the table sending each to the backend to be saved. A better approach would be to only send changed records to the backend. In the video below I start from the previous app and add an array that will save the id of records that have changed.

Then we'll modify the "Save" action chain. For each row from the ADP that populates the table, I'll check whether the id of that row is in the list of changed rows. Only if it is included in that array we'll continue with sending an update event to the backend.

The bit of JavaScript I use for finding if the id value exist in the array is:

PageModule.prototype.findInArray = function(value,myarray){     return myarray.find(record => record.id === value);   }

One extra step to add is a reset the changedRows array to be empty after you finished the loop. This way you'll be ready for the next set of changes in the table. Note that in the video this assignment actually resulted in the wrong format - it should look like this:

Another possible improvement is to construct a batch REST call that will have multiple transactions submitted as one. More on using batch operations with Visual Builder business objects here.

One Click Edit

With the approach I showed in the previous video, the end user needs to double click to get the record into edit mode. Some customers asked if there is a way to do it with a single click instead, or to give better indication that rows are updateable. In the second part of the video I show how you can add an edit icon (or button or link) - that when clicked will turn the row into editable mode. This is done by setting the edit-row property of the table.

Here are both steps in a short video:

 

 

Storing data in ArrayDataProviders (rather than SDP) is useful whenever you want to further modify the data on the client side - for example if you are looking to create updatable tables in your UI. A common follow up question is "how can I do additional processing/updates on all the records I'm storing in the ADP" - this is what this blog is about.

Since the records are now stored on the client side, you can access them through JavaScript. You can, for example, write a page level module function to loop over the set of records and modify them. For example in the video below I'm using this little function to raise the salary of all the employees:

  PageModule.prototype.arrayModifier = function(array){     console.log(array.length + " is what we got")       for (var i = 0; i < array.length  ; i++ ) {         array[i].salary = array[i].salary+2;         console.log("salary after " + array[i].salary);     }     return array;   }

Into this function you'll pass the array of data from the ArrayDataProvider - you can do this in the parameter mapping of the function pointing to the data object like this:

Once your function finished its processing of the data, you'll want to update the ArrayDataProvider back to reflect the changes you did. To do this you can use the action called "Fire Data Provider Event". This function has the option to do mutate events (update, insert, delete). You can read the doc about this and other actions parameters here. For the update you simply need to provide the array of updated data like this:

That's it. You can see all the pieces of this process working together in the video below:

 

In a previous blog post I showed the basics of working with the REST interfaces to manipulate data in business objects in Visual Builder. There is one more technique that I wanted to cover, and that is for executing multiple operations on multiple records and objects with a single REST call - what we refer to as batch operation. See the "Making Batch Requests" section in our doc.

Using this approach can of course improve the performance of your application when you need to manipulate multiple records. For example, if you worked with an editable table and then wanted to save all the changed records with a single REST call - you could construct the required json structure and execute all the updates at once. The important things to watch for are the required Content-Type header application/vnd.oracle.adf.batch+json , the use of a POST operation, and the fact that you access the root URL for your service. Then of course keep an eye on constructing the JSON payload correctly.

See the demo below for an example of performing various CRUD operations in one go.

The Oracle JET table component allows you to select multiple records in one go using the regular ctrl & shift key combinations. But once the user selected rows, how do you know which rows were selected? How do you track this?

The video below shows you the basics. As the JET tag documentation will show you, the table has a selection property which is an array of the selected records. This selections array is passed to the selection event on the table that you can hook to in with an action chain in VBCS. The array has a row for each range of records you selected listing their keys and indexes in the table.

It's up to you to parse this information if you want to operate on these rows.

The code in the JavaScript method is:

 

  PageModule.prototype.listSelection = function(selection) {     console.log("we got " + selection.length + " selections")     for (var i = 0; i < selection.length; i++) {       console.log("start key " + selection[i].startKey.row +         ", start index " + +selection[i].startIndex.row);       console.log("end key " + selection[i].endKey.row + ", end index " +         +selection[i].endIndex.row);     }   }