X

Shay Shmeltzer's Oracle Development Tools Tips

Recent Posts

Visual Builder

Improving Perceived Performance for Visual Builder Pages

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.

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...

DevOps + Agile (VBS)

Automating Data Load into Visual Builder Business Objects

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.  

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...

DevOps + Agile (VBS)

Managing Business Objects Lifecycle with Visual Builder Studio

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:

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...

DevOps + Agile (VBS)

Moving Visual Builder Apps to Visual Builder Studio

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.  

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...

Visual Builder

Using Meta-Data For Oracle Cloud Applications Services in Visual Builder

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.    

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...

Visual Builder

Embedding Visual Builder Apps In Oracle Cloud Applications

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.   

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

Leverage ORDS with Visual Builder to Access Oracle DB - an OpenAPI Update

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.

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...

DevOps + Agile (VBS)

Leveraging Application Profiles to Switch Backend Servers with Visual Builder Studio

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.  

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...

DevOps + Agile (VBS)

Versioning Oracle Database Objects & CI/CD with Liquibase - An Update

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.

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,...

Visual Builder

Group Functions on Business Objects in Visual Builder

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.

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...

Visual Builder

Working with Hierarchical Trees in Oracle Visual Builder

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 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...

Visual Builder

Editable Table with Visual Builder - Additional Tips

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:    

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...

Visual Builder

Editable Tables in Visual Builder - The Oracle JET 8.1 Approach

Last year I wrote a blog about how to create editable tables based on version 6 of JET. That entry has been quite popular, but since the publishing of that blog things have changed in both Oracle JET and Oracle Visual Builder, and there is a new pattern we are now recommending for handling editable tables. The new pattern is offering better performance and eliminates some refresh issues that users encountered with the old approach. Below you can see a demo showing how to build an editable table in VB from scratch following the approach shown in the JET 8.1 cookbook sample. Note - In general our UI expert are not in favor of editable tables, especially if your users would end up using their application on a mobile device with touch gesture. A better UI pattern they would recommend is editing in a pop-up or in a form next to the table. Here is a blog about editing from a pop-up - which is also simpler to implement :-) . A few points about the solution: The table should only show input component for the row you are currently editing. This is mainly for performance reasons. Rendering multiple lines with input components in them is a heavy task for the browser, and using just one line for editing reduces the time and memory needed to accomplish page rendering. The table is based on an ArrayDataProvider - a variable that keeps an array of the records being edited on the client - allowing you to modify them over time (unlike ServiceDataProvider). Note that in the new March version of Visual Builder (19.4.3) we updated the ADP implementation so in the source you'll see this as "type": "vb/ArrayDataProvider2". The actual editing is done on an object that replicates the current row being edited - this way when you change values we don't need to refresh the full array on each field change. Once you are done with the editing of the row, we update the array of records modifying just the row that you changed. We leverage two events on the table to catch the beginning and end of the row editing process. The demo shows one approach to saving the data to the backend - sending a REST call to the backend to update each of the rows from the array. This of course is not the recommended approach - since you can be much more efficient sending just the rows that changes, and batching those transactions into a single REST request. I'm planning to have another blog entry showing this approach in the future [Update - the blog about this is here]. Another approach you could take is to send an updated row to the backend immediately as you leave the editing mode. This is assuming your use case is ok with this immediate commit without an additional operation by the user (such as clicking a save button). Here is the full process end to end: If you are looking to skip some parts then the flow is with time stamps so you can fast forward to the parts you need: Define an ADP and populate it with data (0:50-3:30) Define a table component and hook it up to the ADP (3:30-4:15) Switch the table to use column templates for read/write status (4:15-9:05) Create a row object and hook it up to the input components (9:05-10:00) Add methods for populating and reading from the row object (10:00-13:30) Add an event to loop over rows and save to the database (13:50-16:10) Set columns width to eliminate column flashing (16:10-end) Wait There is More... If you found this video useful, you should also look at these two follow ups that cover additional tips: Click to Edit, and Submit Only Changed Rows Dependent Lists in an Editable Table  

Last year I wrote a blog about how to create editable tables based on version 6 of JET. That entry has been quite popular, but since the publishing of that blog things have changed in both Oracle JET...

Visual Builder

Showing Parent/Child in a Single Table in Visual Builder

Parent Child (or master detail) relationships are a very common structure of data, and sometimes people want to show this information in a single table - where for each row of the parent we also show the details of the children. (In SQL you get this type of presentation using a "group by" clause). Something that looks like this: In the video below I show the basic steps to help you achieve this. The first thing you'll want to have is a REST endpoint that returns this "Tree" structure where we include the children in each parent. If you are working with business objects in Visual Builder, you'll need to enable the accessor on the relationship between the master and the detail (0:05 in the vide). Keep track of that accessor name, as you'll use it later in your code in a couple of places. Once you do this, you can pass this accessor name as the "expand" parameter to your REST call and the proper data structure can be returned. Next - store it in an Array in your page. Now let's turn to creating the UI. In the demo I'm using a table, and in one of the columns I'm using a bind-for-each loop (line 8) to iterate over the children of the specific row and show them. Since there could be rows without children, we also need to condition showing this structure using a bind-if component - so we won't be trying to show an empty array (line 7). Both of these structures need to be inside the template defined for the column table (line 6). The end result is the following code for the page: <div class="oj-flex">   <oj-table scroll-policy="loadMoreOnScroll" id="oj-table--1049873659-1" class="oj-flex-item oj-sm-12 oj-md-12" data="[[ $variables.DeptArray ]]" columns='[{"headerText":"id","field":"id"},{"headerText":"department","field":"department","template":"department"},{"headerText":"Employees","field":"","template":"Employees"}]'>     <template slot="department">       <oj-bind-text value="[[$current.data]]"></oj-bind-text>     </template>     <template slot="Employees">       <oj-bind-if test="[[$current.row.employeesCollection.items]]">         <oj-bind-for-each data="[[$current.row.employeesCollection.items]]">           <template>             <oj-bind-text value="[[$current.data.name +' '+$current.data.salary]]"></oj-bind-text><br>           </template>         </oj-bind-for-each>       </oj-bind-if>     </template>   </oj-table> </div> Here is a quick video showing the process end-to-end: Quick tip - as the video shows - the browser's console is an important tool to help you find out the exact structure of the data in your variable and the proper names for attributes. Use it if something goes wrong.

Parent Child (or master detail) relationships are a very common structure of data, and sometimes people want to show this information in a single table - where for each row of the parent we also show...

Visual Builder

Edit Data In a Table in a Pop-Up Dialog - Revisited

I'm going to show you how to implement an editable table using pop-up dialog - a simple solution and design pattern that we use to provide a better editing experience for data. I've wrote a blog showing how to do this less than a year and half ago, but since then we introduced many enhancement to Visual Builder that further simplify the development experience. In fact, we cut the time it takes to implement this functionality by half (as you can see if you compare this video to the previous version). The concept is that you create a dialog in the page that shows the details of the record you are editing, then when you select a record in the table we show the details in the dialog, where you can update them and save the data. In the demo you'll see how to: Add an action link to a row in the table (0:33) Create a variable to host the current record (1:05) Assign the current record to the variable using the current.row parameter to the action chain (2:35) Add a dialog to your page and be able to visually edit it (3:30) Call component method to show and hide the dialog in an action chain (4:35) Check it out here: You can extend this functionality to add a similar dialog that adds a record to the table and calls the POST REST endpoint on the object.

I'm going to show you how to implement an editable table using pop-up dialog - a simple solution and design pattern that we use to provide a better editing experience for data. I've wrote a...

Visual Builder

Using Regular Expression Validators in Visual Builder

Oracle JET offers a set of validators that you can use to do client side validation on data the user is entering in a form. In this short blog I'll show you how to use it in a Visual Builder form. You can learn more about JET validators looking at the JET cookbook - for example here: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=validators&demo=regExpValidator Before you go too deep looking into the JET code samples, make sure you are using the correct cookbook for the JET version used in Visual Builder. Right now (Jan 2020) VB is using JET 7.1.1 (you can see this in the about box in Visual Builder). So you'll want to look at the parallel JET version of the cookbook, which you can find at: https://www.oracle.com/webfolder/technetwork/jet-710/jetCookbook.html (play with the version number in the URL to get to other versions such as 720). Now you can look at the JavaScript piece of code to see how a validator component is constructed. For example in the regular expression validator you'll see a piece of code that looks like this and returns a validator type object:           this.emailPatternValidator = ko.pureComputed(function () {             return [{               type: 'regExp',               options: {                 pattern: "[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*",                 hint: "enter a valid email format",                 messageDetail: "Not a valid email format"               }             }]; One way to use this type of validator in Visual Builder is to create a pageModule function in your page that will return the validator object. This can look like this (for a regex that validates we only got numbers for example):   PageModule.prototype.numValidator = function() {     return [{       type: 'regExp',       options: {         pattern: "[0-9]*",         hint: "enter a valid number",         messageDetail: "Not a valid number format"       }     }];   }; The last step is to reference the above function in the HTML code of you VB page. While you can enter the value in the property inspector (search for validator in the All tab), You can also switch to the code view and there you'll get code insight as you type the following in the HTML :   <oj-input-text validators="{{$page.functions.numValidator()}}"...> These are not the only type of client side validations you can do in Visual Builder - learn about others in this blog entry.

Oracle JET offers a set of validators that you can use to do client side validation on data the user is entering in a form. In this short blog I'll show you how to use it in a Visual Builder form. You...

Visual Builder

Filtering Data in Visual Builder Lists and Tables - Revisited

One of the first blog entries I did about the then new Visual Builder in May 2018 was about filtering data in a collection / table, which was followed by another entry about using compound conditions for filtering. Since then Visual Builder evolved with new releases, and filtering today is even simpler thanks to a new visual query builder. So here is a quick update for those looking at how to search and filter tables or lists whether they are based on ServiceDataProviders or ArrayDataProviders. The underlying technology/code for filtering is still the same - you define a filterCriterion made of several criteria -each specifying attribute, operand, and value combinations; but now you can do it with a little visual builder that looks like this: As you can see it also makes it quite easy to define complex, compound conditions. Also note that you can switch to see the code version of the filter you built. In the video below I show how to use this new builder to define search pages in your app. I also show how you can filter ArrayDataProviders - which unlike ServiceDataProvider don't expose the filterCriteria as a top level parameter but rather put it under the requestTransformOptions parameters (starting at minute 4:30). A couple other things shown in the video are: How to compare to null (using {{null}} , see 2:52 ) And how to make sure that when you assign values to an ADP it doesn't append the values to existing array but rather replaces them by setting the Reset Target property of the assign variable operation (see 5:49). And for reference - an explanation of the various operands ($co, $eq, etc) is in the JET doc here: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.AttributeFilter.html#op By the way, if you are trying to filter by date fields - note that they contain the date+time signature - so you would want to bind an input DateTime component - or use another way to get your filter value to be formatted similar to this -  '2019-12-31T00:00:00' By the way if you can't get the filter to work, check out the q parameter value created in the call to your REST service in the browser's network tab. To learn more about the q parameter and using it for filtering see this blog entry. Also - note that the filterCriterion concept works out of the box on REST end points for Visual Builder Business Objects and those created from ADF Describe specifications (such as Oracle SaaS end points). If you are using a "random" other REST service, you can either specify parameters for searching directly in your call as shown here, or write a transform function as shown here.  

One of the first blog entries I did about the then new Visual Builder in May 2018 was about filtering data in a collection / table, which was followed by another entry about using compound conditions...

Visual Builder

Converting Web App to a Mobile App with Visual Builder

Oracle Visual Builder provides a unified development platform that allows you to build both web applications - accessed from browsers - and mobile applications - installed on devices. The development environment however keeps the development of those two as separate things in Visual Builder. There are several reasons for this including among others the belief that designing a good mobile experience - small device and touch gesture - is different from designing an application that is used on a desktop with a mouse. That being said, the technology, framework, and app structure for both applications is basically the same. So, with a little hacking you can take an app that started as a web app and packages it as a mobile app. This is what the video below shows. While the core of the application is the same, there are several things we create in the wrapping artifacts of your mobile app that are different from your web app, for example your mobile app gives you a place to specify iOS and Android build configurations as well as PWA options. If you already have a web application in place, instead of manually adding all of these, it is easier to create the mobile app using Visual Builder, and then just copy the flows and pages over. In the video, I export the web app and then copy the flows and the contained pages over into the directories created for the mobile app. I can then import the modified app back into Visual Builder. As a short-cut you can create identical flow names in the mobile app menu to the one you used in the web menu. Next you'll see that you might need to add some meta-data to your mobile app - such as the pointer to the services.json files you are using for your web services or business objects data sources. Another thing you might want to adopt from the "true" mobile pages in your app are the page template tag and the hamburger menu which you can copy from existing pages over to the migrated pages - check out the HTML code of a mobile page to see them. Once you got everything looking the way you want it, you can package your app as a mobile app and run it on your device.    

Oracle Visual Builder provides a unified development platform that allows you to build both web applications - accessed from browsers - and mobile applications - installed on devices. The development...

DevOps + Agile (VBS)

Switching REST Services When Publishing a Visual Builder App

Most organizations use separate servers for development vs. production. While developing your Visual Builder application you'll be accessing REST Services from the development server, but when you are preparing to go production you will likely want to switch the app to use the production version of the services. In the demo below I show you how to automate such a switch using build jobs in Oracle Developer Cloud as part of your continuous delivery process.  (If you aren't already, you should first get familiar with how to integrate Visual Builder with the Git repository in developer cloud, and how to use Developer Cloud to automate the CI/CD of a VB app). The process is quite simple: We are hosting the code for our application in a private Git repository in Developer Cloud. The code for our application includes service.json files for each of the REST services we are consuming in our app.  We can use a build job to take the code from the Git repository and stage or publish our app on any Visual Builder server. If we want to switch the REST service that we are accessing when we stage & publish, then we need to inject one more step into our build job - this step will modify the service.json file we got from the Git repository and will replace the service connection in the file before we execute the grunt tasks to stage/publish on our production instance. In the demo below I use a linux sed command to do the switching. The basic command syntax is sed -i 'originalText+modifiedText+g' filename The filename above will refer to your service.json file. You can find the location of your service.json file by looking in the Git repository browser in Developer Cloud. It would be something like: services/shayService/service.json - where the bold part is the name you gave to your service when you defined it. If all you need to switch is just the server name a single sed command will do, but if you also need to switch other parts of the service URL you might need more than one sed command. Have a look at your service.json file and identify any part that needs switching. Check out the demo video to see this in action: In the demo I have a VB app that uses an ORDS service exposing data in an Oracle ATP database. I have another database (the production instance) which has the same table but in another schema. So my build job switches the pointer to the server, and also the name of the schema (two sed commands). I have two build jobs - one uses the code as is to stage my app on my "dev" instance of VB, the other takes the same app and stages it on another VB instance pointing to the production DB.    

Most organizations use separate servers for development vs. production. While developing your Visual Builder application you'll be accessing REST Services from the development server, but when you are...

ADF & JDeveloper

Searchable Client LOVs in Oracle ADF with af:inputSearch

