A common use case when working with data is to try and filter it.

For example if you have a set of records shown in a table in the UI the user might want to filter those to show specific rows.

In the video below I show you the basic way to achieve this using the filterCriterion of ServiceDataProvider variables - the type of variable that populates tables and lists.

Basically each SDP has an attribute called filterCriterion that accepts a structure that can contain arrays of conditions. You can then map a criteria that leverage for example a page level variable connected to a field.

In the criteria you'll specify

• an attribute - this will be the column id (not title) of your business object
• a value - this is the value you are filtering based on - usually a pointer to a variable in your page
• An operator (op) - the filterCriterion is using operators like $eq or $ne - these are based on the Oracle JET AttributeFilterOperator - a full list of the operators is here.

In the video I end up with a filterCriterion that is:

Since you can have multiple criteria you can also specify an operator on them - either an or ($or) or an and ($and) - these are CompoudOperators from Oracle JET.

By the way, this will work automatically for your Business Objects, however if you want to apply this to data from a random REST service - then that service will need to have filtering transformation defined for it.

A common requirement in applications is to have dependent lists (also known as cascading lists) - meaning have the value selected in one place influence the values that could be select in another place. For example when you select a state, we'll only show you cities in that state in the city list.

In the short demo video below, I'm showing you how to implement this cascading lists solution with the new Visual Builder Cloud Service.

The solution is quite simple

You catch the event of a value change in the first list, and in the action chain that is invoked you set a filterCriterion on the second list. (See this entry for a quick introduction to filterCriterion).

Since the list is connected to a ServiceDataProvider, there is no further action you need to take - the change to the SDP will be reflected in the UI component automatically.

Quick tips - make sure you reference the id of the column and that your operators are properly defined and enclosed in double quotes.

This is a quick demo that combines two techniques I showed in previous blogs - filtering lists, and accessing the value of a  selected row in a table. Leveraging these two together it's quite easy to crate a page that has two tables on it - one is the parent and the other is the child, once you select a record in the parent the child table will update to see only the related child records.

Here is a quick demo:

The two steps we are doing are:

• Create an action flow on the change of first-selected-row attribute of the table
• In the flow use the assign variable function to set the filterCriterion of the child table to check for the value selected in the master

As you can see - quite simple.

While working on some customers' applications, I ran into a few performance and functionality tips related to list of values in Visual Builder Cloud Service (VBCS). While it is very tempting to use the built in quick start that binds a list to results from a service, in some cases you might want to take a different approach.

One reason is performance - some lists don't change very often - and it makes more sense to fetch them only once instead of at every entry into a page. VBCS offers additional scopes for variables - and in the demo below I show how to use an application scope to only fetch a list of countries once (starting at 1:15). I also show how to define an array that will store the values of the list in a way that will allow you to access them from other locations in your app, and not just the specific UI component.

The other scenario that the demo shows relates to situations where you need to get additional information on the record you selected in the list. For example, your list might have the code and label but might contain additional meaningful fields. What if you need access to those values for the selected record?

In the demo below (6:40), I use a little JavaSciprt utility method that I add to the page to get the full details of the selected record from the list. The code used is (replace the two bold names with the id field and the value you want to return):

In the past, any array used for an LOV had to have "label" and "code" fields, but Oracle JET now allows you to set other fields to act in those roles this is shown at 5:54 using the options-keys property of the list component - a combobox in my case.

Check it out:

In Visual Builder Cloud Service (VBCS) it is very easy to create a CRUD application where one page shows you a list of records, and then clicking on one of them you are directed to another page where you edit the record. But what if instead you want to edit the record on the same page - or in a popup window when you click the record in the table?

This is what this blog is all about - the results looks like this:

The video combines several techniques and tips, some of which I covered in details in other blog entires. Since the video is a bit on the long side (14 min) - here is a break down of what it shows and a way for you to skip to the parts that interest you:

• Reflecting selected table record in separate fields on the page (0:48)
• Hooking up a POST REST save endpoint to a button (3:35)
• Refreshing a data provider/table from an external event (4:45)
• Adding the missing dialog JET component to a page (5:48)
• Adding page level JavaScript methods and hook it to UI components (8:36)
• Adding an edit hyperlink to a table (12:50)

In recent releases Developer Cloud Service (DevCS) has expanded to allow you to manage the full life cycle of Infrastructure in addition to software. One area where we made things simpler is in the management of CI/CD for Docker containers.

In this blog entry I'll take you through the basics of setting up a CI/CD chain that publishes Docker containers into the Oracle Cloud Infrastructure Registry (OCIR) - Oracle's cloud hosted docker registry. If you need a little tutorial on getting started with OCIR and docker using command lines - you can use this one.

Here is a demo video showing you how to leverage DevCS to automate the publishing process of Docker images and hook it into the Git repository in DevCS:

A few notes to help you replicate the steps I take in the video:

You will need to configure a DevCS build server that will have the docker software on it to run your builds. You do this from the "organization" menu under your user name (or get your org admin to do this for you). If you need tips, Abhinav shows you how to do it in this blog entry.

In order to work with OCIR from DevCS you'll need to have an Oracle Compute user created and have an auth token generated for it - make sure you have this token available for you as you'll need it when working from DevCS. (Note that this is separate from the password the user uses to login into the Oracle compute dashboard).

Now that you have a user, it's time to start your DevCS work. The first thing you might want to do is upload the code for a docker image into your DevCS git repository. In the video below you'll see that I'm using a very simple application and that my docker file is part of the 3 files I upload into the git repository in DevCS. (need some sample code pick up this docker getting started tutorial).

Once your code is in DevCS - the next step is to create a build jobs that pushes your code into the OCI Registry. Our job has three steps that leverage the following docker commands:

• Login - you'll need to use your tenantName/user as the username and the auth token as the password. Your registry URL will depend on the center you are in iad - Ashburn, phx -Phoenix etc. In my case it was iad.ocir.io.
• Build - you'll want to specify a complete image name again using your tenant/user/imageName. Also make sure to indicate where your docker file is (or provide a docker file in that step).
• Push - here everything should already be filled out for you and ready to go.

Here is how the completed job looks like:

Now run your build - and it will build your image and if it succeed it will push it to the registry. Monitor the build's log in case you run into errors.

You can hook up the docker registry section of DevCS to point to the OCIR registry - and then you'll be able to see all the images you pushed there. Again provide your tenant/user and auth token as the login info to the repository.

Have fun automating your docker publishing on the Oracle Cloud!

The business objects that you create in Visual Builder Cloud Service (VBCS) are quite powerful. Not only can they store data, manage relationships, and give you a rich REST interface for interacting with them, they can also execute dedicated business logic that deals with the data.

If you click on the Business Rules section of a business object you'll see that you can create:

• Triggers - allow you to react to data events such as insert, update, and delete on records.
• Object and field Validators - allowing you to make sure that data at the field or record level is correct.
• Object Functions - A way to define "service methods" that encapsulate logic related to a business object. These functions can be invoked from various points in your application, and also from outside your app.

To code logic in any of these location you will leverage the Groovy language.

I wanted to show the power of some of the functionality you can achieve with these hook points for logic. The demo scenario below is based on a requirement we got from a customer to be able to send an email with the details of all the children records that belong to a specific master record. Imagine a scenario where we have travel requests associated with specific airlines. When we go to delete an airline we want to send an email that will notify someoe about the travel requests that are going to be impacted by this change.

To achieve this I used an accessor - an object that helps you traverse relationships between the two objects - to loop over the records and collect them.

In the video below you'll see a couple of important points:

• Business object relationship and how to locate the name of an accessor
• Using a Trigger Event to send an email
• Passing an object function as a parameter to an email template
• Coding groovy in a business object

For those interested the specific Groovy code I used is:

By the way - if, like me, you come from a background of using Oracle ADF Business Components you might find many of the things we did here quite familiar. That's because we are leveraging Oracle ADF Business Components in this layer of Visual Builder Cloud Service. So looking up old Groovy tutorial and blogs about ADF BC might prove to be useful here too :-)