The new version of Oracle ADF/JDeveloper 12.2.1.4 added a new UI component to ADF Faces called af:inputSearch. This component provides a new way to display and interact with list of values. One advantage it offers is that search for values in the list is done completely on the client - reducing network traffic between the client and the server. The component relies on a list of values it gets in a JSON format from a REST endpoint. You could use an ADF BC REST exposed list - or any other random REST service that returns an array. In the demo below I show you how to setup and use such a component in your application leveraging a REST service that lists information about countries. You can find more demos of the component in the latest version of the ADF Faces Components Demo (provided with the source code for the demo). There is also the documentation for the tags in our tag reference: af:inputSearch and af:searchSection. The HTML code use in my page is:   <panelFormLayout id="pfl1">     <inputSearch label="Label 1" popupTitle="Search and Result Dialog" id="is1" displayAttributes="FirstName LastName"                  filterAttributes="FirstName LastName" valueAttribute="FirstName" contentMode="table">         <searchSection id="ss1" dataUrl="http://127.0.0.1:7101/App2REST/rest/1/Emp?limit=120"/>     </inputSearch>     <facet name="footer"/>     <inputSearch label="Label 2" popupTitle="Search and Result Dialog" id="is2" filterAttributes="name capital region"                  displayAttributes="name" valueAttribute="alpha2Code" contentMode="table">         <searchSection id="ss3" dataUrl="https://restcountries.eu/rest/v2/all"/>         <facet name="contentStamp">             <sanitized>                 <div style="height: 68px; line-height: 18px; white-space: nowrap">                     <div style="padding: 0px; margin: 0px; width: 64px; display: inline-block;">                         <img src="{{flag}}" height="56" width="56"                              style="vertical-align: bottom; border: 2px; padding: 2px; border-radius: 10px;"/>                     </div>                     <div style="padding-left: 10px; display: inline-block;">                         <div style="color: #4646D0;font-size: medium;">{{name}}</div>                         <div style="color: #4F4F4F;">{{region}}</div>                         <div style="color: #4F4F4F; font-size: smaller;font-style: italic;">{{capital}}</div>                     </div>                 </div>             </sanitized>         </facet>     </inputSearch> </panelFormLayout>

The new version of Oracle ADF/JDeveloper 12.2.1.4 added a new UI component to ADF Faces called af:inputSearch. This component provides a new way to display and interact with list of values....

Visual Builder

Setting Up Security in Oracle Visual Builder with Groups, Roles, and Users

When you are creating an app with Oracle Visual Builder, there is a good chance you won't want everyone to be able to do and see everything in your app. Visual Builder provides the ability to define roles in your app, and limit operations on both the business object layer and the UI layer based on those roles. This is relying on the integration between Visual Builder and Oracle Identity Cloud.  In the short video below I show How to define groups in IDCS, and associate users to these groups. How to define roles in VB, and associate them to groups in IDCS. How to restrict operations and which data can be viewed in the business object layer How to hide UI elements based on roles John has a blog entry that covers much of these VB level setting, and also shows you how to restrict access to pages. A couple of comments: In the oj-bind-if setting I used an expression that access the first row in the array. Instead you can use an expression like - {{ $application.user.roles.Manager}} .  The security on the UI side is not enough, you should always make sure that your REST layer has authorization based on the user accessing the REST. This way even if someone hacks the UI restriction and is able to try and access a page or a UI component you didn't want them to see, they will still not be able to get the data or do the operation on the backend layer.  

When you are creating an app with Oracle Visual Builder, there is a good chance you won't want everyone to be able to do and see everything in your app. Visual Builder provides the ability to define...

Importing and Updating Apps Between Visual Builder Instances

Visual Builder has built in lifecycle for applications that supports hosting the development, test, and production instances of an app on a single server. But many companies prefer to separate their dev instances from their production instances - this allows them to separate the users accessing each instance, separate the backends that they are accessing, and guarantee that there is no development load on the production server. If that is the approach taken, you'll need to promote the app from the development VB instance to the production VB instance, and also take care of subsequent changes to the app. The solution for this need is the use of a shared code repository - which is available for you for free in the Oracle Developer Cloud. If you haven't yet watched the video that explains how to setup Visual Builder to work with the Git repository in Developer Cloud - you should watch that video first. This is an essential thing to do if multiple developers are working on your project. It is also the thing that will enable you to promote code between environments. Once your app code is inside the Git repo - you can leverage Visual Builder's "Import from Git" option in any other instance of VB - this will create your initial version of the app on your new instance. When someone changes the code in the repository (for example by checking in the latest changes from the development instance), you can pick up those changes in your production VB instance by connecting your app back to that git repository (and the specific branch you want to use) and doing a Reset Head operation - this will overwrite your local app definition on the production instance with the latest updates from your dev instance.  Note that if you already have a published application which is live, you would first need to create a new version of this app, so you could make changes to the code. Then you reset the code from head, and then you re-stage and re-publish the app. Your changes will be reflected in the running app as soon as you do this. And don't worry - as part of the re-publish step we will ask you what to do with the existing data in your business objects - just choose the option to "Keep existing data in live" and your data will stay as is while the rest of the app gets updated. In the video below you can see the full process: Note that in the video the process is done manually, if you are adopting DevOps automation approach you should look into the ability to use the build jobs in Developer Cloud to automate the process of staging and publishing apps each time code changes in a specific branch. This blog entry can get you started on your way to DevOps Visual Builder.  

Visual Builder has built in lifecycle for applications that supports hosting the development, test, and production instances of an app on a single server. But many companies prefer to separate their...

Visual Builder

Leveraging the Q Parameter to Filter Tables with In Clause

The business objects created by Visual Builder expose a powerful REST service interface that includes the ability to use complex query conditions to filter the list of records they return. This is done using the q parameter as described here. In the current version of Visual Builder we didn't expose a design time access to the q parameter and rather provided an abstraction through the filterCriteria approach for defining queries. This saves you from the need to learn SQL syntax for queries - and generates the q parameter for you. But you can actually use the q parameter directly as well - passing it as one of the uri parameters when you call the GET REST method. This can be useful for example when you want a more complex query condition. For example if you want to use the SQL in clause - something like "Where name in ('joe', 'dave', 'jane')". In the video below I show how to modify the q parameter and pass it into your ServiceDataProbvider definition so it will modify the query populating a table. I'm using a bit of JavaScript to create the needed query syntax (surrounding values with ' , and adding the SQL syntax at the start). The code I use is:    PageModule.prototype.createIn = function (names){     var surrounded = '\'' + names.split(',').join('\',\'') + '\'';     var query = 'name in ('+surrounded+')'     var ret= {"q" : query} ;         return ret;        } Check it out here:  

The business objects created by Visual Builder expose a powerful REST service interface that includes the ability to use complex query conditions to filter the list of records they return. This...

Visual Builder

Using Checkbox to Select Rows in a Table in Visual Builder

NOTE - The approach shown in this blog is no longer going to work with newer versions of Oracle JET/ Visual Builder. Here is an updated blog that shows the new simpler way to achieve this with JET 9. For JET 8.1 you can adopt the approach shown here. This blog will show you how to add a checkbox to rows in a table to allow you to pick specific rows. Note that an alternative approach to selecting multiple rows in a table is to use the built in multi-row selection capabilities of the JET table as shown here, but some users find it easier to use a check box so... To achieve this, you'll want to base your table on an ArrayDataProvide rather than an ServiceDataProvider - this way you'll be able to access the values in the rows later to figure out which ones were selected. You'll add a new boolean attribute to your ADP to track if a row is selected or not - selecting a row will turn the value of this attribute to true. For the check box, we are going to use the "boolean checkbox component" - one of the components available in the Visual Builder Component Exchange. Once you add the component to your VB application, you can drag it onto your table's empty column, and hook the value of the new boolean field you introduced.             <oj-ext-checkbox-switch :id="[['oj-ext-checkbox-switch--2147249178-1-' + $current.index]]" value="{{ $current.row.selected }}"></oj-ext-checkbox-switch> In the video you can also see how to use the for loop and if logic actions in an action chain to loop over the records in the table and check the value in the field using this expression{{ $page.variables.DeptADP.data[$current.index].selected }} Check out the quick demo here:    

NOTE - The approach shown in this blog is no longer going to work with newer versions of Oracle JET/ Visual Builder. Here is an updated blog that shows the new simpler way to achieve this with JET 9....

Visual Builder

Table Pagination and Scrolling in Visual Builder Explained

A common question we get from customers who are using the table component in visual builder is how to implement pagination - basically fetching data as needed when I scroll the table. In this blog I show you how you can control the behavior of the table's data fetching. For most cases, simply setting a height for the table using a property like style="height:300px" on the table will give you the behavior you want, which is to fetch a limited amount of record initially (25 is the default) and fetch more when you scroll further. This is since we default the table to have scroll-policy="loadMoreOnScroll" - and this together with an ServiceDataProvider that is based on a Visual Builder Business Object REST service (or and ADF Describe one) correctly pass the limit and offset parameters to the REST service your table is based on. Here is a quick demo of how you can further control the table pagination/scrolling behavior: Note - if you are getting your data from some other REST service - that REST service will need to support pagination (probably accepting two parameters for the start point and the range to fetc). You can tell Visual Builder how to pass pagination info to the service by defining the transformation on the service calls. Design Considerations There are a few things to think about when playing with the values that control data fetching in tables: The first thing to think about is the usability of your UI for the end user. In most cases you shouldn't be creating a UI that requires a user to scroll hundreds of records to find the ones with the data that is interesting to them. A much better approach would be to have a search/query component that will allow the user to specify the set of records they want to show. There are multiple blog entries that cover table filtering (even when not using VB Business Objects). The second point to ponder is whether you prefer fast initial load with slight delays later in scrolling or initial delay and smooth scrolling. This is something you can control with the scroll-policy-options.fetch-size property of the table - you can set it high so it will fetch many records at the start - and then scrolling through them would be smooth. But the downside is that this initial fetch might be a bit slower, and that you are consuming more memory on the client. Another thing to think about is whether you want to limit the amount of records the user is allowed to fetch. You might want to do this if you want to control the amount of network traffic and memory consumption on the client. The default for a JET table is set to 500 - but you can modify this as you wish with the scroll-policy-options.max-count property of the table. An example of the jet code for your table could end up like this:     <oj-table summary="Sample Table" id="oj-table--1731912203-1" class="oj-flex-item oj-sm-12 oj-md-12"     data="[[$page.variables.sheet1ListSDP]]" columns='[{"headerText":"Id","field":"id"},{"headerText":"title","field":"title"}]'     style="height:300px" scroll-policy-options.max-count="1500" scroll-policy-options.fetch-size="150"     scroll-policy="loadMoreOnScroll"></oj-table> One last point to mention here - the ServiceDataProvider variable itself has a parameter called pagingCriteria that can be used to control pagination further.

A common question we get from customers who are using the table component in visual builder is how to implement pagination - basically fetching data as needed when I scroll the table. In this blog I...

Visual Builder

Charts in Oracle Visual Builder - Data Structure and Performance Tips

One of the key ways to make your application drive better user results is to use charts. Chart makes it easier for users to turn raw data into useful information. As they say "A picture is worth a thousands words". Oracle Visual Builder's quick starts makes it very simple to create basic charts leveraging the data visualization components of Oracle JET. But if you require more complex charts and if you want to improve the performance of your application, you might want to go beyond the quick-start. This blog covers two topics: Reducing network traffic - the "add data" quick-start creates separate variables for each chart, which results in separate DB queries and separate sets of data. If you are sharing population between charts - you can extend one of the queries and eliminate another. In addition, if you need to further manipulate the returned data to show a third type of chart - switch the ADP instead of SDP. This way a single fetch can be used by multiple charts even if the data structure is different. Creating the needed data structure - different charts require different structures of data, and your REST calls don't always return the needed structure. You can use simple JavaScript methods to massage the data a REST service provides into the format your chart requires. Here is what you'll learn in the video (time stamps will help you skip parts you already know): 0:00-1:15 Creating charts with the "add data" quick start 1:15-3:15 Merging two charts to work with a single REST call, and using calculation on multiple columns in a chart 3:15-4:15 Explaining the data structure for a chart with more than one series 4:15- 7:15 Switching from ServiceDataProvider (SDP) to an ArrayDataProvider (ADP) - so the data will be available for further manipulation 7:15-8:45 Defining a new type and a new ADP with the needed structure for the new type of chart 8:45-11:00 Use a JavaScript method to transform the data structure.  11:00-End Bind a dual series chart to an ADP  Resources  An example of the data structure for the second chart is in the Oracle JET cookbook. Here is the JavaScript used to create this structure from the data structure returned from the BO REST service. It creates two series entries for each record returned from the BO - one for salary and the other for the computed bonus. PageModule.prototype.transform = function(result) { var newID = 1; if (result && result.length > 0) { var items = []; for (var i = 0; i < result.length; i++) { items.push({ id: newID++, group: result[i].name, series: "Salary", value: result[i].salary }); items.push({ id: newID++, group: result[i].name, series: "Bonus", value: result[i].bonus * result[i].salary }); } return items; } };

One of the key ways to make your application drive better user results is to use charts. Chart makes it easier for users to turn raw data into useful information. As they say "A picture is worth...

Visual Builder

Storing Image Files in Your Database from a Visual Builder App

The business objects in Oracle Visual Builder let you store textual data, but what if you need to store some binary data such as images? You'll need to find a separate location to store those. Oracle has various solutions for this including the storage cloud and the content and experience cloud, in this blog we'll show you how to do this using Oracle ATP Database (or any other Oracle DB). The concept is simple, you create a table with a Blob type column in your DB, in that column you are going to store the images. You now need to expose that table through a REST service - and call that REST service from your Visual Builder app to load the images. In your Visual Builder app you can have a business object where one of the fields will contain the URL that is used to fetch the image back. In the video demo below I show you how to build this solution. The Database Part - ATP+ORDS I'm using an ORDS based module that exposes the get and post methods on the table. Blain Carter pointed me to this tutorial that covers creating the table and the ORDS interfaces. A couple of tips as you work through the tutorial: You need to first complete the method for getting a specific image by ID, before you can test the POST method (which depends on that GET method for the return value). The PL/SQL code I used is: declare image_id integer; begin insert into gallery (title,content_type,image) values (:title,:content_type,:body) returning id into image_id; commit; :status := 201; :location := image_id; end; And the parameters are: Note that I also needed to whitelist my VB instance on the ORDS side - so I'll be allowed to access that end point. Now that you have the backend services, it's a simple matter of building the VB based UI. The Visual Builder Part In VB you'll define service connections to work with the ORDS endpoints. Note that you'll need to switch the MediaType of the endpoints to accept image/png instead of the regular application/json. Then we use the take picture action to allow us to pick an image either from the hard-drive when running as a web app, or from the device when running as a mobile app. We then pass the file to the REST endpoint which creates a record in the DB storing the image. The REST service returns a URL address for the image location as the text value we store in the VB business object. The value is returned as part of the header - so we use this expression to get it: $chain.results.callRestEndpoint1.headers.get('location') Check out the video below to see the development process in VB: 0:00-1:30 Review the Database and ORDS structure 1:30-3:30 Define REST service connections in Visual Builder 3:30-5:30 Create Business Object and basic UI for mobile app 5:30-7:40 Creating an action chain to take a picture and load to DB 7:30-8:45 Test run in emulator 8:45-end PWA enable the app and test on device

The business objects in Oracle Visual Builder let you store textual data, but what if you need to store some binary data such as images? You'll need to find a separate location to store those. Oracle...

Visual Builder

Adding Offline Capabilities to an Oracle Visual Builder App

Visual Builder allows you to create applications that can continue to function even when your device is disconnected from the network. To do that Visual Builder leverages the Oracle JET offline persistence toolkit. This toolkit enables your application to cache data on the client and serves it back from the cache when you are issuing the same REST call but your device doesn't have access to the server. It also allows you to "execute" operations such as adding records while offline - storing those requests on the client again - and then automate replaying them back when you are connected. In the demo video below I show how to add some of these capabilities to your application. It's important to note that adding offline capabilities requires knowledge in JavaScript coding and an understanding of the offline toolkit. This is not a simple drag and drop operation - so approach carefully. Leverage the extensive logging that the offline persistence can do and monitor it's messages in the browser's dev tools console to see what is happening when. In the video you'll also see how to clear the cache on the client which is sometimes needed to see the real functionality. The Visual Builder developer guide has a section that explains the concepts of offline persistence, and provides a basic starting point code sample. In the video below, I start from that code sample, then I modify it to change the cache strategy and implement support for POST operations and synch data changes on demand. Here is a breakdown of things you'll see in the video (allowing you to skip to the section you need): 0:00-1:30 - Exposing Oracle Database Table (Oracle ATP) with REST Services using ORDS and SQLDeveloper 1:30-4:45 - Building a simple Read/Create Visual Builder App Accessing above ORDS services 4:45-8:00 - Adding caching based on the book's sample 8:00-10:30 - Switching to use cache data only when offline 10:30- End - Adding handling of POST(Create) operations As you can see the interaction with the offline persistence layer is managed in the application's JavaScript area. Below is the code used in my app, with the parts that I change from the doc sample explained below. define([ 'vbsw/helpers/serviceWorkerHelpers', /** * Add the following entries to include the toolkit classes that you'll use. More information about these * classes can be found in the toolkit's API doc. See the link to the API doc in the paragraph before * this sample file. * */ 'persist/persistenceManager', 'persist/defaultResponseProxy', 'persist/persistenceUtils', 'persist/fetchStrategies', /** * Add the following entry to enable console logging while you develop your app with the toolkit. */ 'persist/impl/logger' ], function(ServiceWorkerHelpers, PersistenceManager, DefaultResponseProxy, PersistenceUtils, FetchStrategies, Logger) { 'use strict'; function AppModule() {} function OfflineHandler() { /** * Enable console logging of the toolkit for development testing */ Logger.option('level', Logger.LEVEL_LOG); Logger.option('writer', console); var options = { /** * The following code snippets implements the toolkit's CacheFirstStrategy. This strategy * checks the application's cache for the requested data before it makes a request to cache * data. The code snippet also disables the background fetch of data. */ requestHandlerOverride: { handlePost: handlePost }, fetchStrategy: FetchStrategies.getCacheIfOfflineStrategy({ backgroundFetch: 'disabled' }) }; this._responseProxy = DefaultResponseProxy.getResponseProxy(options); } OfflineHandler.prototype.handleRequest = function(request, scope) { /** * (Optional). Write output from the OfflineHandler to your browser's console. Useful to help * you understand the code that follows. */ console.log('OfflineHandler.handleRequest() url = ' + request.url + ' cache = ' + request.cache + ' mode = ' + request.mode); /** * Cache requests where the URL matches the scope for which you want data cached. */ if (request.url.match( 'https://yourserver.oraclecloudapps.com/ords/shay' )) { return this._responseProxy.processRequest(request); } return PersistenceManager.browserFetch(request); }; OfflineHandler.prototype.beforeSyncRequestListener = function(event) { return Promise.resolve(); }; OfflineHandler.prototype.afterSyncRequestListener = function(event) { return Promise.resolve(); }; AppModule.prototype.createOfflineHandler = function() { /** Create the OfflineHandler that makes the toolkit cache data URLs */ return Promise.resolve(new OfflineHandler()); }; AppModule.prototype.isOnline = function() { return ServiceWorkerHelpers.isOnline(); }; AppModule.prototype.forceOffline = function(flag) { return ServiceWorkerHelpers.forceOffline(flag).then(function() { /** if online, perform a data sync */ if (!flag) { return ServiceWorkerHelpers.syncOfflineData(); } return Promise.resolve(); }).catch(function(error) { console.error(error); }); }; AppModule.prototype.dataSynch = function() { return ServiceWorkerHelpers.syncOfflineData(); }; // custom implementation to handle the POST request var handlePost = function(request) { if (ServiceWorkerHelpers.isOnline()) {} return PersistenceUtils.requestToJSON(request).then(function( requestData) { console.log('Inside PersistenceUtils'); console.log(requestData); requestData.status = 202; requestData.statusText = 'OK'; requestData.headers['content-type'] = 'application/json'; requestData.headers['x-oracle-jscpt-cache-expiration-date'] = ''; // if the request contains an ETag then we have to generate a new one var ifMatch = requestData.headers['if-match']; var ifNoneMatch = requestData.headers['if-none-match']; if (ifMatch || ifNoneMatch) { var randomInt = Math.floor(Math.random() * 1000000); requestData.headers['etag'] = (Date.now() + randomInt).toString(); requestData.headers['x-oracle-jscpt-etag-generated'] = requestData.headers['etag']; delete requestData.headers['if-match']; delete requestData.headers['if-none-match']; } return PersistenceUtils.responseFromJSON(requestData); }); }; return AppModule; });   To highlight the major changes in the code done in the video: Line 40 - changed the fetch strategy to fetch data from the cache only when offline - doc  Line 37-39 - define a new method that will be used to handle POST operations Lines 98-125 - the custom method that handles POST operations (line 11,19 contain the extra needed library reference) Lines 93-95 - AppModule function to force synchronization of offline changes Keep in mind that offline caching should be used with an understanding of the risks involved. For example, your cached data can get stale and not match the real situation in the server.So while caching can be a nice performance boost, you should probably use it for data that is not frequently changing. Also since data is cached on the client, other people could access it if they get access to the client. Don't cache sensitive data that you don't want falling into the wrong hands if you loose your device.  

Visual Builder allows you to create applications that can continue to function even when your device is disconnected from the network. To do that Visual Builder leverages the Oracle JET offline persist...

Master Detail on a Single Page with a Single REST Call

This blog entry started as a reply to a question on the Visual Builder technical forum about fetching master and detail tables. While working out a solution, I found a couple of techniques and tips that would be useful to document for future users. Let's assume you have a master/detail relationship between departments and the employees working in them. You want to be able to show on a single page a list of all the departments and when you select one of them show the full information about that department and the employees working in it, you also want to minimize the number of REST call you perform to fetch that data. In the video below I show the solution while highlighting some tips and techniques including: Enabling accessors (0:35) - this allows us to fetch related objects in a single query. You do this by configuring the relationship between your business objects and checking the box for the relationship you need. Defining a type that will control the data that will be retrieved (2:35) - We define a type that contains data from both the master and detail records. When we assign this type as the type returned (response type field) from the call to the REST end point (5:02), we  tells Visual Builder to leverage the accessor we defined. Note that when calling the REST service from other locations you can use the expand URL parameter for the REST call to fetch the details in addition to the master record (read more about the expand option here). Assigning an array into an ADP while clearing the ADP (5:35) - a little feature of our variable assignment dialog that you might have missed (I know I did until David K told me about it) - where you can specify to empty an array before you add new values into it in a declarative way. Here we go:

This blog entry started as a reply to a question on the Visual Builder technical forum about fetching master and detail tables. While working out a solution, I found a couple of techniques and tips...

Visual Builder

Filtering List Results from a REST Service with Visual Builder

I posted several blogs in the past that covered how to us the filterCriterion property of a service data provider (SDP) in order to filter the results you see in a table or a list  including how to use compound conditions for advance filtering. This works great with REST services that are exposed on the business objects you created in Visual Builder, but if you'll try and use this filterCriterion approach with other REST services, you'll notice it doesn't work out of the box. In this blog I'll show another approach to filtering REST services that populate a service data provider. First, a bit of explanation on what's going on behind the scenes when using the filter criteria. If you'll monitor the REST calls used with filter criteria, you'll notice that it generates a URL parameter that will look something like ?q=dname='Marketing' . Basically the filter criteria generates a URL parameter called q and formats your conditions correctly for that parameter.The REST services we expose on business objects know how to parse and use this q parameter (read more about the q parameter and its query capability here). Filtering is done on the server side, and the records that match the condition are returned to the client. (Important to know - REST services exposed from ADF Business Components - such as the REST services exposed by many of our SaaS apps - also support the usage of the q parameter. If you are planning on leveraging these type of services in your app, make sure to add them using the ADF Describe option in the "Service from Specification" wizard - as shown in this blog.) But not every REST service out there knows how to parse the q parameter. In fact, most of them won't know what to do with a q parameter passed to them - they'll probably just ignore it. They will be expecting the information about what exactly you want them to return using some other URL parameters. One approach to handle this will be for you to translate the filter criteria structure to the format they are expecting to get. You can do this by defining a service transform on your service as explained here. Such transformation can also let you support sorting and pagination with SDP based tables. In the video below, I'm using an alternative approach to get filtering to work directly passing the expected URL parameters for filtering to the service. Note that using this approach rather than the above mentioned "transformation" approach means that some table functionality such as sorting, and pagination won't be available out of the box. In the video I leverage a REST service from Songsterr which allow you to search their repository of song tabs. This REST service filters the results it returns by using a parameter called "pattern". You can further filter the results by adding ,a= with another value to the URL. For example, this will give you songs that have both Bob and Sheriff https://www.songsterr.com/a/ra/songs.json?pattern=Bob,a=Sheriff As you'll see I use the Service Data Provider (SDP) uriParameters attribute to pass in an object that contains the URL parameters that will be passed to the REST end point. the uriParameres expects an object that has an entry for each of the query parameters you define on the REST end point. In my case there is only one such parameter called pattern so the format of the value I pass is: {"pattern" : $page.variables.Artist+ ",a=" + $page.variables.Filter } When you work with other services the URL parameter will probably be different but the concepts should still apply. So your steps would be: Figure out the URL format for getting filtered data Define the URL parameters for the service end point Construct the value passed to the parameters in your page event (The browser's network tab is your friend when you need to debug what's going on while you go through the above process - see the end of the video)

I posted several blogs in the past that covered how to us the filterCriterion property of a service data provider (SDP) in order to filter the results you see in a table or a list  including how...

Visual Builder

Running Visual Builder Apps On Other Servers (and On-Premises)

Ever since we released Oracle Visual Builder a frequent request has been "can I take the app and run it anywhere I want?". With the latest version of Visual Builder the answer is Yes! This means that you can take apps you built in the Oracle Cloud and host it in other web servers. (Development is still cloud based only). Note that if you decide to take the visual builder server out of the picture, you are going to lose some of the functionality that runs on the Visual Builder Cloud Server, specifically: Business Objects - these run on the VB backend - so if you are not going to use our backend - you won't have a place to run them. (You could still run that part on the VB backend, and have your app UI served from another server). Identity Cloud - Visual Builder leverages Oracle's Identity Cloud to manage users and roles as well as authentication and authorization. If you are not using the VB Cloud hosting platform, it is up to you to manage these aspects of your app. Visual Builder proxy - On the Visual Builder server we have a piece of software (called the authentication proxy) that manages connections to REST services. The proxy handles things like passing in credentials and eliminating CORS (you can read more about the roles of the proxy and when to use it in this blog entry). If you don't want to use this piece of software you need to switch the connection of the services you define in VB to "Direct (bypass proxy)" and then the calls are being done directly from the browser to the remote REST service. If you are fine with these limitations, or if you have other solutions for these requirements, you can host your Oracle Visual Builder app on another web server without needing to access the VB server. (Remember that you can still choose to host your VB app somewhere else, but use the VB server for the above functionality - although if this is what you are doing, you are probably better off just hosting directly on VB). Here is a quick demo showing how to take an app and move it to run completely on your own machine (including accessing REST services and a database that is running on that machine). As you can see there are a couple of adjustments we did to our app to remove the dependency on the services that the Visual Builder server provides. We switch to use the direct access to the REST services, and we allowed anonymous access to our app (since we don't have IDCS to manage authentication). Then we used the grunt vb_build step (more on this in the blog entry about app optimization and CI/CD) to create the zip file that contains the app ready to be deployed - leveraging the archive artifact step in Developer cloud to save those files. We took the optimized version of the app and hosted it as a regular collection of HTML/JavaScript resources on a web server (Apache in the video). Then we showed how you can switch the set of services that the app is accessing by doing a "global search and replace" to replace the address of the server hosting the REST services that provides our app the data we use - this will allow you to also move your backend to be on-premise. (In the video we are using WebLogic to host ADF based REST services, accessing an Oracle XE database running in a docker image). With these simple steps you can easily host your VB applications anywhere.

Ever since we released Oracle Visual Builder a frequent request has been "can I take the app and run it anywhere I want?". With the latest version of Visual Builder the answer is Yes! This means that...

DevOps + Agile (VBS)

Automating DevSecOps for Java Apps with Oracle Developer Cloud

Looking to improve your application's security? Automating vulnerability reporting helps you prevent attacks that leverage known security problems in code that you use. In this blog we'll show you how to achieve this with Oracle's Developer Cloud. Most developers rely on third party libraries when developing applications. This helps them reduce the overall development timelines by providing working code for specific needs. But are you sure that the libraries you are using are secure? Are you keeping up to date with the latest reports about security vulnerabilities that were found in those libraries? What about apps that you developed a while back and are still running but might be using older versions of libraries that don't contain the latest security fixes? DevSecOps aims to integrate security aspects into the DevOps cycle, ideally automating security checks as part of the dev to release lifecycle. The latest release of Oracle Developer Cloud Service - Oracle's cloud based DevOps and Agile team platform - includes a new capability to integrate security check into your DevOps pipelines. Relying on the public National Vulnerability Database, the new dependency vulnerability analyzer scans the libraries used in your application against the database of known issues, and flags any security risks your app might have based on this data. The current version of DevCS support this for any Maven based Java project. Leveraging the pom files as a source of truth for the list of libraries used in your code. When running the check, you can specify your level of tolerance to issues - for example defining that you are ok with low risk issues, but not with medium to high risk vulnerabilities. When a check finds issues you can fail the build pipeline, send notifications, and in addition add an issue into the issue tracking system provided for free with Developer Cloud. Check out this demo video to see the process in action. Having these type of vulnerability scans applied to your platform can save you from situation where hackers leverage publicly known issues and out of date libraries usage to break into your systems. These checks can be part of your regular build cycle, and can also be scheduled to run on a regular basis on systems that have already been deployed - to verify that we keep them up to date with the latest security checks.  

Looking to improve your application's security? Automating vulnerability reporting helps you prevent attacks that leverage known security problems in code that you use. In this blog we'll show you how...

Visual Builder

Working with Multiple Row Selection Tables in Visual Builder

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);     }   } If you now want to access the values of the selected rows you can use the getDataForVisibleRow function of the oj-table that returns a data object with the content of the row. The code below shows you how to add that section to your code, printing out the name of each employee that was selected.   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);         //The following loop prints the names       for (var j = selection[i].startIndex.row; j <= selection[i].endIndex         .row; j++) {         var rowdata = document.getElementById("mytable").getDataForVisibleRow(j);         console.log(rowdata.data.name)       }     }   }  

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...