One of the strong features of Visual Builder Cloud Service is the ability to consume any REST service very easily. I have a video that shows you how to work with REST services in a completely declarative way, but that video doesn't show you what happens behind the scenes when you work with the quick starts. In addition, that video shows using the GET methods and several threads on our community's discussion forum asked for help working with other operations of REST.

The demo video aims to give you a better insight into working with REST operations showing how to:

• Add service endpoints for various REST operations
• Create a GET form manually for retrieving single records
• Create a POST form manually
  • Create type for the request and response parameters
  • Create variables based on the types
  • Call the POST operation passing a variable as body
• Get the returned values from the POST to show in a page or notifications

A couple of notes:

In the video I use the free REST testing platform at https://jsonplaceholder.typicode.com

While I do everything here manually - you should be able to use the quick starts for creating a "create" form and map them to the post operation - as long as you marked the specific entry as a "create" entry like I did in the demo.

If the concepts above such as types, variables, action chains are new to you - I would highly recommend watching this video on the VBCS Architecture and Building Blocks, it will help you better understand what VBCS is all about.

Off Canvas layout is a common UI pattern for modern applications, especially on mobile devices. The concept is aimed at saving space on your page, allowing you to pop out a "drawer" of additional information. This helps reduce clatter on the main page but still provide access to important data when needed without leaving the page context. You can see an example of the runtime behavior at the top of this post. 

Oracle JET provides this type of "off-canvas" behavior as a built in component, and they have a demo of it working as part of the cookbook here.

In the video below I show you how to add this to a Visual Builder application. As always - you can mostly just copy and paste code from the JET cookbook, but you need to handle some of the importing of resources a little different, and use the Visual Builder approach for adding your JavaScript function.

The code used in the video is:

Page source:

Menu

List

chart

Gifts

JavaScript Function in the page:

and in your page Json file add this import:

Snippets are a feature of Oracle Developer Cloud Service that gives you a place to store reusable pieces of code as part of your project. These are the type of code snippets that you don't want as part of your core Git repository, but that you still find useful. Snippets can be your own private ones or shared among your team.

One nice usage for code snippets is the ability to quickly include them in a wiki page. This allows you, for example, to create a template of a wiki page and then quickly apply it to a new page that you creates. Using the correct markup for your wiki page format (confluence in the example in the video), you can create a collection of templates. For example, a template for a feature page, a template for a meeting minutes page, etc.. then your team members can quickly create pages that conforms to these templates.

In the video below I show you how to leverage this combination step by step.

At Oracle OpenWorld this year I did a session about the future of Oracle ADF, and one of the demos I did there was showing the powerful combination of Oracle ADF backend with a new Oracle JET UI layer and how Oracle Visual Builder makes this integration very simple.

While we have many happy Oracle ADF customers, we do hear from some of them about new UI requirements that might justify thinking about adopting a new UI architecture for some modules. These type of requirements align with an industry trend towards adopting a more client centric UI architecture that leverages the power of JavaScript on the client. While ADF (which is more of a server centric architecture) does let you leverage JavaScript on the client and provides hook points for that in ADF Faces, some customers prefer a more "puristic" approach for new user interfaces that they are planning to build. Oracle's solution for such a UI architecture is based on Oracle JET - an open source set of libraries we developed and share with the community at http://oraclejet.org.

Oracle Visual Builder provides developers with a simpler approach to building Oracle JET based UIs - for both web and on-device mobile applications. Focusing on a visual UI design approach it drastically reduce the amount of manual coding you need to do to create JET based UIs. 

UIs that you build in Visual Builder connect at the back to REST services, and this is where you can leverage Oracle ADF. In version 12 of JDeveloper we introduced the ability to publish ADF Business Components as REST services through a simple wizard. Note that out-of-the-box you get a very powerful set of services that support things like query by example, pagination, sorting and more. If you haven't explored this functionality already, check out the videos showing how to do it here, and this video covering cloud hosting these services.

Once you have this ADF based REST services layer - you'll be glad to hear that in Visual Builder we have specific support to simplify consuming these REST services. Specifically - we understand the meta-data descriptions that these REST services provide and then are able to create services and endpoints mapping for you.

You leverage our "Service from specification" dialog to add your ADF services to your Visual Builder app - and from that point on, it's quite simple to build new JET UIs accessing the data.