ADF & JDeveloper

Oracle ADF or Oracle JET - An Update

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. Client-Centric Architecture Momentum 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. Better Tooling 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. Summary 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.  

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...

Visual Builder

Displaying an "Unsaved Changes" Warning in Visual Builder

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.

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...

DevOps + Agile (VBS)

Connecting to Oracle Autonomous Transaction Processing (ATP) from Developer Cloud Service

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.  

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...

Visual Builder

Adding Calculated Fields to Your Visual Builder UI

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.

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...

Visual Builder

Filtering Data Providers with Compound Conditions in Visual Builder

[ Update Dec 2019 - there is a new simpler way to create compound filters - see this blog ] 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.  Another issue that has been identified with the above approach is when you leave one of the field empty, the filterCriterion is not correctly created. Andrejus has a solution for this on his blog using a JavaScript method to properly construct the conditions. One more tip is - if you don't get the filtering you need working, check out the browser's network tab to see the format of the q parameter appended to the call to your business objects. Here is a clip from the JSON file of the action:         "assignVariables2": {           "module": "vb/action/builtin/assignVariablesAction",           "parameters": {             "$page.variables.travelRequestsListSDP": {               "source": {                 "filterCriterion": {                   "criteria": [                     "{{ $page.variables.locationCriteria }}",                     "{{ $page.variables.priceCriteria }}"                   ],                   "op": "$and"                 }               },               "reset": "none",               "mapping": {                 "$target.filterCriterion": {                   "source": "$source.filterCriterion",                   "reset": "empty"                 }               }             }           }         }

[ Update Dec 2019 - there is a new simpler way to create compound filters - see this blog ] I posted in the past a basic introduction to filtering lists in Visual Builder - showing how to use the...

ADF & JDeveloper

Oracle JET UI on Top of Oracle ADF With Visual Builder

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:

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...

Visual Builder

Adding Off Canvas Layout to a Visual Builder Application

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: <div class="oj-offcanvas-outer-wrapper">   <div class="oj-offcanvas-start oj-panel oj-panel-alt5 oj-offcanvas-overlay-shadow"     id="startDrawer" style="width: 200px">     <div class="oj-flex">       <h2 class="oj-flex-item oj-sm-12 oj-md-12" id="h1-1660298733-2">Menu</h2>     </div>     <div class="oj-flex">       <oj-label class="oj-flex-item oj-sm-12 oj-md-3" id="oj-label-1660298733-1">List</oj-label>     </div>     <div class="oj-flex">       <oj-label class="oj-flex-item oj-sm-12 oj-md-3" id="oj-label-1660298733-2">chart</oj-label>     </div>   </div>   <div class="demo-main-content" id="mainContent">     <div class="oj-flex">       <h2 class="oj-flex-item oj-sm-12 oj-md-10" id="h1-1660298733-1">Gifts</h2>     </div>     <div class="oj-flex">       <hr class="oj-flex-item oj-sm-12 oj-md-12" id="hr-1660298733-1" />     </div>     <div class="oj-flex">       <oj-list-view class="oj-flex-item oj-sm-12 oj-md-12" data="[[$page.variables.giftsListSDP]]"         id="oj-list-view-1660298733-1"> <template slot="itemTemplate"> <oj-vb-list-item> <img :src="[[$current.data.picture]]" height="32" slot="image" width="32" /> <p slot="title1"><oj-bind-text value="[[$current.data.product]]"></oj-bind-text></p> <p slot="value1"><oj-bind-text value="[[$current.data.cost]]"></oj-bind-text></p> <p slot="title2"><oj-bind-text value="[[$current.data.sKU]]"></oj-bind-text></p> </oj-vb-list-item> </template> </oj-list-view>     </div>   </div> </div> JavaScript Function in the page: define(['ojs/ojcore'], function(oj) { 'use strict'; var PageModule = function PageModule() {}; PageModule.prototype.showSide = function() { var offcanvas = { "selector": "#startDrawer", "content": "#mainContent", "edge": "start", "displayMode": "push", "size": "200px" }; oj.OffcanvasUtils.open(offcanvas); } return PageModule; }); and in your page Json file add this import: "oj-offCanvas": { "path": "ojs/ojoffcanvas" }

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...

Visual Builder

Working with REST POST and Other Operations in Visual Builder

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.        

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...

Visual Builder

Business Logic for Business Object in Visual Builder - Triggers, Object Functions, Groovy and More

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: def children = TravelRequests; // Accessor name to child collection def ret_val = "List of travel requests "; if (!children.hasNext()) { return "no impact"; } while (children.hasNext()) { def emprec = children.next(); def name = emprec.name; ret_val=ret_val+" " +name; } return ret_val;   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 :-)    

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...

DevOps + Agile (VBS)

Automating CI/CD for Docker with Oracle Cloud Infrastructure Registry and Developer Cloud Service

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!  

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...

Visual Builder

Integrating Processes into Visual Builder Cloud Applications

If you got Visual Builder Cloud Service as part of the Oracle Integration Cloud, then you have access to a powerful process creation and management service. Process Cloud helps you to create processes that can involve multiple steps ,multiple users and roles, and run over long periods. VBCS has specific functionality built-in to allow you to integrate these type of processes into your applications. Once you configure your process cloud service connection, you'll be able to add processes that you created in process cloud to your application. Then you can invoke and interact with them from both your user interface or the logic of your business objects. In the video below you get a quick introduction to several techniques used to interact with processes from VBCS. In the video you'll see: How to add a process to your app How to invoke it from action chains How to add processes and tasks to your UI How to leverage the process integration code templates created by VBCS How to invoke processes from business objects triggers  For more on working with processes and VBCS see the Working with Business Processes documentation chapter. We also added a set of blog entries that walk you through integrating PCS with VBCS in our Visual Builder Learning Path series of blogs. For a more complete introduction to process cloud service see the process cloud getting started page .  

If you got Visual Builder Cloud Service as part of the Oracle Integration Cloud, then you have access to a powerful process creation and management service. Process Cloud helps you to create processes...

DevOps + Agile (VBS)

Managing Visual Builder Code with Developer Cloud Service

Developer Cloud Service (DevCS for short) is a foundation service in the Oracle Cloud that provides you with a full cloud platform to manage agile development processes and automate DevOps cycles. It is available for every Oracle Cloud customer. One key capability (that is actually offered for free as part of your Oracle cloud subscription) is Git based repositories that you can create to manage the code of your application. In this blog we are going to show you how to leverage Visual Builder's built in integration with DevCS to manage your code lifecycle in these Git repositories. A full introduction to Git and the way you work with it - specifically the gitflow approach to code management is outside the scope of this blog. But since Git is the most popular version management solution out there - you can find many internet tutorials that will teach you how to implement these methodologies.  With the git integration in VBCS developing application in teams with multiple developers and multiple tasks is much more organized. In addition you have a full view of the code changes in your application and the ability to easily manage versions. In the video below we teach you some of the basic steps including: Creating a DevCS project with a default Git repository Connecting VBCS to DevCS and to a specific Git branch Pushing code into the repository Creating branches Pulling and importing code from repostiories Viewing code changes in DevCS The main concept to understand is that with this development approach, the app code source of truth becomes the git repository in DevCS. Developers then pull/import the code from that place to local copies in their DevCS development environment, where they can continue to develop it pushing changes back to the central repository. There is much more that you can do with DevCS and VBCS including managing and tracking issues, agile development processes and even automating the publishing of your applications. We'll cover these in upcoming blog entries. For more tips on using Developer Cloud Service see the DevCS documentation including the tutorials.  P.S. - note that if the user that you are using to access DevCS is federated from another place (such as in SSO situations) it won't be able to access the Git Repo. So instead create a new user in IDCS that will specifically be used for these tasks.

Developer Cloud Service (DevCS for short) is a foundation service in the Oracle Cloud that provides you with a full cloud platform to manage agile development processes and automate DevOps cycles. It...

Visual Builder

Tips and Tricks for List of Values in Visual Builder Cloud Service

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): PageModule.prototype.FindThreeLetter = function(list,value) {  return  list.find(record => record.alpha2_code === value).alpha3_code; } 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:

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...

Visual Builder

Filtering a Table, List or Other Collections in Oracle Visual Builder Cloud Service

[Update Dec 2019 - there is a simpler interface for this - see this new blog entry on filtering ] 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: { "criteria": [ { "value": "{{ $page.variables.filterVar }}", "op": "{{ \"$eq\"\n }}", "attribute": "{{ \"traveler\"\n }}" } ], "op": "{{ \"$or\"\n }}" } 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.  

[Update Dec 2019 - there is a simpler interface for this - see this new blog entry on filtering ] A common use case when working with data is to try and filter it. For example if you have a set of...

Visual Builder

Reflecting Changes in Business Objects in UI Tables with Visual Builder

While the quick start wizards in Visual Builder Cloud Service (VBCS) make it very easy to create tables and other UI components and bind them to business objects, it is good to understand what is going on behind the scenes, and what the wizards actually do. Knowing this will help you achieve things that we still don't have wizards for. For example - let's suppose you created a business object and then created a UI table that shows the fields from that business object in your page. You probably used the "Add Data" quick start wizard to do that. But then you remembered that you need one more column added to your business object, however after you added that one to the BO, you'll notice it is not automatically shown in the UI. That makes sense since we don't want to automatically show all the fields in a BO in the UI. But how do you add this new column to the UI? The table's Add Data wizard will be disabled at this point - so is your only option to drop and recreate the UI table? Of course not!   If you'll look into the table properties you'll see it is based on a page level ServiceDataProvider ( SDP for short) variable. This is a special type of object that the wizards create to represent collections. If you'll look at the variable, you'll see that it is returning data using a specific type. Note that the type is defined at the flow level - if you'll look at the type definition you'll see where the fields that make up the object are defined. It is very easy to add a new field here - and modify the type to include the new column you added to the BO. Just make sure you are using the column's id - and not it's title - when you define the new field in the items array. Now back in the UI you can easily modify the code of the table to add one more column that will be hooked up to this new field in the SDP that is based on the type. Sounds complex? It really isn't - here is a 3 minute video showing the whole thing end to end: As you see - a little understanding of the way VBCS works, makes it easy to go beyond the wizards and achieve anything.

While the quick start wizards in Visual Builder Cloud Service (VBCS) make it very easy to create tables and other UI components and bind them to business objects, it is good to understand what...

Visual Builder

Leveraging "On Field Value Changes" Event in Visual Builder Cloud Service - Redone

With the new Oracle Visual Builder Cloud Service (VBCS) released this month, some of my past how-to's that shows tricks in VBCS are no longer valid/needed. The direct access we provide to both REST services and the UI components in your application make things that in the past required code or hacking much simpler. Here is one example - reacting to value change events on fields and modifying other UI components based on them. Input component have a "value" event that you can hook into and provide an action chain that will be executed when the value change. In the video below you see for example how I can use a value selected in a drop down list to control whether other components on the page are shown or hidden. [update Sep-18 - there is a better way to show/hide a component - it is using the oj-bind-if component. You can right-click any component in your UI and choose to surround it with a bind-if option. Once you do this you can assign that tag to be based on a boolean variable that you set to true/false in an event like the video below. More on this here] To do this, you define a page variable that you can change in the "value" event. You can then rely on that page variable to control another component behavior. As you can see - no coding needed - just drag and drop your way to create the functionality.    

With the new Oracle Visual Builder Cloud Service (VBCS) released this month, some of my past how-to's that shows tricks in VBCS are no longer valid/needed. The direct access we provide to both REST...

Visual Builder

Using an "On Field Value Changes" Event in Oracle Visual Builder Cloud Service

[Update May 2018 - With the new VBCS there is a better approach for this - see this blog] This entry is based on previous entries from John and Shray that deal with the same topic and provide the same type of solution. John's entry was created before VBCS provided the UI id for components, and Shray's entry is dealing with a more complex scenario that also involve fetching new data. So I figured I'll write my version here - mostly for my own future reference if I'll need to do this again. The Goal is to show how you can modify the UI shown in a VBCS page in response to data changes in fields. For example how to hide or show a field based on the value of another field. To do this, you need to hook into the HTML lifecycle of your VBCS page and subscribe to events in the UI. Then you code the changes you want to happen. Your gateway into manipulating/extending the HTML lifecycle in VBCS is the custom component available in the VBCS component palette. It provides a way to add your own HTML+JavaScript into an existing page. The video below shows you the process (along with a couple of small mistakes along the route): The basic steps to follow: Find out the IDs of the business object field whose value changes you want to listen to. You'll also need to know the IDs of the UI component you want to manipulate - this is shown as the last piece of info in the property inspector when you click on a component.  Once you have those you'll add a custom component into your page, and look up the observable that relates to the business object used in the page. This can be picked up from the "Generated Page Model (read-only)" section of the custom component and it will look something like : EmpEntityDetailArchetype Next you are going to add a listener to your custom component model. Add it after the lines  //the page view model this.pageViewModel = params.root; your code would look similar to this: this._listener = this.pageViewModel.Observables.EmpEntityDetailArchetype.item.ref2Job.currentIDSingle.subscribe(function (value) { if (value === "2") { $("#pair-currency-32717").show(); } else { $("#pair-currency-32717").hide(); } }); CustomComponentViewModel.prototype.dispose = function () { this._listener.dispose(); }; Where you will replace the following: EmpEntityDetailArchetype  should be replaced with the observable for your page model. ref2Job  should be replaced with the id of the column in the business object whose value you are monitoring. pair-currency-32717 should be replaced with the id of the UI component you want to modify. (in our case show/hide the component). You can of course do more than just show/hide a field with this approach.

[Update May 2018 - With the new VBCS there is a better approach for this - see this blog] This entry is based on previous entries from John and Shray that deal with the same topic and provide the...

Visual Builder

Date Calculations and Queries with Oracle Visual Builder Cloud Service

It's very easy to define a field in a custom object in Oracle Visual Builder Cloud Service to store a date, but when it comes to doing calculations and queries based on this date you'll find that you need to resort to a little bit of JavaScript calculations. Here are a couple of useful things to know if you are trying to do that. Calculating Age (or time passed from a date in years) Let's assume you are storing information about employees and one of the pieces of information you have is their date of birth - the Birthday field in the image below. How do you show their actual age in years on a page? You can define a calculated field in your business object - and have VBCS use the "calculate value with formula" as the source for this field. Your formula would be something like: (new Date() -new Date($birthdate) )/ (60*60*24*1000*365) You are calculating the difference between today's date and the birthday field and since the answer is in milliseconds you convert it to years by dividing by the number of milliseconds in a year. Note that as you type in your formula the dialog shows you the results of the formula below the formula field - quite useful to verify that you are doing it right. Now your page can show the age of your employees: Filtering Based on Date What if you wanted to limit the records shown in the table above to only show employees of a specific age? The tricky part is that you'll need to do the calculation against the birthday field and not against the age field. The age field is not actually stored anywhere - rather it is calculated on the fly. Let's take the table shown above and assume we want to limit it to show employees who are younger than 9 years. To do that we'll add a query condition to our table to check that the birthday is larger than the date of (today - 9 years). The calculation of the date 9 years ago will be with a formula like this: new Date($current_date-9*365*24*60*60*1000) Now your table only shows older employees. Want to have a more dynamic way to define the query criteria - you can adopt the approach I showed in the blog about Creating Custom Search/Query Pages with Visual Builder along with the techniques shown here. One last note - since not every year has 365 days - the calculation for milliseconds conversion is not completely accurate - but it is quite close.