In the video below I show how simple it is to build a JET-based on-device mobile app that leverage a set of REST services that were created from Oracle JDeveloper 12. Check it out:

I posted in the past a basic introduction to filtering lists in Visual Builder - showing how to use the filterCriterion to filter the records shown in a ServiceDataProvider. Since I recorded this video, a few things changed, and I also saw several customers asking how can they use more complex conditions that involve more than one filter.

In the video below I show how to define a basic filter with the latest versions (note that in VB 18.4.1 you no longer need to surround value with quotes ""), and then I show how to create a more complex condition that involves two filter criteria and set them to work with either an or or an and operator.

When you are using business components in Visual Builder, the filterCriterion is translated into a "q" parameter that is passed to the GET method (more about this q query parameter here). If you find that you are not getting the records you are expecting, check out the browser's Network tab to see what query parameter was passed in your call to the REST service (intro to this debugging technique here).

As you'll see the filterCriterion contains an array of "criteria" so you can specify several of them. In the video I'm using an approach that Brian Fry showed me that gives you a more declarative way to populate the array dragging and dropping multiple "criteria type" variables into the same array.

Note however that the important thing is what is actually being populated in the json file that defines the action. You should go into this view and verify that you have the right structure there. You can also directly manipulate that source to achieve the filter you need.

As you'll see in the video there are some cases where the design time for this filterCriterion adds an entry into the JSON that might not match what you want (we are tracking this issue). So as mentioned - if things don't work as expected direct manipulation of the JSON might be required. 

This is a quick blog to show two techniques for adding calculated fields to an Oracle Visual Builder application.

Both techniques do the calculation on the client side (in the browser). Keep in mind that you might want to consider doing the calculation on the back-end of your application and get the calculated value delivered directly to your client - in some cases this results in better performance. But sometimes you don't have access to modify the backend, or you can't do calculations there, so here we go:

1. For simple calculation you can just use the value property of a field to do the calculation for you.

For example if you need to know the yearly salary you can take the value in a field and just add *12 to it.

You can also use this to calculate values from multiple fields for example [[$current.data.firstName + " " +$current.data.lastName]] - will get you a field with the full name.

2. For more complex calculation you might need to write some logic to arrive at your calculated value, for example if you have multiple if/then conditions. To do that you can create a client side JavaScript function in your page's JS section. Then you refer to the function from your UI component's value attribute using something like {{$functions.myFunc($current.data.salary)}}

As you'll see in the demo, if you switch to the code view of your application the code editor in Oracle VB will give you code insight into the functions you have for your page, helping you eliminate coding errors.

The latest and greatest flavor of the Oracle Database in the cloud is Oracle Autonomous Transaction Processing (ATP). One of the Autonomous DB flavors that, it is optimized for OLTP (On-Line Transaction Processing) Applications - the type that you and I usually work on.

One new feature in the world of ATP is the way that you connect to the DB, connection is done leveraging wallets to make sure that your data is secured even though you are connecting over public internet. Here are instructions on how to get such a wallet file for your instance of ATP.

We introduced an enhancement to the latest version of Developer Cloud Service that allows you to connect to ATP from your CI/CD automation jobs. This can help you automate CI/CD for SQL scripts that you need to run against that DB.

As I mentioned in past blogs, DevCS has built in support for the SQLcl utility, allowing you to run SQL scripts against an Oracle database as part of your CI/CD chain. If you want to connect the SQLcl utility in DevCS to ATP, it will need to have access to your wallet.zip file. You can achieve this by uploading the file into your git repository.

Then in your SQLcl configuration you'll specify the user/pass like before, and then point the field titled Credentials File to the wallet.zip file location. (in the screenshot below, the zip file is at the top of the git repo connected to the build - so there is no need to add a path). In the next field, titled connection string, you specify the name used in the wallet's tnsnames.ora file to connect to the DB.

Now you can continue as usual and provide inline SQL or point to SQL files from your git repository.

End-users are strange. Sometime they need the system we are developing to remind them when they do silly things. For example some users want us to remind them if they are trying to navigate away from a page where they did changes to data, but didn't click "save". Below I'll show you an approach for implementing such a behavior in Oracle Visual Builder Cloud Service.

What we are going to do is cancel navigation actions until users acknowledge that they are ok to leave the page.

I will leave it up to you to decide when this should go into effect. While some people might claim that this should be the default behavior across the app, this is debatable. For example, if I go into a "create record" type of page, and then without doing any changes decide to leave that page - should I be prompted for a "you have unsaved changes" message? Isn't me leaving the page the equivalent of saying - I don't need to do changes? As you can see the decision is not clear cut - so in the demo below I let you control when we start this "changes were made" status simply by pressing a button. In real applications these can be done for example when a value in a field changes. At the end of the day, all you need to do is set a boolean variable that tracks whether we are now in "changes were made" status.

In the demo I added a simple dialog to the shell page (the page that acts as the containing template to the rest of the pages) - this dialog has a "you have unsaved changes, are you sure you want to leave?" type of warning and two buttons "Yes" and "No". (Quick tip/reminder - you can see how to add a dialog to a page here, and don't forget to include the popup import in the page's json file).

I add an action chain to the shell page that will be invoked on the vbBeforeExit event - in there I check the value of the "changes made" variable and if changes were made - I show the dialog. Then I use a return action to return an object type variable that has a boolean variable called "cancelled" set to true.  Returning such an object tells the flow to stop the navigation.

Now all I needed to add were action chains to the buttons for "yes" and "no" to close the dialog, and for the "yes" scenario to also set the changes made boolean variable to no - so the next time we click to navigate away we don't show the dialog.

Check out the video to see the runtime behavior and the various parts that make up the solution.

Back in 2015 I wrote a blog entry to help our customers get a clear picture about the Oracle ADF vs Oracle JET "debate", over the years I kept pointing people to this writeup as a simple summary of what we are aiming to do and as a guideline for picking the technology you should use. However, the technology world is an ever changing place, and I believe that it is time to do a bit of an update of that entry to reflect the current status.

While the basic distinctions between the two technologies have not changed, specifically: 

• ADF for Java developer, JET for JavaScript developer
• ADF is server side framework, JET is client side focused
• ADF is both front and back-end framework, JET is UI layer only

Some of the surrounding eco-system has changed and evolved.

Over the past several years we saw an increase in the adoption of UI development that is focused around JavaScript-based client layer. This is something you can see for example in the results from the Stackoverflow yearly survey - back in 2016 JavaScript was used by 54% of developers and in 2018 the number stood at ~70%. 

Today, most of the new projects that we see being developed will pick up a JavaScript based UI layer as their solution for front end development. The adoption of this JS/HTML UI is not limited to web apps, many mobile apps also leverage the architecture to create mobile optimized UIs deployed on devices using either a hybrid or a Progressive Web Application (PWA) architecture. Development organizations like the fact that a client-centric JavaScript/HTML architecture allows them to use a single set of skills to support multi-channel apps. 

Back in 2015 many of the Oracle PaaS services were already leveraging this architecture along with Oracle JET - Oracle's Toolkit for building JavaScript based UIs. Today this trend started to extend to Oracle SaaS - Oracle's cloud apps offering. Several of the modules in Oracle SaaS have introduced UIs built with Oracle JET - leveraging its capabilities to create engaging and dynamic user interfaces. In the coming years you are going to see more and more modules offering new UIs based on Orale JET. This is a transition for Oracle's SaaS org from server-side generation UI to a client centric architecture. 

In parallel Oracle JET also added a bunch of capabilities targeting mobile specific scenarios including the ability to render the components to look like native controls on both iOS and Android, the ability to package apps as hybrid mobile apps, and support for offline usage patterns. All those capabilities are further pushing the usage of Oracle JET at Oracle as the UI layer for the various mobile apps we deliver.

One thing to keep in mind, since JET only provides the UI layer, there is still a need to build the backend of the application. This backend will handle data access and business logic - and it will then expose REST services that will be consumed by the JET UI. The existing backend layer for the Oracle SaaS apps was developed with Oracle ADF Business Components, and now they are able to leverage the investment they already did in that layer and expose these components through REST services. This way they get to keep the complex logic already implemented in that layer and just create a new modernized UI layer. 