It's very easy to define a field in a custom object in Oracle Visual Builder Cloud Service to store a date, but when it comes to doing calculations and queries based on this date you'll find that you...

Visual Builder

Conditional Navigation based on Queries in Oracle Visual Builder Cloud Service

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 exist 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 use, 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 lets 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) { resolve("ok"); }); } reject("none"); } ). catch (function (operationResult) { if (operationResult.isFailure()) { // Insert code you want to perform if fetching of records failed alert('didnt worked'); reject("error"); } }); }); 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 would save you a lot of time. For more on the VBCS JavaScript API that you can use for accessing business components see the doc.

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...

DevOps + Agile (VBS)

Introduction to Oracle Developer Cloud Service Issue Tracking REST Interfaces

The task tracking system in Oracle Developer Cloud Service (DevCS) helps your team manage your development priorities and process. DevCS offers a simple web interface for working with the system. However, in some cases you might want to build your own interfaces to interact with the issues. For example, you might want to build a system for end-users to report bugs in your app and you don't want to give them direct access to the DevCS web insterface. In the August 17 update of DevCS  we introduced a set of REST services that will let you build a custom interface that will interact with our issues repository. The official documentation for the DevCS REST services is here. I wanted to share some tips to help you get this going in your project. The results are in this short video demo, and the details are below. Figuring Out The End Points The documentation gives you the basic end-points you should be calling, but it took me a little bit of time to figure out the full URL to the end point. Turns out the URL is composed in the following way: https://server/org-id/rest/org-id+project-id/issues/v2/issues The first parts (server/org-id) are quite easy to get - just copy it from the URL of your project when you look at it in your browser. The org-id+project-id part is something you can get by looking at the details of your maven repository URL - see the image below - what you are looking for is the part before the /maven/ at the end: Note that in some projects this will also include a numeric value appended to the project name. Something like developer-oracletemplates_db-oss-devops_20266. In the video sample below the result URL for the REST that returns the list of issues currently in the system ended up being: https://myserver/developer-oracletemplates/rest/developer-oracletemplates_adf1221/issues/v2/issues Creating New Issues One of the useful services is the /issues/v2/issues/create-form service. It returns a json file that you can edit to specify information about a new task that you want to create. Note that the file start with : {"createIssue":{"links":.... Before you use the file to insert a new issue, you'll need to remove the  {"createIssue": at the start and the corresponding } at the end of the file. Only then can you use it to submit the POST operation to create an issue. In the video I used the following command to create the issue in the DevCS: curl -X POST -u shay@oracle.com https://myserver/developer-oracletemplates/rest/developer-oracletemplates_adf1221/issues/v2/issues/ -d@issue.json -H 'Content-type:application/json' (the -d allows you to specify the name of the file with the new issue, and the -H specifies the content format). Now that you have access to the information you can create new systems on top of it using your favorite development tool. At the end of the video you can see a simple issue system I built with Oracle Visual Builder Cloud Service - more on that in a future blog entry.  

The task tracking system in Oracle Developer Cloud Service (DevCS) helps your team manage your development priorities and process. DevCS offers a simple web interface for working with the system....

Visual Builder

Exporting and Importing Data from Visual Builder Cloud Service - with REST Calls

Visual Builder Cloud Service (VBCS) makes it very easy to create custom objects to store your data. A frequent request we get is for a way to load and export data from these business objects. As John blogged, we added a feature to support doing this through the command line - John's blog shows you the basic options for the command line. I recently needed to do this for a customer, and thought I'll share some tips that helped me get the functionality working properly - in case others need some help skipping bumps in the road. Here is a demo showing both import and export and how to get them to work. Exporting Data Export is quite simple - you use a GET operation on a REST service, the command line for calling this using curl will look like this: curl -u user:password https://yourserver/design/ExpImp/1.0/resources/datamgr/export > exp.zip The result is a streaming of a zip file, so I just added a > exp.zip file to the command's end. The zip file will contain CSV files for each object in your application. Don't forget to replace the bold things with your values for username and password, your VBCS server name and the name of the app you are using (ExpImp in my case). Importing Data Having the exported CSV file makes it easy to build a CSV file for upload - in the demo I just replaced and added values in that file. Next you'll use a similar curl command to call a POST method. It will look like this: curl -X POST -u user:password https://yourserver/design/ExpImp/1.0/resources/datamgr/import/Employee?filename=Employee.csv -H "Origin:https://yourserver" -H "Content-Type:text/csv" -T Employee.csv -v A few things to note. You need to specify which object you want to import into (Employee after the /import/ in the command above), and you also need to provide a filename parameter that tell VBCS which file to import. In the current release you need to work around a CORS security limitation - this is why we are adding a header (with the -H option) that indicate that we are sending this from the same server as the one we are running on. In an upcoming version this won't be needed. We use the -T option to attach the csv file to our call. Note that you should enable the "Enable basic authentication for business object REST APIs" security option for the application (Under Application Settings->Security).  Using Import in Production Apps In the samples above we imported and exported into an application that is still being developed - this is why we used the /design/ in our REST path. If you want to execute things on an application that you published then replace the /design/ with /deployment/  One special note about live applications, before you import data into them you'll need to lock them. You can do this from the home page of VBCS and the drop down menu on the application.   p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff} span.s1 {font-variant-ligatures: no-common-ligatures}

Visual Builder Cloud Service (VBCS) makes it very easy to create custom objects to store your data. A frequent request we get is for a way to load and export data from these business objects. As John...

DevOps + Agile (VBS)

Using Flyway to Manage Oracle DB Versions in the Cloud

This is another entry in my series about managing database scripts/schema as part of agile development. In the past I showed how to use simple SQL and Liquibase to manage schema creation/population scripts, and today I'll show you how to use Flyway. Flyway is a free open source solution for managing "database migrations" - or basically helping you keep multiple database in synch by tracking and applying changes to the schema structure and data. Flyway uses simple SQL scripts - which means you can use DB specific syntax - and tracks their execution in the database through a table it maintains. It is very easy to get started with and only has 6 commands that you need to be familiar with. The main command is "migrate" which will check your database status, and then run all the newer scripts that have yet to be run on that instance. Flyway uses a directory structure that contains a sql folder where you'll host all your SQL scripts. It uses a naming convention (that can be adjusted) where you start the file name with a Version number (V1, V1.1, V2.1) and then two "_" followed by a description - so something like V1__Create_Emp_Table - will show up as "Create Emp Table" when you issue the "info" command to find out what is the status of a database and which scripts have already run. By the way, the info command will also show you which new scripts are pending to be run on a specific database instance. In the video below I show how to configure and use Flyway, and how to integrate it into an automatic DevOps process leveraging Oracle Developer Cloud Service. (including task tracking, Git version management of the source, and build execution of the scripts). Flyway can integrate with various build framework (ant, maven, gradle etc), but since many DB folks are not familiar with those, I chose to use simple command lines in my demo to invoke Flyway. On my laptop and local MySQL DB I just used the Flyway command line utility. However Flyway is not installed by default in the DevCS servers, so I did a little trick: Flyway is a Java program, so into my DevCS Git repository I uploaded the Flyway directory along with needed jars for flyway and the JDBC driver. Then I looked at the script for invoking the command line and found out the Java command they used and copied it into a regular shell command in my build: java -cp lib/flyway-commandline-4.2.0.jar:lib/flyway-core-4.2.0.jar org.flywaydb.commandline.Main info -user=fw -password=$Password -url=jdbc:oracle:thin:@ipaddress:1521/servicename The $Password refers to a build parameter which is encrypted. The directory structure and files in my Git are shown in this image:  

This is another entry in my series about managing database scripts/schema as part of agile development. In the past I showed how to use simple SQL and Liquibase to manage schema creation/population...

DevOps + Agile (VBS)

Introduction to Liquibase and Managing Your Database Source Code

In previous posts I showed how you can manage SQL scripts lifecycle with the help of Oracle Developer Cloud Service (DevCS) as part of an overall Oracle DB DevOps solution. I wanted to add one more utility that might act as an alternative or addition to the SQL script managing - Liquibase. Liquibase is an open source solution for managing revisions of your databse schema scripts. It works across various types of databases, and supports various file formats for defining the DB structure. The feature that is probably most attractive in Liquibase is its ability to roll changes back and forward from a specific point - saving you from the need to know what was the last change/script you ran on a specific DB instance. Liquibase uses scripts - referred to as "changesets" - to manage the changes you do to your DB. The changesets files can be in various formats including XML, JSON, YAML, and SQL. In the examples below I'm using the XML format. As you continue to change an enhance your DB structure through the development lifecycle you'll add more changesets. A master file lists all the changeset files (or the directories where they are). In parallel Liquibase tracks in your database which changesets have already run.  When you issue a liquibase update command, liquibase looks at the current state of your DB, and identifies which changes have already happened. Then it run the rest of the changes - getting you to the latest revision of the structure you are defining. By integrating Liquibase into your overall code version management system and continuous integration platform you can synch up your database versions with your app version. In my case this would of course mean integration with Oracle Developer Cloud Service (DevCS) - which you get for free with the Oracle Database Cloud Service. In the video below I show a flow that covers: Tracking my DBA tasks in the issue system Modifying a local MySQL DB with Liquibase (doing forward and backward rolls) Adding a change set defining a new table Committing to Git Automatic build implementing the changes in Oracle Database Cloud Service Automatic testing with UT/PLSQL Here is a quick 10 minute demo: [Update June 2020 - See this new blog entry that shows new features that simplify Liquibase interaction in the Oracle Cloud] For those who want to try and replicate this, here are some resources: A changeset that creates a "department" table with three columns: A changeset that creates PL/SQL function, package and procedure. Note that in line 3 the dbms="oracle" means this script will only run when we are connected to an Oracle DB: create or replace function betwnstr( a_string varchar2, a_start_pos integer, a_end_pos integer ) return varchar2 is begin return substr( a_string, a_start_pos, a_end_pos - a_start_pos+1 ); end; create or replace package test_betwnstr as -- %suite(Between string function) -- %test(Returns substring from start position to end position) procedure basic_usage; end; create or replace package body test_betwnstr as procedure basic_usage is begin ut.expect( betwnstr( '1234567', 2, 5 ) ).to_equal('2345'); end; end; A changeset that adds a record to a table. Line 8 has the rollback tag that defines how to do a rollback for this insert: delete from department where id=20   A few tips about my DevCS project and build setup. 1. For the sake of simplicity, I loaded the liquibase and JDBC jar files into my git repository - this makes it easy for my build steps to find the files and execute them. I'm guessing you could also use Maven to host those. 2. I use a password parameter for my build so I don't need to hardcode the password adding a bit of security to my build. Reference teh parameter in your build with a $ sign - $password 3. Want to learn more about test automation with ut/PLSQL - check out this blog entry.    

In previous posts I showed how you can manage SQL scripts lifecycle with the help of Oracle Developer Cloud Service (DevCS) as part of an overall Oracle DB DevOps solution. I wanted to add one more...

A Guide to Attending Oracle OpenWorld and JavaOne for Free

This title seems like a click bait, but I'll try and show you that this is actually possible. (Especially if you act fast). A pass to both conferences is not a cheap item, and with training budgets shrinking you might be running into problems getting approval to expense this to your company. But here are a couple of tricks you can use to get free access to OOW/JavaOne. Some would get you a full pass and some will get you into specific areas and sessions. Full Pass Be a Speaker Well we are a bit late to the call for papers at this point, but you might still be able to become a co-speaker if you have a good customer story to tell that shows how you are using the product/technology that a talk is about. Oracle is always looking to feature customer stories in our sessions - it is always better when a customer shares their real live success. Look up the content catalog and locate sessions on products that you are successfully implementing - ping the speaker and they might want to add you as a co-speaker. Apply for the Awards We are late for getting in this year, but keep an eye for this for next year. There is an Oracle Excelence Award where winners get a free pass to OOW. Details here. There is also a Duke's Choice Award where you get passes to JavaOne - Details. JavaOne Special Discount Right now you can get 50% off your JavaOne ticket price if you use this code DJFS2017. Register here https://www.oracle.com/javaone/register.html (oops - turns out that promotion ended last week) Other Passes So full pass might be hard to get for free, but you can get in on a big chunk of the action for free using  The Discoverer pass A Discoverer pass lets you into the exhibit halls and various keynotes. Getting into the exhibit hall is great if you want to meet product managers and learn about the latest versions (and upcoming versions too). Most of the PMs are going to do shifts at the Oracle Demoground in their product pods - so hang out there and you'll be able to chat with us. Usually a Discoverer pass is $75 - but since you are reading this blog, you can get one for free - use the code CDFR2017. Register here. Oracle Code Want to get into some technical sessions - this year we are bringing Oracle Code back to San Francisco during OOW - and you can get into this part of the conference for free. Reg here: https://developer.oracle.com/code/sanfrancisco-oct-2017 See you at the conference in a couple of weeks.      

This title seems like a click bait, but I'll try and show you that this is actually possible. (Especially if you act fast). A pass to both conferences is not a cheap item, and with training budgets...

ADF & JDeveloper

How Do I Start Learning Oracle ADF - The 12c Edition

The most popular blog entry on my blog has been the "How do I start Learning ADF" entry for years now. That entry however was last updated in 2012 (and written in 2010) - so I figured it is time to give it another update, point to more recent resources, fix broken links, and cover additional resources that appeared over the years. So here is the ADF 12c version of that blog entry updated for 2017: Get started with Oracle ADF in 6 steps Step 1 - Learn Basic Java Oracle ADF aims to reduce the amount of coding you need to do for a lot of the tasks you'll need for building an application, and if you follow some of the tutorials mentioned later you'll see how you can build advanced apps without coding. But, at the end of the day, you will write code when developing with ADF - and that code would be written in Java. You don't have to be a Java ninja to work in ADF, but you should be familiar with basic language concepts and constructs. There are lots of resources out there that will teach you the language (by the way if you are on ADF 12.2.* you should learn the Java/JDK 8 syntax), one option is the Oracle Java Tutorials path. Searching online you'll be able to find many other resources for this task. Since Oracle ADF is based on Java EE architecture - you might want to also get a bit of understanding of that architecture - but don't worry about learning all of Java EE in details - ADF will make it much simpler for you. While learning the language you should be practicing it with the development tool that you are going to use, if you are going to developer Oracle ADF applications then that tool will be Oracle JDeveloper. Get yourself familiar with the basic IDE features for coders by running through this IDE tutorial. Step 2 - Get started with Oracle ADF Now that you know the basics of the Java language (and maybe some Java EE concepts), it's time to start using the framework that will simplify your life. Start by reading the data sheet and technical paper to understand what ADF is all about. Now get your hands dirty by completing the Overview tutorial for Oracle ADF - this will take you a couple of hours but by the end of it you'll have built a full blown application, and you will touch on most of the parts of the Oracle ADF architecture. Two other tutorials you should do next will deepen your knowledge about the Oracle ADF Controller Layer and taskflows, and the Oracle ADF Faces UI layer. If you got more time, have a run through other tutorials from our site. Step 3 - Getting Educated Now that you have hands-on experience with Oracle ADF, it would be a good point to go and get some deeper knowledge about how the framework works. You can leverage the collection of free online lessons we recorded in the ADF Essentials channel. You don't have to watch all the videos, but I would definitely recommend that at a minimum you'll watch the overview, ADF business components, ADF Controller (both parts) and ADF Faces video. And then you must watch the video about the ADF bindings internal seminars (2 parts) - these are critical for you to understand the inner working of the ADF "magic layer" that makes development so simple.  By the way if you prefer to get knowledge through live or online instructor-lead courses or by reading books - we have those too - see the list here. Step 4 - RTFM Ok, now you have a good grasp of the framework and how it works, it might be a good time to read the manual for Oracle ADF - "Developing Fusion Web Applications with Oracle Application Development Framework". This is the complete guide and you should read it to get more insight into the framework, best practices, and general guidelines. Note that the ADF documentation libraries has additional books about ADF Faces, ADF Desktop Integration, Administration guides and more. Step 5 - Become an ADF Architect Now that you know how to build ADF apps, it's time to learn how to architect more complex projects and work in a team environment. The resource to learn from is the ADF Architecture Square - where we discuss best practices, development guidelines, and most importantly how to architect a complete complex application. Here you can find docs and also a link to a set of videos on the ADF Architecture Square YouTube Channel. If you only have time to watch one video from that channel - go for the "Angels in the ADF Architecture". By the way, if you are looking for a platform for your team to collaborate on while building Oracle ADF applications - check out the Oracle Developer Cloud Service and the integration it provides with JDeveloper. Step 6 - Join the Community As you continue on your development road, there will be times when you'll want to know "How do I do X?" or "Why do I get this error?". The nice thing is that since many other developers are working with ADF, you can leverage their collective knowledge. Got a question - type it into google and it is likely that you'll find blog entries and youtube videos that explain how to solve your issue. A great place to search for answers is the indexed collection of ADF and JDeveloper blog articles. Search by keywords or topics and you'll likely get great samples to help you achieve your task. Still can't find the answer? Ask your question on our ADF community forum, just don't forget to follow the basic rules of asking questions on the forum. Things keep evolving in the world of Oracle ADF, so to keep up to speed you should follow JDeveloper on Twitter for the latest news. Over the years Oracle ADF has proven itself to be a great framework for enterprise applications, and each new release introduced further capabilities and simplifications - If you are just now joining the world of Oracle ADF you are in for a great ride. Have fun.

The most popular blog entry on my blog has been the "How do I start Learning ADF" entry for years now. That entry however was last updated in 2012 (and written in 2010) - so I figured it is time to...

DevOps + Agile (VBS)

Extending Oracle Database DevOps with Automated PL/SQL Unit Testing

  Automated testing helps you locate problems earlier in the development cycle saving you precious time down the road. This is why it should be a key part of any DevOps cycle - and your database code shouldn't be an exception to this rule.This blog entry will teach you how to execute tests automatically following code changes that you do in your Oracle database.   In previous blog entires I showed you how to use Oracle Developer Cloud Service (DevCS for short) for database development including how to track and manage tasks, version code changes, conduct code reviews, and automate code deployment to the database. This blog adds one more step to this lifecycle - automated testing.   For PL/SQL testing I'm using the open-source utPLSQL unit testing solution. The team behind this project just released a completely re-written version of the framework with features that allow you to add PL/SQL testing to continuous integration processes. A full explanation of utPLSQL is outside of the scope of this blog (They have decent documentation to get you started). But in short, the concept is that you write PL/SQL procedures that test other procedures. The framework includes functions you invoke from your test functions to evaluate results as well as annotations that deliver meaningful messages and information when reporting test results. The utPLSQL utility is comprised of a set of database objects that you install in a new schema, and then you use their ut.run() procedure to execute test cases. One nice feature built into the framework is the ability to produce test result reports in a format that is compatible with regular JUnit tests. With this functionality, I was able to get Developer Cloud Service to show me the test results nicely. Further more the built in support of DevCS for the SQLcl commands, made it simple to integrate the PL/SQL based framework as part of a generic build process without the need to install anything else on my continuous integration server. Here is a quick video showing you the result and the configuration needed. In the video I show how a check in of a PL/SQL script into the Git repository triggers a chain of events that ends with publishing test results. If the test fails the build is marked as failed - which can trigger an email being sent to you notifying you each time someone broke your code.     Some tips for configuration of such a chain: My build pipeline has two jobs. The first one runs the SQL scripts in the database. This job is triggered by any change made to my Git repository. So when I update my git repository with a SQL script that has a new definition of a database object, the build immediately takes it and updates the definition in my development or QA database. Once this build job finishes, it queues up the next job - the unit testing job. The unit testing job is using SQLcl to run the following commands: set serveroutput on; set feedback off; spool /workspace_directory/results.xml; exec ut.run(ut_xunit_reporter()); spool off; I spool the results of the test run into an xml file that I keep in the workspace directory for my job. (You can find out this directory by adding a shell command build step that does echo $WORKSPACE - an environment variable on the build server). Then I execute the ut.run procedure with the parameter that tells it to output the results as XUnit/JUnit format - doc on this option here. I turn serverouput on to get the results to show, and I turn feedback off to hide the message that the procedure successfully completed. In the post build step I archive the results.xml file, and then I indicate that I want to publish the content of this file as test results.   When your build finishes you'll see your build status visually and you can then drill down to see specific tests status. Notice that you can also ask to be notified by email on the results of the build (the CC Me button).     Click on a specific run of a job to drill down into the test results   And click on a specific test suite to get the details of each test That's it. You now have a complete chain that will notify you the minute that a database change someone did breaks any tests, helping you deliver better code faster.

  Automated testing helps you locate problems earlier in the development cycle saving you precious time down the road. This is why it should be a key part of any DevOps cycle - and your database code...

Visual Builder

Automating Processes With Application Builder and Process Cloud Services

Oracle Application Builder Cloud Service (ABCS) gives you a great way to build apps that track data, but what if your data is also involved in processes? What if you need to automate not just the data collection but also the human workflow interactions? The new integration between Oracle ABCS and Oracle Process Cloud Service (PCS) enables you to achieve this easily. You can now create processes that are associated with ABCS business objects and interact with them directly from your Oracle ABCS user interfaces. This is a two way interaction patterns, where PCS processes can access information from Oracle ABCS business objects, and ABCS user interfaces can be created on top of these PCS processes to initiate and progress processes. In the video example below I'm developing a basic approval flow for travel requests. The video will show you how the integration works covering: Associating a process with a business object Accessing the business object values from your process Setting security and connection between PCS and ABCS Initiating PCS processes from an ABCS page Creating custom to-do list pages in ABCS to show you your tasks Creating custom task details pages in ABCS to progress tasks As you'll see, all of these are quite simple and completely declarative to achieve with the visual development approach. The combination of the products provide great value to the users of each one of those. PCS customers will love the ability to persist the data they use in their processes, and the ability to design even richer interfaces and reports. ABCS users will love the ability to automate and manage long running complex processes.       

Oracle Application Builder Cloud Service (ABCS) gives you a great way to build apps that track data, but what if your data is also involved in processes? What if you need to automate not just the data...

Visual Builder

Leveraging Oracle JET Composite Components in Oracle application Builder Cloud Service

One of the new features of Oracle Application Builder Cloud Service (ABCS) in the May 2017 release is integration with Oracle JET's Composite Components Architecture (JET CCA). Based on the Web Components standard, JET CCA provides a way to define reusable UI components (with logic) that can easily be incorporated into multiple applications. The new feature in ABCS allows you to pick such components as extensions to the ABCS design time, providing an easy standard way to extend your UI capabilities. For example in the screenshot below you see a new slider component in the common components section, and how it looks like when added to the visual designer.   In this blog entry we'll start by creating a very simple JET CCA component and then see how to add it to Oracle ABCS. (Thanks goes to John Brock who helped get this sample working). To learn more about JET CCA have a look at their developer guide, and the sample in the Oracle JET Cookbook. We are going to start from that sample and build a very basic component. (For a deep guided tour of Oracle JET CCA check out Duncan's series of JET CCA blogs). Note - You are stepping into the "custom code" realm of ABCS when doing this type of integration- which means that you are in control of the integration and future upgradability of your extension. For example in the future when ABCS will adopt a newer JET version, you might need to do adjustments to your component to match the new version.  There are 5 files needed to define a component. We'll start with the loader.js file - this file provides info on the other files involved in the component. Note that in the sample we are registering "slider" as the name of the component, in this file we are also indicating which jet components we are going to use and including them in the define section. Specifically we are adding the ojs/ojslider component here. define(['ojs/ojcore', 'text!./demo-cca.html', './demo-cca', 'text!./component.json', 'css!./demo-cca','ojs/ojcomposite', 'ojs/ojslider'], function(oj, view, viewModel, metadata) { oj.Composite.register('slider', { view: {inline: view}, viewModel: {inline: viewModel}, metadata: {inline: JSON.parse(metadata)} }); } ); The next file we'll create is the component.json file. This file describes the meta data about our component. One of the key things you can define here is a set of properties that users of the components can set when they add it to their application. The nice thing in the ABCS integration is that these will show up at design time as properties in the visual editor. In our component we are defining four properties that control the title, minimum, maximum, and actual value of a slider. Note that right now ABCS is using Oracle JET 2.3 and we need to specify this in the file. { "name": "Slider", "description": "A sample Oracle JET Slider CCA", "version": "1.0.0", "jetVersion": ">=2.3.0", "properties": { "title": { "description": "Name of slider", "type": "string" }, "min": { "description": "Numeric minimum", "type": "number" }, "max": { "description": "Numeric maximum", "type": "number" }, "value": { "description": "Slider value", "type": "number" } } } Next we'll define the html file (demo-cca.html) that includes our UI. We are using regular HTML code here along with knockout.js binding of properties to values. You can use the $props prefix to refer to values of attributes we defined in the components.json file. <div data-bind="text: 'Title: '+$props.title"></div>   <input id="slider-id"      data-bind="ojComponent: {             component: 'ojSlider',             max:$props.max,             min:$props.min,             step:10,             value:$props.value             }"/>               Next there is a css file - controlling the look and feel of the component. Since we are not doing any customization on the look and feel we'll create an empty file called demo-cca.css. Next is the model file (demo-cca.js) - this file contains data and logic that can be accessed from the component. We'll create a basic file without any logic code in it. define(['knockout'], function (ko) { function model(context) { var self = this; return model; } } ) Now that you have created the 5 files - simply zip them into a single zip file. (Note - don't zip the parent directory, you want the files to be directly at the top level of the zip file). This zip file is the file you'll give to your component users. In this case to the ABCS developer. Go into your Application Settings -> Extensions in Oracle ABCS and choose to create a new UI component from zip file. Upload the zip file you just created. Then make sure to enable the component using the boolean control on the page. Switch over to the UI Designer and you'll see that there is a new component in the component palette. Drag and drop it into your page - and you'll see the HTML code. Set the properties in the property inspector and you'll see them influencing the content of your page. You can also bind the properties to the values of fields in your custom business objects. Here is a quick video showing the integration.  

One of the new features of Oracle Application Builder Cloud Service (ABCS) in the May 2017 release is integration with Oracle JET's Composite Components Architecture (JET CCA). Based on the Web...

Visual Builder

Getting Data from REST Services into Oracle Application Builder Cloud Service

In the latest version of Oracle Application Builder Cloud Service (ABCS) that we rolled out at the beginning of May we introduced a set of new code templates for creating Business Object Providers. Business Object Providers - or BOPs for short - are a mechanism that allow you to extend ABCS and have it access external REST sources of data. In the video below I'm going to show you how to use the most basic template provided for BOPs - which allows you to create a read only BOP. The template has 2 files that you need to change - one (RESTOperationProvider.js) that has the code for accessing the REST service and reading the results, and the other (RESTEntityProvider.js) has the code that defines the structure of the object you are creating. In the video I'm using this URL - https://api.github.com/users/Oracle/repos - that gets you a list of projects/repositories that Oracle owns on Github: Once you created a BOP you can add a new "external service" to your application in the data designer, and then you can use that object like you would any other. Check it out: This blog shows the basics of a read-only access, with a structure for the content that is easy to parse. Here are a couple of other blogs that will show you more advanced techniques: Reading Nested JSON Data from External REST in Visual Builder Cloud Service Create Operation for External REST in Visual Builder Cloud Service  

In the latest version of Oracle Application Builder Cloud Service (ABCS) that we rolled out at the beginning of May we introduced a set of new code templates for creating Business Object Providers. Busi...

Visual Builder

Business Logic in Oracle Application Builder Cloud Service

As you start building more complex applications in Oracle Application Builder Cloud Service, you'll might need to define more complex interactions between objects or validations on rows of data or specific fields. In the new version of ABCS that we rolled out in February we added these type of capabilities. There are several things you could do with the new Business Rules section of ABCS Triggers - allow you create logic that will be executed in specific CRUD events such as when you insert, remove or update a record. Object Validators - allowing you to define checks across multiple fields in your object Field Validators - allowing you to define a check on specific field values. Object Functions - reusable functions that can be called from the other points Note that these logic points will be running on the server side of ABCS.  In the video below I demonstrate a couple of these capabilities. You'll learn how to update one object when a specific value is set in another object's field. You'll also see how to check whether a combination of values in fields in a record is valid. Check it out: &amp;lt;p&amp;gt; &amp;lt;/p&amp;gt; Here is a screenshot of the nice logic flow editor:

As you start building more complex applications in Oracle Application Builder Cloud Service, you'll might need to define more complex interactions between objects or validations on rows of data or...

DevOps + Agile (VBS)

Automating DevOps for the Oracle Database with Developer Cloud Service and SQLcl

In the previous blog entry I showed how you can leverage Oracle Developer Cloud Service (DevCS) to manage the lifecycle of your database creation scripts (version management, branching, code reviews etc). But how do you make sure that your actual database is in synch with the changes that you make in your scripts? This is another place where DevCS can come to the rescue with the built-in continuous integration functionality it provides. Specifically with the new features for database integration including secure DB connection specification, and leveraging the powerful SQL Command Line (SQLcl) - the new command line interface to the Oracle DB - which is built-in in the DevCS build servers. In the video below I go through a process where a check-in of SQL script code change automatically initiate a build process that modifies a running database. A few points to note:   For the sake of simplicity, the demo doesn't follow the recommended step of a code review before merging changes into the master branch (you can see how to do that here). The demo automates running the build whenever a change to the scripts is done. You could also define a scenario where the build runs at a specific time every day - for example at 1am - and synch the DB to today's scripts. You can further extend the scenario shown here of dropping and re-creating objects to add steps to populate the DB with new data and even run tests on the new database. As you can see Developer Cloud Service can be a very powerful engine for your database DevOps - and it is included for free with your Oracle Database Cloud Services - so give it a try.    Related blog entries: Introduction to Liquibase and Managing Your Database Source Code Extending Oracle Database DevOps with Automated PL/SQL Unit Testing

In the previous blog entry I showed how you can leverage Oracle Developer Cloud Service (DevCS) to manage the lifecycle of your database creation scripts (version management, branching, code reviews...

DevOps + Agile (VBS)

Managing Oracle Database Code with SQL Developer, Git, and Developer Cloud Service

Are you coding SQL and PL/SQL code? Need to manage versions & branches? Want to track your to-do tasks? Need to conduct code reviews and peer programming?  Developer Cloud Service can help you! And now it comes free with your Oracle Database Cloud Service trial or license - check your service dashboard to see if you got one.  Note that even if your database is not in the cloud, but rather on-premises, you can use the same process shown in the video below. In the demo you'll learn how to: Provision a new cloud project for your team Check SQL scripts into the Git Repository in DevCS Track tasks and to-do items Branch your SQL script code Conduct code review with members of your team Merge branches of code Check it out: I blogged about this topic in the past using JDeveloper, but figured out that most of the Oracle database developers actually use SQL Developer - so I thought it would be good to give them a quick 10 minute demo of what they can do by combining the power of SQL Developer and Developer Cloud Service. (The video can also be useful to just get a basic understanding of how SQLDeveloper works with any Git repo).   More about Developer Cloud Service here. Stay tune for more blog entries on features for Database developers in Oracle Developer Cloud Service - coming soon!

Are you coding SQL and PL/SQL code? Need to manage versions & branches? Want to track your to-do tasks? Need to conduct code reviews and peer programming?  Developer Cloud Service can help you! And now...

Visual Builder

Extending Oracle HCM with Oracle Application Builder Cloud Service - It's Simple

I blogged before showing how easy it is to extend Oracle Sales Cloud using Oracle Application Builder Cloud Service. We do get a lot of customers of Oracle HCM that approach us asking if they can use the same tools to extend Oracle HCM apps. While Oracle Application Builder Cloud Service (ABCS) has the list of Oracle Sales Cloud services pre-populated in the service catalog , you can pretty easily connect ABCS to Oracle HCM services too and get data and build an application around this data. In the video demo below I'm building an application that records the details of the cars employees are allowed to bring onto campus. I leverage a REST service exposed by Oracle HCM to get the list of employees. ABCS also automates querying using the same service so you can search for a specific employee. ABCS lets me create an app with the same look and feel as Oracle SaaS displaying the specific fields that interest me in the specific layout I want. Further more I can add custom data object that tracks the details of the cars and associate it with the HCM data. Note that in the security section I'm using basic security with a fixed user for the sake of simplicity in the demo. Note however that in the selection list I can also use the currently logged in Oracle Cloud user - to synch the user of my ABCS and their HCM authorization. Check it out: Want to try it on your own - get a trial account of Oracle Application Builder Cloud Service here. 

I blogged before showing how easy it is to extend Oracle Sales Cloud using Oracle Application Builder Cloud Service. We do get a lot of customers of Oracle HCM that approach us asking if they can use...

Visual Builder

Oracle ABCS - Traversing Relationships, Conditional Navigation, Query and Update with JavaScript

Oracle Application Builder Cloud Service (ABCS) lets you do a lot of things in a declarative way, however for more complex validation and conditional logic you might need to resort to some basic coding in JavaScript. I ran into such a case with an application I was developing, and figured out that the code sample from that system will be a good way to illustrate some coding techniques in ABCS. The application I was working on allows people to register to various events. Each event has a certain capacity, so if there are too many people registered to an event, we want the rest to be added to a wait list. For each record of a person registering, we keep a reference to the event they want to attend.  So the logic flow is: Check how many open spaces are available for the event we are trying to register for. If there is space in the event, save the new person data, and show a success message. If there isn't space, update the person "Waitlisted" field to be true, save the data, and show a message saying that the person is on the wait list.  In the demo video below I'm showing how to: Define declarative conditional flow of steps based on results from custom code Traverse relationships between custom object through code Execute a conditional query and run through the results from a custom object with code Set the value for a property of a custom object through code For reference here is the complete code from the sample: require([    'operation/js/api/Conditions',    'operation/js/api/Operator'], function (Conditions, Operator) {    var lab = Abcs.Entities().findById('Lab');    var id = lab.getProperty('id');    //condition is to find a lab with the id that is in the page's drop down box    var condition = Conditions.SIMPLE(id, Operator.EQUALS, $Person.getValue('ref2Combo_Box'));    var operation = Abcs.Operations().read({        entity: lab,        condition: condition    });    //if query returned value we loop over the rows and check the capacity and registration columns    operation.perform().then(function (operationResult) {        if (operationResult.isSuccess()) {            operationResult.getData().forEach(function (oneRecord) {                if ((oneRecord.Capacity - oneRecord.Registered) < 1) {                    $Person.setValue('Waitlisted', true);                    reject("error");                } else                {                    resolve("ok");                }            });        }    }).catch(function (operationResult) {        if (operationResult.isFailure()) {            // Insert code you want to perform if fetching of records failed            alert('didnt worked');            reject("error");        }    });}); More information on the JavaScript APIs used here are in the Oracle ABCS Documentation.

Oracle Application Builder Cloud Service (ABCS) lets you do a lot of things in a declarative way, however for more complex validation and conditional logic you might need to resort to some basic...

Visual Builder

Creating Oracle Application Builder Cloud Service App Based on Oracle ADF Business Components

Oracle Application Builder Cloud Service (ABCS for short) enables you (and your business users) to create rich web and mobile apps in a quick visual way from a browser with no-coding required (but coding is possible). The UI that ABCS creates is based on Oracle JET, which many of our customers love because its responsiveness and lightness. Some Oracle ADF customers have been on the hunt for a new client-side UI solution for their apps, and Oracle JET is certainly a technology that will work for those use cases. A nice feature for Oracle ADF customers is that their data-access and business-service layer is built in a reusable way that is decoupled from the UI. And now, with the ability to expose ADF Business Components as REST service, they can use any modern UI framework to develop the UI including Oracle JET. There are already many blog entries with code samples on how to write JET apps that connect to ADF Business Components But what if we could give you the simplicity of ABCS for the UI creation, the power of JET for the UI experience, and the ability to leverage your existing investment in Oracle ADF all without writing a single line of code manually? Well, in the demo below I'll show you how you can reuse the logic you have in Oracle ADF Business Component and build a JET based UI on top of them in a declarative way with Oracle Application Builder Cloud Service. Basically you get the best of each tool - and you don't need to write a single line of code ! In the 9 minutes demo I'll show you how to: Create an ADF Business Components layer on top of Oracle Database in the Cloud - (0:00) Expose the ADF Business Components as REST service - (1:45) Deploy the REST service to Java Cloud Service (JCS) - (2:19) Create an Oracle Application Builder Cloud Service application - (6:00) Add an ADF BC REST Service as a data source to the app - (6:30) Create the user interface to your application - (7:20) (Times are indicated in case you want to skip sections you are already familiar with)  If you are interested in a bit of a background on why this is so simple, the answer is that ABCS was built to enable easy integration with Oracle SaaS leveraging the REST services they expose. To quickly build the full app with all the defaulting you are seeing in there (full CRUD with a simple drag and drop) ABCS needs to know some basic information about the data that it needs to render (primary key, data types, etc). Since Oracle SaaS is built on Oracle ADF, we built into ABCS the capability to analyze the describe that ADF BC REST services provide. This makes it dead simple to consume ADF REST service in ABCS, whether these services come from Oracle's apps - or your own ADF apps :-)  As you can see there is a great synergy between Oracle ADF, Oracle Application Builder Cloud Service and Oracle JET.  Want to try it on your own? Get a trial of Oracle Application Builder Cloud Service here. 

Oracle Application Builder Cloud Service (ABCS for short) enables you (and your business users) to create rich web and mobile apps in a quick visual way from a browser with no-coding required (but...

ADF & JDeveloper

Automatic Time-Based Dismiss for Oracle ADF Popups

This blog entry is about a nice little new feature that was introduced into ADF in the 12.2.1.1 version, and didn't get a mention in the "what's new" document. Self dismissing messages  are popping up everywhere these days (when you get an email, when you have a new calendar invite etc), and you might want to use this UI pattern in your ADF apps too. There is a new property for af:popup components - autoDismissalTimeout - that allow popups to automatically dismiss after a certain number of seconds that you can specify. This is very useful for all sort of messages that you want to show to the user, but you don't want to require the user to do any activity to dismiss. Here is an example of such a message that you can associate with a save button: And here is the code you'll need to do this:             <af:popup id="p1" animate="true" autoDismissalTimeout="2">                 <af:panelGroupLayout id="pgl1" layout="horizontal">                     <af:image source="stat_confirm_16.png" id="i1"/>                     <af:outputFormatted value="Your changes have been saved" id="of1"/>                 </af:panelGroupLayout>             </af:popup> One more (small) reason to adopt the new versions of Oracle ADF! 

This blog entry is about a nice little new feature that was introduced into ADF in the 12.2.1.1 version, and didn't get a mention in the "what's new" document. Self dismissing messages  are popping up...

ADF & JDeveloper

New Capabilities for the Status Meter Component in ADF

While building a demo of new Oracle ADF features for my OOW session, I came across some nice new functionality in the dvt status meter gauge component (dvt:statusMeterGauge), specifically the round one which has become quite popular in various Oracle Alta UIs. Turns out you can turn the dial and cut it so it shows just parts of a circle. By adding thresholds you can use it as a replacement for the dial gauge. Here is how it can look:  Here is the code used:                             <dvt:statusMeterGauge orientation="circular" inlineStyle="width:150px; height:100px;"                                                   id="statusMeterGauge1" maximum="25000"                                                   value="#{bindings.Salary.inputValue}" minimum="0" startAngle="180" angleExtent="180"                                                   title="Salary">                                 <dvt:gaugeMetricLabel rendered="true" id="gml1"/>                                 <dvt:gaugeThreshold id="gt1" maximum="4000" color="red"/>                                 <dvt:gaugeThreshold id="gt2" maximum="6000" color="yellow"/>                                 <dvt:gaugeThreshold id="gt3" maximum="20000" color="green"/>                             </dvt:statusMeterGauge>

While building a demo of new Oracle ADF features for my OOW session, I came across some nice new functionality in the dvt status meter gauge component (dvt:statusMeterGauge), specifically the round...

Oracle OpenWorld 2016 and Where You'll Find Me

It's that time of the year - Oracle OpenWorld is taking place starting on Sunday - and my calendar is full of activities. I'm going to be presenting on multiple tools and frameworks including sessions on Oracle Application Builder Cloud Service, Oracle JDeveloper and Oracle ADF, Oracle Developer Cloud Service and a session discussing which dev framework and tool is right for you.  In case you want to catch me at #OOW16 here is my schedule: Simplified Multichannel App Development for Business Users [CON2884] Monday, Sep 19, 1:45 p.m. | Moscone West - 2005 - A session where I'll demo how easy it is to create and host your own applications with Oracle Application Builder Cloud Service. Oracle Application Development Framework and Oracle JDeveloper: What’s New [CON1226]Tuesday, Sep 20, 4:00 p.m. | Moscone West - 2018 - A quick review of the new features we added in the 12.2.* releases of JDeveloper and ADF Oracle Development Tools and Frameworks: Which One Is Right for You? [MTE6650] Tuesday, Sep 20, 6:15 p.m. | Moscone South - 301- A session for all of those who are not sure which technology is right for them, or for those who want to ask me "is Oracle [fill in the product name] dead?" A Guide to Cloud-Based Agile Development Methodology Adoption [CON1947]Wednesday, Sep 21, 12:15 p.m. | Moscone West - 2018 - A demo focused session that show cases how Oracle Developer Cloud Service helps your team adopt agile development.  No Code Required: Application Development and Publishing Made Easy [HOL7402] Tuesday, Sep 20, 11:30 a.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor)Monday, Sep 19, 4:15 p.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor) - Your two chances to try out  the new Oracle Application Builder Cloud Service and develop your first app Agile Development Management and Continuous Integration Simplified [HOL7403]Wednesday, Sep 21, 8:00 a.m. | Hotel Nikko - Nikko Ballroom III (3rd Floor) - Your chance to manage a whole development team agile process using Oracle Developer Cloud Service I'm also going to be in the mobile theater in the mobile area in the demo ground on Tue and Wed at 10:30 doing a quick demo of ABCS and its mobile capabilities. In between these sessions, you'll be able to find me at the Oracle Demoground doing some shifts in the Oracle ADF booth (which is in Moscone South far left corner) - the rest of our pods are close by including JET, DevCS, ABCS and even Forms :-) And if I'll have any spare time, I'll try and catch some of the other session on this list of Dev tools and framework sessions See you next week.

It's that time of the year - Oracle OpenWorld is taking place starting on Sunday - and my calendar is full of activities. I'm going to be presenting on multiple tools and frameworks including sessions...

DevOps + Agile (VBS)

CI, DevOps and ALM for Oracle SOA Suite with Oracle Developer Cloud Service

We have a lot of developers who are using JDeveloper to develop applications with Oracle SOA Suite, and in this blog I wanted to show them how the combination of JDeveloper along with Oracle Developer Cloud Service can help automate their whole development and delivery lifecycle. One unique aspect of Developer Cloud Service is that it has an instance of JDeveloper available in the build environment. This allows customers who are building Oracle SOA artifacts to leverage the OJDeploy mechanism to package their applications as part of a continuous integration cycle just like they do during development time. With the improved DevCS integration that we added in JDeveloper 12.2.1, developers can go beyond integration with the Git server offered by DevCS and can now interact with the DevCS task tracking system directly as well as associate code changes to specific tasks they are working on.   In this 10 minutes video I show: Creating Ant based builds for Oracle SOA artifacts Automating Continuous Integration build and packaging for Oracle SOA from Developer Cloud Service Managing SOA project code with Git and Developer Cloud Service  Tracking tasks from JDeveloper and monitor agile development in Developer Cloud Service By the way, for those who rather use Maven to automate their builds - this is totally possible and supported in DevCS as well. There is a set of videos that show you how to do that here.  (If you haven't seen how quick and easy it is to create a DevCS project, create a git repo, track tasks and create agile team boards - see this video and this one too). Note that developers get access to Developer Cloud Service with every subscription to the Oracle SOA Cloud Service.  Here are the two ant files used in the video: Note that in the build.properties you'll want to change the application and project names to match the ones you are working on. As you see in the video the build.xml is generated for you automatically and you just need to add the line: <property environment="env" /> build.properties oracle.commons=../../../../oracle_common/oracle.commons=../../../../oracle_common/install.dir=../../../..oracle.home=${env.ORACLE_HOME_SOA_12_2_1}oracle.jdeveloper.workspace.path=${env.WORKSPACE}/e2e-1201-composites.jwsmiddleware.home=${env.MIDDLEWARE_HOME_SOA_12_2_1}workspace=${env.WORKSPACE}oracle.jdeveloper.ant.library=${env.ORACLE_HOME_SOA_12_2_1}/jdev/lib/ant-jdeveloper.jaroracle.jdeveloper.deploy.dir=${env.WORKSPACE}/ProcessOrder/deployoracle.jdeveloper.ojdeploy.path=${oracle.home}/jdev/bin/ojdeployjavac.nowarn=offoracle.jdeveloper.project.name=ProcessOrderoracle.jdeveloper.deploy.outputfile=${env.WORKSPACE}/e2e-1201-composites/ProcessOrder/deploy/${profile.name}output.dir=classesjavac.deprecation=offoracle.jdeveloper.deploy.profile.name=*javac.debug=on build.xml <?xml version="1.0" encoding="UTF-8" ?><!--Ant buildfile generated by Oracle JDeveloper--><!--Generated Jul 25, 2016 5:11:09 PM--><project xmlns="antlib:org.apache.tools.ant" name="ProcessOrder" default="all" basedir="."> <property environment="env" /> <property file="build.properties"/> <path id="library.SOA.Designtime"> <pathelement location="${install.dir}/soa/plugins/jdeveloper/extensions/oracle.sca.modeler.jar"/> </path> <path id="library.SOA.Runtime"> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/fabric-runtime.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/tracking-api.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/tracking-core.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.fabric_11.1.1/edn.jar"/> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.mgmt_11.1.1/soa-infra-mgmt.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fabric-common-api.jar"/> </path> <path id="library.BPEL.Runtime"> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.bpel_11.1.1/orabpel.jar"/> </path> <path id="library.Mediator.Runtime"> <pathelement location="${install.dir}/soa/soa/modules/oracle.soa.mediator_11.1.1/mediator_client.jar"/> </path> <path id="library.MDS.Runtime"> <pathelement location="${oracle.commons}/modules/oracle.mds/mdsrt.jar"/> </path> <path id="library.BC4J.Service.Runtime"> <pathelement location="${oracle.commons}/modules/oracle.adf.model/adfbcsvc.jar"/> <pathelement location="${oracle.commons}/modules/oracle.adf.model/adfbcsvc-share.jar"/> <pathelement location="${oracle.commons}/modules/commonj.sdo.backward.jar"/> <pathelement location="${oracle.commons}/modules/commonj.sdo.jar"/> <pathelement location="${oracle.commons}/modules/oracle.toplink/eclipselink.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fmw.wsclient-impl.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fmw.jrf-ws-api.jar"/> <pathelement location="${oracle.commons}/modules/com.oracle.webservices.fmw.web-common-schemas-impl.jar"/> </path> <path id="classpath"> <path refid="library.SOA.Designtime"/> <path refid="library.SOA.Runtime"/> <path refid="library.BPEL.Runtime"/> <path refid="library.Mediator.Runtime"/> <path refid="library.MDS.Runtime"/> <path refid="library.BC4J.Service.Runtime"/> </path> <target name="init"> <tstamp/> <mkdir dir="${output.dir}"/> </target> <target name="all" description="Build the project" depends="deploy,compile,copy"/> <target name="clean" description="Clean the project"> <delete includeemptydirs="true" quiet="true"> <fileset dir="${output.dir}" includes="**/*"/> </delete> </target> <target name="deploy" description="Deploy JDeveloper profiles" depends="init"> <taskdef name="ojdeploy" classname="oracle.jdeveloper.deploy.ant.OJDeployAntTask" uri="oraclelib:OJDeployAntTask" classpath="${oracle.jdeveloper.ant.library}"/> <ora:ojdeploy xmlns:ora="oraclelib:OJDeployAntTask" executable="${oracle.jdeveloper.ojdeploy.path}" ora:buildscript="${oracle.jdeveloper.deploy.dir}/ojdeploy-build.xml" ora:statuslog="${oracle.jdeveloper.deploy.dir}/ojdeploy-statuslog.xml"> <ora:deploy> <ora:parameter name="workspace" value="${oracle.jdeveloper.workspace.path}"/> <ora:parameter name="project" value="${oracle.jdeveloper.project.name}"/> <ora:parameter name="profile" value="${oracle.jdeveloper.deploy.profile.name}"/> <ora:parameter name="nocompile" value="false"/> <ora:parameter name="outputfile" value="${oracle.jdeveloper.deploy.outputfile}"/> </ora:deploy> </ora:ojdeploy> </target> <target name="compile" description="Compile Java source files" depends="init"> <javac destdir="${output.dir}" classpathref="classpath" debug="${javac.debug}" nowarn="${javac.nowarn}" deprecation="${javac.deprecation}" encoding="UTF8" source="1.8" target="1.8"> <src path="SOA/SCA-INF/src"/> </javac> </target> <target name="copy" description="Copy files to output directory" depends="init"> <patternset id="copy.patterns"> <include name="**/*.GIF"/> <include name="**/*.JPEG"/> <include name="**/*.JPG"/> <include name="**/*.PNG"/> <include name="**/*.cpx"/> <include name="**/*.dcx"/> <include name="**/*.ejx"/> <include name="**/*.gif"/> <include name="**/*.ini"/> <include name="**/*.jpeg"/> <include name="**/*.jpg"/> <include name="**/*.png"/> <include name="**/*.properties"/> <include name="**/*.sva"/> <include name="**/*.tag"/> <include name="**/*.tld"/> <include name="**/*.wsdl"/> <include name="**/*.xcfg"/> <include name="**/*.xlf"/> <include name="**/*.xml"/> <include name="**/*.xsd"/> <include name="**/*.xsl"/> <include name="**/*.exm"/> <include name="**/*.xml"/> <exclude name="build.xml"/> </patternset> <copy todir="${output.dir}"> <fileset dir="SOA/SCA-INF/src"> <patternset refid="copy.patterns"/> </fileset> <fileset dir="."> <patternset refid="copy.patterns"/> </fileset> </copy> </target></project>

We have a lot of developers who are using JDeveloper to develop applications with Oracle SOA Suite, and in this blog I wanted to show them how the combination of JDeveloper along with Oracle Developer...

Visual Builder

Extending Oracle SaaS with Oracle Application Builder Cloud Service - Simplified PaaS for SaaS

One of the focus area for us when developing the new Oracle Application Builder Cloud Service (ABCS) was to create a tool that would make it very simple to enrich Oracle SaaS applications. This integration is a key part of Oracle's PaaS for SaaS offering - where we have unique capabilities in our Platform as a Service offering for our Software as a Service customers. With ABCS it is very easy to pick up objects from Oracle SaaS (through the built in service catalog) and then design new web and mobile interfaces that show data from those. In addition you can then add your own custom fields and related objects with additional data you want to track. Once your application is complete - you can then either run it as a stand-alone app, or embed it into an Oracle SaaS interface.  I wrote two blogs and recorded two videos that show you the basics. Creating Oracle ABCS application connected to Oracle SaaS Embedding Oracle Application Builder Cloud Service Apps in Oracle Sales Cloud &lt;span id=&quot;XinhaEditingPostion&quot;&gt;&lt;/span&gt; These videos are part of the new Oracle Application Builder Cloud Service YouTube Channel And the blogs are published on the Oracle Application Builder Cloud Service OTN Community We have more tutorials there to help you go even further - so check them out! 

One of the focus area for us when developing the new Oracle Application Builder Cloud Service (ABCS) was to create a tool that would make it very simple to enrich Oracle SaaS applications. This...

DevOps + Agile (VBS)

Continuous Integration for Database Developers - Updated

[Update Feb 2017 - new SQLcl functionality in Developer Cloud Service makes the "deployment" step even simpler - see this blog entry.] About a year ago I posted a demo showing how to manage the full development lifecycle of your database code with the help of Developer Cloud Service. Since then we released new versions of both Developer Cloud Service and JDeveloper that make the experience even smoother and add more features - so I figured I'll record a small updated demo. In this demo I'm starting from an existing project that has a list of tasks being tracked in a development sprint in the new Agile tab in Developer Cloud Service - which gives you a great view of your development effort and progress.  (If you want to see how you create the initial project and add issues to it check out the previous demo).  A few new things you'll see in this demo: The new Agile/Sprint management dashboard in Developer Cloud Service Task tracking integration in JDeveloper Updating definition of database objects in JDeveloper and generating SQL scripts Branching Git repositories Code review for SQL files Build automation for DB changes with Ant - including deployment to a cloud database Note that in this video I'm using a cloud instance of an Oracle database where port 1521 is open for SQLNet communication. The instructions for opening this port for communication on an Oracle Cloud Database are here. Another approach that you can take is to use scripts that execute commands using SSH on the Database Cloud Service - you can see this approach in action in this video showing Developer Cloud Service managing an Oracle APEX Lifecycle.   The Ant script used in the sample is:  <?xml version="1.0" encoding="UTF-8" ?><project xmlns="antlib:org.apache.tools.ant" default="init">  <target name="init">    <tstamp/>  </target>  <path id="antclasspath">    <fileset dir=".">      <include name="ojdbc7.jar"/>    </fileset>  </path>  <target name="deploy">    <sql driver="oracle.jdbc.OracleDriver" userid="C##xxxx" password="xxxx"         url="jdbc:oracle:thin:@xxx.xxx.xxx.xxx:1521:ORCL" src="./database/DATABASE1/dbcreate.sql"         classpathref="antclasspath" onerror="continue"/>  </target></project> Note that you need the Oracle JDBC jar file to be accessible from the Ant script - I just included it in my git repository. If you like to try this out with your own database development project - get a trial of Oracle Developer Cloud Service here. 

[Update Feb 2017 - new SQLcl functionality in Developer Cloud Service makes the "deployment" step even simpler - see this blog entry.] About a year ago I posted a demo showing how to manage the full...

ADF & JDeveloper

Calling REST Services from Application Builder Cloud Service

[Update May 2017 - There are new features making the consumption of REST service easier - check out this blog entry about BOPs] One of the frequent requests we get when we demo ABCS is - can I invoke some external functionality that is exposed as a REST service and pass parameters to it. Well, with a minimal amount of JavaScript coding you can do it in the current version.  I recorded the demo below that shows you how to do that. I'm leveraging a public REST API that github exposes to get a list of repositories for a user. The service is available at https://api.github.com/users/oracle/repos I then design an ABCS page that has a parameter field, a button that invokes the REST/JSON call, and a placeholder for results. It looks like this:    In addition the video also shows some other techniques that are useful, including:   How to create a new blank data entry page How to add custom component that renders HTML content How to add a button that calls a REST service How to pass a parameter to the JavaScript custom code How to set a page to be the default page of the app How to stage your application for external testing   &amp;amp;amp;amp;amp;lt;span id=&amp;amp;amp;amp;amp;quot;XinhaEditingPostion&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;gt; It seems that right now you are restricted to accessing REST services that are secured over HTTPS protocol (which is a good thing). Note that you of course don't have to stage the app to see it run, you can just go into live mode, or run it to see it working. I just wanted to make sure I have a demo out there that shows how staging works. The JavaScript snippet I'm using in the video is:  $.getJSON("https://api.github.com/users/"+ +"/repos", function(result){ $.each(result, function(i, field){ $('[name="myOutput"]').append(field.name + " ");   });         }); resolve();  If you'll actually add a $('[name="results"]').empty();  as the first link, it will clear the field for you each time you re-press the button.   

[Update May 2017 - There are new features making the consumption of REST service easier - check out this blog entry about BOPs] One of the frequent requests we get when we demo ABCS is - can I invoke...

DevOps + Agile (VBS)

Agile Development with Oracle Developer Cloud Service and JDeveloper 12.2.1

I blogged in the past about using Oracle Developer Cloud Service (DevCS) together with JDeveloper/ADF to manage your code and automate your builds. Since I wrote those blog entries, we released a new version of JDeveloper (12.2.1) that added deeper integration with the Developer Cloud Service functionality for tracking tasks/issues. In parallel Developer Cloud Service also added various features with one of the new areas being covered is managing sprints and an agile development processes.  I thought it might be interesting to show some of the new features of both products working togethers. In the video below you'll see how to: Connect to DevCS and its projects from inside JDeveloper Leverage the Team view in JDeveloper (tasks, builds, and code repositories) Interact with Tasks/Issues in JDeveloper Handle Git transactions Associate code commits with specific tasks Monitor team activity in the Team Dashboard Create Agile boards and manage sprints in Developer Cloud Service One other interesting feature I'm not showing above is the ability to do code reviews on your code by team members - before those are merged into your main code line. If you want to try Developer Cloud Service out, just get a trial account of the Oracle Java Cloud Service - and you'll get an instance of the Developer Cloud Service that you can use to test this new way of working. 

I blogged in the past about using Oracle Developer Cloud Service (DevCS) together with JDeveloper/ADF to manage your code and automate your builds. Since I wrote those blog entries, we released a new...

ADF & JDeveloper

Developing with Oracle MAF and Oracle ADF Business Components - The REST Edition

When Oracle ADF Mobile was released over 3 years ago, one of the first blogs I created on this topic showed how to leverage Oracle ADF Business Components to access a server database and create a mobile front end on top of it. Since then both frameworks have matured, and we learned some best practices doing implementations internally and for customers. Today I'm going to show you a better way to build this type of applications, specifically leveraging REST as the communication protocol between the ADF backend and the Oracle MAF front end. REST based integration performs much better than SOAP for this mobile scenario, and as you'll see development is as simple. Specifically I'm leveraging the Oracle A-Team Mobile Persistence Accelerator (AMPA) JDeveloper Extension- this extension simplifies MAF's interacting with REST backends, and has some cool extra features if your  REST services are based on ADF BC. I used JDeveloper 12.2.1 to expose REST services from my ADF Business Components.  If you are not familiar with how to do that, see this blog on exposing ADF BC as REST services, and then this blog about enabling CORS for ADF Business Components. The video below picks up the same application (Application14) and continues from where the previous two ended.  Now let's see the MAF development part: As you can see, it is quite easy to create your MAF UI. The AMPA extension does a lot of work for you making the access to the REST backend as easy as possible. (thanks goes out to Steven Davelaar). The AMPA extension can also generate a complete UI for you - so you can give that wizard a try to if you are  looking for even more productivity. 

When Oracle ADF Mobile was released over 3 years ago, one of the first blogs I created on this topic showed how to leverage Oracle ADF Business Components to access a server database and create a...

ADF & JDeveloper

Doughnut Chart - a Yummy Addition to Oracle ADF Faces

Another new feature in Oracle ADF 12.2.1 is the new Doughnut Chart capability. It looks like this: When I first tried to create this one, I couldn't find the option for doughnut chart in the JDeveloper wizard. Then I was told that a doughnut is just a pie with a hole in the center - so you actually just need to create a pie chart, and then specify some properties. And indeed, if you'll look at the property inspector for pie charts you'll see a few new properties you can leverage.  For example there is the InnerRadius property - that expects a value between 1 and 0 - this controls how big is the hole in your doughnut. Another nice capability is the you can put some filling in your doughnut - basically put some text that will go in the middle empty area. You do this by using centerLabel property. In the example above I used the center of the doughnut to report the total salary of a department - using a groovy sum expression in the Departments ViewObject - learn how here. (Don't forget to use the centerLabelStyle property to assign it a bigger font - a best practice from the Oracle Alta UI book). Here is the code from the JSF page: <dvt:pieChart selectionListener="#{bindings.EmployeesView4.collectionModel.makeCurrent}" dataSelection="single" id="pieChart1" var="row" value="#{bindings.EmployeesView4.collectionModel}" centerLabel="Total Salary: #{bindings.SumSalary.inputValue}" innerRadius="0.7" centerLabelStyle="font-size:large;" title="Salary BreakDown" sliceLabelPosition="inside"> <dvt:chartLegend id="cl1" position="bottom"/> <dvt:pieDataItem id="di1" label="#{row.LastName}" value="#{row.Salary}"/></dvt:pieChart> Try it out - it's a yummy new addition to Oracle's set of bakery based charts. 

Another new feature in Oracle ADF 12.2.1 is the new Doughnut Chart capability. It looks like this: When I first tried to create this one, I couldn't find the option for doughnut chart in the JDeveloper...