If you track down the "what's new" document for the versions of ADF that we released since 2015 you'll see that enhancing the out-of-the-box functionality we provide around REST enablement has been a focus area for us. As a result of this effort, when you are exposing ADF BC as REST you get capabilities such as pagination, query by example, dynamic sorting, relationship management, and more built-into the services you expose.

This approach is something that ADF customers should consider if they decide to adopt the trend of new UIs being built with JavaScript based toolkit. Regardless of the UI framework that you'll choose, remember that the investment you made in the ADF backend can still be leveraged easily.

One of the other difference I quoted between ADF and JET was the development experience. ADF was focused on providing a more visual and declarative approach to Java developers, while JET had you use code editors to manually write your code.

This is another thing that changed since 2015. Oracle now offers a development platform for JET applications that is focused on a more visual way of building the app - this is Oracle Visual Builder Cloud Service. If you haven't seen a demo before - take 10 minutes and watch this video as an example. As you can see, Visual Builder provides a WYSIWYG UI design, action flow diagrams for business logic, page flow diagrams, property inspectors and more. All this while still allowing you to directly access the code when needed for direct manipulation. 

Image 1 - Visual Oracle JET Development in Oracle Visual Builder (Components, Structure Pane, Visual Layout Editor, Property Inspector)

With this environment you can become much more productive building UIs that leverage the power of Oracle JET. Note that Visual Builder is not just about simplifying the layout of your pages, it is also simplifying how you work with variables, binding and business logic - reducing the amount of coding you need to do.

Visual Builder also simplifies the learning curve for people who are new to JavaScript development - making the transition to this new technology smoother. Our SaaS teams have also decided to leverage VB to help them deliver new generations of UI faster.

For customers who already have ADF based applications, another appealing aspect of VB is its ability to understand the structure of ADF BC based REST services and the functionality they provide. Check out this demo to see how you can quickly use Visual Builder to build a JET based mobile app on top of ADF BC REST backend in a declarative way.

A little side note - beyond the ability of VB to create UIs, you can also use it to quickly create tables in a database and business objects (including business logic) on top of them that are exposed as REST services. The technology that drives that layer of VB is based on the same ADF Business Components - another thing that will be of course familiar to ADF developers if they decide to pick up Visual Builder.

So what should you do if you are an Oracle ADF customer today? As always the answer is "it depends" :-)

The first thing to think about is - "Does Oracle ADF answers my needs and does the application I built with it work as expected?" - assuming that the answer to both is positive, then you can continue as you were.

If, however, there are technical or architectural needs where your existing ADF app doesn't provide the answers you need (for example on the UI side or the mobile device support needs), looking at Oracle JET and Visual Builder is definitely something you should do. Also if you are about to embark on a new project, you might want to consider if a new client-centric architecture for the UI layer is something you can benefit from, and if you think it is - again try out JET and VB and see how you like them. In both cases remember that you can leverage your existing investments in the business objects layer and expose it as REST services to be consumed by new UIs. In fact you can have the two apps running in parallel.

Image 2- JET based architecture (MVVM) compared to ADF Architecture (MVC) - sharing business services

One more note, many developers like to keep their skills fresh and learn new things, if you are an Oracle ADF developer, I think that picking up Visual Builder and playing with it can get you on the road to learning new JavaScript skills quite quickly while still keeping you in a fun friendly visual cloud IDE - give it a try.

One nice thing about Visual Builder is that it helps you not only with the creation of the front end, but also with the creation of the backend for your app - through the use of the business objects feature. When you develop the UI in VB it is accessing the business objects through REST endpoints, and these REST endpoints can also be exposed so other UIs or systems can access the same data.

In the video below, I'm showing you how to access the business objects and perform the full set of CRUD operations against them.

There are many more capabilities to these REST APIs including advanced query options that help you optimize the amount of data you are getting back from them. Read about it in our documentation.

One more note - in the demo I use the Bearer Token security, but you can also switch to use basic authentication to access your services. To do this in your application settings, under the business object tab, you can check the check box for enabling this.

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: