X

The Visual Builder Cloud Service Blog

Recent Posts

Oracle Visual Builder Cloud Service

Navigating Between Pages and Flows

Flows are a feature in Visual Builder that can provide encapsulation that is smaller that the whole app but bigger than a page. A visual builder app has one or more root pages that define the shell and navigation for your app. These root pages load one or more flows in the main content area, and each flow has a default entry page that gets displayed when it is loaded. Flows do impose certain limitations on your app, and the most important one regards navigation. Currently the Visual Builder design time only allows you to navigate between pages inside a flow or back up to a root page. It does not allow you to navigate directly to a different flow, or to deep link to a page inside that flow. For example, if you have Customers in on flow, and Orders in another, and you want to link from a particular Order's page to the related Customer's page, you can't do it through the UI yet.  For this reason, we recommend that you put all of the related pages that need to link to each other inside a flow. Unfortunately, sometimes you can't. For example the Mobile Application template requires you to have one flow for each navigation button. The navigation pattern recommended in the Learning Path also assumes each nav link goes to a separate flow.  So let's take a look at how we can navigate from one flow to another using custom events: Download the sample for the Role-Based Security lesson, since it has the navigation bar already implemented. Import the app into VB and call it something like ExpenseReport_NavigateBetweenPages. Under the admin flow, create a new page called newpage. Add a paragraph tag to the page and change the text to "You made it!" Open main > main-start and add a hyperlink at the top of the page. Now we're ready to wire up the navigation. Open up root pages > shell. We're going to create a custom event on the shell page that will call the navigateToPage action and pass in the required parameters. Then we'll set up the hyperlink on main-start to fire this event and pass in the page it wants to navigate to. Click the Events tab and click + Event Listener. Click the + sign next to Other Events and name your event customNavEvent. Then click Select. Select navigateToPage action chain and click Finish. In the list of events, select customNavEvent > navigateToPage. In the Property Inspector, click Assign above Input Parameters. Set navigate to true and page to $event. Make sure both are set as Expression and not Static Text. Click Save. Now go back to main-start, select the hyperlink, and in the Events tab of the Property Inspector, use the quickstart to generate an action for the the click event. Drag a Fire Custom Event action onto the chain. Set the name to customNavEvent and set the payload to admin/admin-newpage. Run the app and click the hyperlink. admin/admin-newpage opens. Passing a Parameter But what about if the page we're navigating to has a mandatory input parameter? How do I pass that in when navigating via the custom event. Never fear - payload is an object so we can pass in anything we like.  Go to admin/newpage and create a new variable called name. Mark it as a required input parameter that gets passed in the URL. Change the text in your Paragraph to {{ "You made it, " + $page.variables.name }} Go back to the main-start/HyperlinkClickChain editor and click the {} Change the fireCustomEvent1 action to: "actions": { "fireCustomEvent1": { "module": "vb/action/builtin/fireCustomEventAction", "parameters": { "name": "customNavEvent", "payload": { "name": "john", "page": "admin/admin-newpage" } } } } Go to the shell page and open the Actions tab. Open the navigateToPage action chain. Click the variables tab and enter a new variable called name. Mark it as a required input parameter in the Property Inspector. Switch to the code view by clicking the {} button in the Action Chain Editor. Change the navigateToPage1 action to the following: "navigateToPage1": { "module": "vb/action/builtin/navigateToPageAction", "parameters": { "history": "push", "page": "[[ $variables.page ]]", "params": { "name": "{{ $variables.name }}" } } } Go back to the shell page and open the Events tab. Select customNavAction > navigateToPage and in the Property Inspector click the Assign link for the Input Parameters. Map name to $event.name and page to $event.page. Again, mark each as an Expression, not Static content. Run the app again. When you navigate to the page, it should say "You made it john".  

Flows are a feature in Visual Builder that can provide encapsulation that is smaller that the whole app but bigger than a page. A visual builder app has one or more root pages that define the shell...

Oracle Visual Builder Cloud Service

Debugging Visual Builder Mobile Apps on Android

Oracle Visual Builder lets you create mobile apps that install and run on your mobile device. In the development stages you can use our live emulator to see the apps running and test them. But how do you debug them once they are running on an actual mobile device? where can you find the log console to debug them? How do you get to the browser console when your app is running on a remote device? Here is the solution for Android apps (shown to me by Laura our VB Mobile PM): 1. First install the chrome ADB extension into your Chrome browser. The extension is available here. Once installed it will add a little green Android icon to your browser's menu. 2. Connect your Android device to your computer using a USB cable, and make sure that your phone is set to support USB debugging. On most devices this will be off by default, if you haven't configured your phone already you'll need to do this probably under the "Developer Options". Google and you'll find the specific steps based on your specific device. 3. In order to debug your application you'll need to configure a build profile that is set to Debug in the "Build Type" drop down. Then use that build profile to Run your application in the emulator, build it, and then deploy it to your mobile device. Once deployed with this profile you can run your app on your mobile device. 4. Now from the chrome browser click the little green Android icon, and choose View Inspection Target. You'll see a list of connected devices and running apps - including your Visual Builder mobile app. 5. Click the inspect link below it and you'll get a nice interface replicating the UI you see on the device and the browser's console. Need more tips on how to debug an app? I wrote a previous blog that covers techniques for debugging Visual Builder apps, and these techniques are still relevant for mobile apps. You'll see the same console and network tabs above for your on-device app.

Oracle Visual Builder lets you create mobile apps that install and run on your mobile device. In the development stages you can use our live emulator to see the apps running and test them. But how do...

Oracle Visual Builder Cloud Service

Connecting VBCS to ORDS with self-signed certificates for Development

From Visual Builder 18.4.1 onwards, there is a facility for uploading trusted SSL certificates including self-signed certificates, which is normally needed during development. We have had a number of customers asking about how to use a self-signed certificate to connect to ORDS (Oracle Rest Data Services), which is a tool to create REST interfaces on top of relational data. ORDS exposes its REST APIs over an IP address, and when ORDS is installed, it simply creates a self-signed certificate for localhost.  This will not be trusted by Visual Builder when one tries to build a Service Connection to an ORDS API.  You might get an error like the one below:   If you have an ORDS URL like https://<IPAddress>/ords/pdb1/myworkspace/myhandler/my_ords_service, and are looking for a quick way to use the Service in VBCS with a self-signed certificate, here are steps that you might find handy.  However a bit of caution - these steps involve self-signed certificates in VB and only should be used in case of development not production!   Step 1 – Get the hostname for ORDS First find the ‘proper’ hostname for your ORDS IP address using the below: nslookup <ip address> This will give you the proper hostname to use for your service connections.  So instead of https://<IP address> use https://<hostname> Step 2 – Generate a self-signed certificate Create a self-signed certificate with openssl utility the above hostname as the CName and modify other attributes according to your need For e.g. openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -subj '/CN=<hostname>' This will yield two files key.pem and cert.pem Convert the key.pem to its der file as below: openssl x509 -outform der -in key.pem -out key.der Similarly convert cert.pem to its crt file openssl x509 -outform der -in cert.pem -out cert.crt Once you have these two, they need to be updated in the ORDS standalone.properties (More details can be found in the ORDS documentation) ssl.cert=/u01/app/oracle/product/ords/cert.crt ssl.cert.key=/u01/app/oracle/product/ords/key.der ssl.host=<hostname> Restart the ORDS server after making these changes. Step 3 – Upload the self-signed certificate to VB Go to Visual Builder -> Certificates (You require administrator privileges to do this).  Upload the cert.pem (or cert.crt) giving some alias.    Step 4 – Create the Service Connection Create the service connection in Visual Builder for the ORDS endpoint as you would create normally by using "Define by Endpoint" flow but remember to give the URL with the hostname instead of the IP address i.e. https://<hostname>/ords/pdb1/myworkspace/myhandler/my_ords_service.  (A detailed tutorial for creating and consuming  Service Connections is available here)   The Service Connection should now work.  Do remember that we have made Visual Builder trust all requests signed via this certificate, so it is imperative to keep this key secure, and as a best practice, never use self-signed certificates in production.          

From Visual Builder 18.4.1 onwards, there is a facility for uploading trusted SSL certificates including self-signed certificates, which is normally needed during development. We have had a number of...

Oracle Visual Builder Cloud Service

Editable Tables in Visual Builder - The Oracle JET 6 Way

A while back I blogged a solution to creating editable tables in Oracle Visual Builder, that was based on the approach that was used in the Oracle JET 5 cookbook - using a row template that you switch to show an editable version of each row. Now that Visual Builder 18.4.5 got released, we support using Oracle JET 6 in your application, and this provides a simpler way to create these type of editable tables with a column template. In the video below I show you how to leverage this approach, which also results in elimination of coding any JavaScript code. As you'll see you simply drag new UI components onto the column in the table that you want to edit. Then you make sure they point to the right values, and that they allow you to edit the value in them. Then when your table is in editMode you can simply edit the data using different types of input UI components. In the demo I also show how to add a save button that will save the data into your backend. As I mention in the video, the save approach I use is not the most efficient one. You would get better performance if you'll only save records you changed, and if you'll leverage the ability of the business objects in Visual Builder to execute multiple transactions in one go. In any case - this demo should get you started on your way to having editable tables: If you need more info on how to create the type and variables shown at the beginning of the video - check my previous blog entry on editable tables.    

A while back I blogged a solution to creating editable tables in Oracle Visual Builder, that was based on the approach that was used in the Oracle JET 5 cookbook - using a row template that you...

Oracle Visual Builder Cloud Service

New Features in Oracle Visual Builder December Release

We are happy to announce the December 2018 release of Oracle Visual Builder (known as 18.4.5). This version adds several key new features, and in addition implements many enhancements to the overall development experience in Oracle's high-productivity JavaScript development platform. Here are some of the new features you can now leverage: Integration Cloud Service Catalog If you are using Oracle Integration Cloud to connect and access data from various sources, Visual Builder now makes it even simpler to leverage those integrations. The new integrations service catalog will list integrations that are defined in your Oracle Integration Cloud, and allow you to add them as sources of data and operation easily to your VB application. This is a nice addition to the existing Oracle SaaS service catalog already available in Oracle VB. iPad/Tablet Support for Mobile Apps We extended our mobile packaging capabilities to support specific packaging for iPads in addition to iPhones. In addition, in the UI emulator VB now supports an iPad/Tablet size preview as another option in the screen sizes menu. Nested Flows To help you further encapsulate flows, Visual Builder now supports the concept of nested flows. Nested flows allow you to create sub-flows that are contained inside another flow and can be used by various pages in that "master" flow. These sub-flows are then embedded into a flow-container region on a page. At runtime you can switch the sub-flow that is shown in such a region giving you a more dynamic interface. This encapsulation also helps with scenarios of multiple developers that need to work on various sections of an application - eliminating potential conflicts. Visual Builder Add In for Excel Sometimes neither web nor mobile are the right UI for your customer, maybe they want to work with your data directly from spreadsheets - well now they can. With the Visual Builder Add in for Excel plug-in you can directly access Business Objects you created in Visual Builder from Excel spreadsheet and query and manipulate the data. The plug-in gives you a complete development environment embedded in Excel to create interactions with your business objects. JET 6 Support Visual Builder now supports the latest Oracle JET 6.0 set of components and capabilities. This applies for both design-time and run-time. Note that existing applications will continue to use their current JET version, unless you open them with the new version to do modifications - when you do open them, we'll automatically upgrade them to use JET 6. Vanity URL Visual Builder lets you define a specific URL that will be used for your published web applications. This means that if you own the URL to www.yourname.com for example - you can specify that your apps will show up using this URL. Check out the application settings for more information on this capability. But Wait There's More... There are many many other enhancements in every area of Oracle Visual Builder - you can read about them in our what's new book, or even better - just try out Visual Builder and experience it on your own!    

We are happy to announce the December 2018 release of Oracle Visual Builder (known as 18.4.5). This version adds several key new features, and in addition implements many enhancements to the overall...

Oracle Visual Builder Cloud Service

3 Tips for Using Imported Javascript with Visual Builder

In a previous article, I discussed how to import and use Javascript libraries. This has been a popular article and as such has generated a bunch of questions. In this article I am going to provide 3 tips that should address those questions and make it super easy to regularly import and use Javascript within your Visual Builder app.  1) Place your imported Javascript in the resources folder When you import your Javascript file, you select the folder for install at the time of import. In the previous article, I had imported the file into a flows folder and as such I had used a absolute path from the root of the instance to provide the location of the file. However, if you import into the resources folder you can now just reference your file by prepending "resources/" to the name of the JS file (you don't need the .js extension).   2) Use Code Insight to find the path the file Even better, you can use Code Insight to help you find the file. You invoke Code Insight with the Ctrl + Space bar. If you invoke Code Insight within the "" of the define in your custom code module you will see a Select URL... option pop up. Double click that menu option and you be presented with a empty text box to start typing the name of your file. Select the filename when it is found and hit Enter. The path will be added automatically for you and it will also remove the .js extension for you.   Don't forget to name your import in the function() of the require syntax. This is the name you will use to access your imported functions from that file. I named mine "importedjs" and as shown in the below code example I access my function using that scope - importedjs.callExternalAction define(["resources/importedjs"], function(importedjs) {   'use strict';   var PageModule = function PageModule() {};      PageModule.prototype.callImportedJSFunction = function(param)   {     return importedjs.callExternalAction(param);   }   return PageModule; }); 3) Export your custom code using AMD export syntax The last tip is the most important as I have received this question numerous times. If you are using 3rd party libraries, they likely already export their functions correctly. However if you are creating your own functions file, you need to export your functions using the AMD format. In this case AMD doesn't stand for Advanced Micro Devices but rather Asynchronous Module Definition (see Feature Image for this article). There is plenty of good material that describes the ins and outs of AMD format but I will use a simple example for this article with code shown below.  define([], function() { var exports = {}; function callExternalAction(param) {    return 'Processed value from external js: ' + param;  }; exports.callExternalAction = callExternalAction; return exports; }); The code above is setting up function(s) for export and assigning them to exported symbols. These are the names you will see when you use Code Insight on that filename as shown below. This is the basics of exporting in AMD format so if you follow this example you should be good to go.  You can download an example project at my GitHub. 

In a previous article, I discussed how to import and use Javascript libraries. This has been a popular article and as such has generated a bunch of questions. In this article I am going to provide 3...

Advanced Business Object Validation with Groovy

One of the powerful aspects of  Visual Builder's business objects is the ability to leverage Groovy code to implement complex logic for them. You can leverage Groovy in triggers, validators, and object functions - all residing under the "Business Rules" tab in Visual Builder design time. Groovy is quite a simple language, but when coding with the business objects in VB it is helpful to be aware of some unique methods that you can leverage to manipulate your business objects. Since the technology that is used for the business objects in Visual Builder is the same one used by Oracle SaaS for custom objects - the book "Sales Cloud Groovy Scripting Reference" is relevant for you.  One section that is specifically useful is the one titled "Accessing the View Object for Programmatic Access to Business Objects" as it shows you how to work with the data in a business object. Here is an example of how this can be useful. Example Suppose that we have a business object called Emp with two fields in it - name and salary. We want to verify that there are no records that have the exact same values for both name and salary. To do this we can add an object level validator (we called it checkUnique):   In this validator we add a piece of groovy code that will try and fetch existing records that have the same values as the current record we are working on (adding or modifying the record). The code needs to return true if the changes/addition are ok, and false if we want to fail the validation. The code used in our example is: def vo = newView('Emp'); vo.appendViewCriteria("name ='"+name+"' and salary = "+salary); vo.executeQuery(); def cnt = 0 while (vo.hasNext()) { vo.next() cnt = cnt + 1 } if (cnt > 1) { return false } else { return true } In line 1 we create a new instance of a view for the Emp object. In line 2 we add a criteria to the view, and in it we use the values from the current record for name and salary. Note that in the condition we use ' to surround character values. In line 3 we execute a query with this condition. In the rest of the code we are counting how many records are returned - and if it is more than 1 record we fail the validation. That's it - quite simple but powerful. P.S. If you are planning to do groovy coding, you'll want to quickly review the tips I provided in this blog entry on debugging the code using the log window in Visual Builder.    

One of the powerful aspects of  Visual Builder's business objects is the ability to leverage Groovy code to implement complex logic for them. You can leverage Groovy in triggers, validators, and...

Oracle Visual Builder Cloud Service

Managing Aggregation for Business Objects with Triggers

If you have data stored in business objects in Visual Builder you might want to present some information that requires aggregating data from multiple records. For example, if you have a list of employees and their salary, you might want to know the total number of employees and the total of the salaries. If you have a parent/child relationship you can do these type of calculations using the aggregated field functionality. For example if you have a departments table and each employee belongs to one department you can do the department level totals using aggregated fields. (You can see how to define this type of fields in this video around minute 3:45). Doing aggregations when there is no direct parent/child relationship is a bit trickier. Below I'm going to show you an approach to handling this using triggers on business objects that keep your totals always up to date. Note that one advantage of this approach is that the totals are not calculated on the fly each time you query them - rather they are kept already calculated in a dedicated business object. In the sample, I created a business object specifically for this tracking called "stats". This business objects has one record that contains the totals I need to track. I then use triggers to catch insert/update/delete operations on the employee object and update the stats object accordingly. As you'll see, we needed to resort to a bit of Groovy coding to achieve this type of updates to none related objects. You can get the base groovy code needed to update an object and a field in it by looking at the code that the visual "update record" operation creates. You can then modify this code to the exact logic you require. In the video you'll also see how you can access not just the current value of a field but also the old value of that field using the getOriginalAttributeValue(‘fieldName’)  groovy function. The code used in my update trigger is: def view1 = newView('Stats'); while (view1.hasNext()) { record1 = view1.next(); record1.totalSalary = { record1.totalSalary+salary-getOriginalAttributeValue('salary'); }.call(); } Note that in the video I didn't add the trigger for a delete event - but you can easily add this and simply have the following code in there: def view1 = newView('Stats'); while (view1.hasNext()) { record1 = view1.next(); record1.totalSalary = { record1.totalSalary-salary }.call(); record1.empCount = { record1.empCount-1 }.call(); }

If you have data stored in business objects in Visual Builder you might want to present some information that requires aggregating data from multiple records. For example, if you have a list of...

Oracle Visual Builder Cloud Service

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:   Menu List chart Gifts 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...

Oracle Visual Builder Cloud Service

Debugging and Troubleshooting Visual Builder Logic

In every development cycle, developers are going to run into situations where things are not working as expected - this is where the debugging step comes into play. Oracle Visual Builder Cloud Service  uses a multi-tier architecture - so it is likely that you'll end up with the need to debug code in each one of the layers. In this short demo we give you some tips on how to debug your applications. At its core, VBCS is a web UI tool, so for most of the UI layer debugging you are going to rely on the development tools offered to your by your browser. In the video below I'm using the Chrome browser and its development tools - but similar tools exists in other browsers too. These tools allow you to see the network traffic between your client's browser and the REST sources of data. They also provide a console that shows you error messages and notifications sent from your application. One of the things we added to VBCS is a verbose mode of output that gives you full details on what's going on in your app at every step. Another layer that you might need to debug is the business object layer that exposes the REST services. If you are developing your business objects using VBCS, then you can use the built in logging mechanism for those. In the demonstration video below you'll see how to: Monitor REST calls Show notifications with variable values in the UI Track activity and variable values in the console Log messages in the console from custom JavaScript code - with console.log() Log messages from Groovy code in your business objects - with println() Track the log of your business object layer With these tools, understanding what is happening in your application should be quite easy - and fixing errors simpler. If you are still running into problems or questions with your development process - try posting on our VBCS community forum and some of your peers might be able to help.

In every development cycle, developers are going to run into situations where things are not working as expected - this is where the debugging step comes into play. Oracle Visual Builder Cloud Service ...

Advanced Capabilities for the Table Components in Visual Builder - Tips

In this blog we'll show you how to turn-on some more advanced capabilities in table components you add to your web pages in Visual Builder Cloud Service. Specifically we'll cover, column content formatting, column resizing & reordering, line wrapping, scroll policies, and adding more columns. One thing that is worth mentioning first is that our UI gurus are not fans of tables. In general, they would recommend you'll use the list component to show collections of records. It's not just us, if you look at the UI of your facebook, twitter, instagram and even amazon product search results - all of those are not displayed as table - they show up as lists. So before you go down the table route - consider whether using lists will get you the functionality you need. If you picked up a table component, then after you used the initial quick start to bind data to it, there are a set of table and column attributes that you can use to add functionality to your table. See the following video to learn how to: Turn on Grid look and feel Reformat columns content to show in different ways (dates, pictures, gauges) Turn on column drag-and-drop reordering  Allow resizing columns Line-wrap long content in a column Control fetch size and data loading Add missing columns after you already ran the quick start Add row level actions  In the video I'm using the following values for the following attributes: Attribute Value column style white-space:normal column resizable enabled table scroll-policy-options {"fetchSize":3}   You can learn more about the table components in the JET cookbook section for the table component. And if you are interested in even more advanced capabilities you might want to check out this blog about creating editable tables in VBCS.

In this blog we'll show you how to turn-on some more advanced capabilities in table components you add to your web pages in Visual Builder Cloud Service. Specifically we'll cover, column content...

Multi-Language Translations and Locale Switching in Visual Builder Applications

Oracle Visual Builder Cloud Service enables you to build applications that supports multiple languages - with an easy way to extract hard-coded strings in your app into a file that can be translated into other languages. This enables you to use the same running app to serve customers working in multiple languages. In the demo video below we'll show you some of the key features you'll be using to make your application multilingual. Replacing hard-coded strings with pointers to the translatable source Exporting and importing arb translation files Setting the default locale of your application in the app-flow.json file Dynamically switching locale at runtime (and storing the locale on the client for future use). One correction to the video - instead of passing the locale as just "en" you should pass a complete locale with the country too - so en-US or he-IL. In the video I'm using two pieces of code (that I got from Duncan Mills) : Adding the following to the app-flow.json file to define localization: "localization": { "locale": "{{ window.localStorage.getItem('vbcs.languageSwitcherApplication.locale') || 'en' }}" } A JavaScript method used to set the variable we keep on the machine to store default locale: PageModule.prototype.setAppLanguage = function(selectedLocale){ if (selectedLocale) { window.localStorage.setItem('vbcs.languageSwitcherApplication.locale',selectedLocale); } } By the way, VBCS (and Oracle JET) also supports right-to-left languages - so for example if you add translations to Hebrew and add a button that sets the locale variable to "he" you'll get Hebrew titles. But you'll need to do one more switch which is to modify the index.html file to have dir="rtl" add to the HTML tag. Then you can get the same app to looks like this:  

Oracle Visual Builder Cloud Service enables you to build applications that supports multiple languages - with an easy way to extract hard-coded strings in your app into a file that can be translated...

Defining Multiple REST End Points in Visual Builder - A Best Practice

Visual Builder Cloud Service makes it very easy to add REST services to your application - through the "new service connection" wizard you specify the URL to any REST service and a new entry is created for you. However, here is a small tip that will make your application management and performance better when you are leveraging multiple services from the same source - gather them into a single service. A service connection in VBCS can have multiple end-point defined in it. If you just run through the wizard for adding a service - each end point will create a new service definition. The best practice is to add new endpoint definition into the same service definition when possible.  Let's work through an example: We'll use a set of services about countries available here:  https://restcountries.eu/#api-endpoints-code You'll see for example these services there: https://restcountries.eu/rest/v2/name/{name}?fullText=true https://restcountries.eu/rest/v2/alpha/{code} The right way to add both to your project is: 1. Use the "Create Service" wizard to add the first end point: Going through the wizard will end up with a place for you to define the specific end point: And once you finish this section of the wizard your service will have one end point defined: Notice that in this page there is a big blue button "+Endpoint" - and you should click that one to add the next service/endpoint: Which will bring you into a similar flow for defining the second end point: That's it quite simple - now you have a single service definition with multiple end-points. One of the advantages of this approach is that if your source server changes an address - you just have one point to update, and this will take care of all the end points. Another advantage is runtime performances - VBCS doesn't need to upload and parse multiple service defintions - rather it does it only once, and leverages the information for all the end points.    

Visual Builder Cloud Service makes it very easy to add REST services to your application - through the "new service connection" wizard you specify the URL to any REST service and a new entry...

Creating Editable Tables in Oracle Visual Builder Cloud Service

[Note - since publishing this entry, Visual Builder upgraded to use JET 6 which makes creating editables simpler - check out the new approach here.] A common request I've been getting from customers of Visual Builder is to be able to edit multiple records that are shown in a table. Oracle JET has an editable table sample that shows how to do this in their cookbook, but the translation from the JET approach to the VBCS way of doing things was a bit tricky for some. I recorded a video and included basic instructions showing you how to implement the JET sample in your VBCS application below.  Beyond just implementing the UI aspect of the editable table, you also need to define a strategy of when and how you want to save the data from the table back to the data source. In the video below I'm using an approach that is easy to implement, but is probably not the best way to implement this. I loop through all the records and update them back to the data source one-by-one. A better approach will be to keep a list of rows that were changed and only send them to be updated. Also - I'm using a button that saves the data all at once, you can alternatively use other events in the UI to save individual records - for example - maybe you'll want to save the data immediately when someone leaves a field. The point is that this demo is not a "Best practice" but rather an explanation of the basic mechanisms - you should adopt it to your use case. After this long intro, lets get into the details of what you need to do and what the video shows: Creating ArrayDataProvider variable (0:50) Populating the Array on page load with data (1:55) Basing a table on an ArrayDataProvider (3:15) How to add columns in a declarative way Adding row templates to the page - one for read and one for update row (4:04) Also shows how to manually add JET components to the page's definition Adding a function to decide which row template to show (5:55) Show how to add references to JQuery and Knockout to the function Show how to modify the function definition to be regular pagemodule function Adding a save operation (8:44) & Using a for loop in an action flow  I use the $current.index value to get to the right variable   As you can see - at the end of the day this is not too complex. It is also just scratching the surface of what you can do with the table - as the JET sample shows you can have different field types, validators and more. Some code from the sample I created: Page HTML source   Celebrities Save Page JavaScript define(['ojs/ojcore', 'knockout', 'jquery'], function(oj, ko, $) { 'use strict'; var PageModule = function PageModule() { var self = this; self._editRowRenderer = oj.KnockoutTemplateUtils.getRenderer( 'editRowTemplate', true); self._navRowRenderer = oj.KnockoutTemplateUtils.getRenderer( 'rowTemplate', true); PageModule.prototype.rowRenderer = function(context) { var mode = context['rowContext']['mode']; var renderer; if (mode === 'edit') { self._editRowRenderer(context); } else if (mode === 'navigation') { self._navRowRenderer(context); } }; }; return PageModule; });

[Note - since publishing this entry, Visual Builder upgraded to use JET 6 which makes creating editables simpler - check out the new approach here.] A common request I've been getting from customers...

Oracle Visual Builder Cloud Service

Processes in VBCS Applications - Adding Task Buttons to a Business Object Edit Page

This blog is part of the series Visual Builder Cloud Service Learning Path. In a previous lesson, we designed the process we will use in our application. If you don't have it, you can download the process and the VBCS application and import them into your environments. We assume that you've named the process Expense Approvals and have already started the process in Test mode as described in the first chapter. In this chapter, we will add buttons to the bottom of the page for each of the task actions that are available to the current user for the current expense report record.  Getting the List of Tasks The first thing we will do is add an action to the loadExpenseReport action chain that fetches the list of tasks for processDefId that is stored with this Expense Report record. We will use a Type from Endpoint to create a type and variable that match the REST payload response for storing the information in the page's model. When designing this functionality, it's best to load a record in the Page Designer that has current tasks. To do this, create a new Expense Report (this will also launch an ExpenseApproval process), then edit this record in the Page Designer by switching to Live Mode and clicking it in either the list of Expense Reports or the Task List. With EditExpenseReport open in the Page Designer, click the Variables tab. Then click Types.  Click the button to add a new type from endpoint. Select Process Objects > tasks > GET tasks and click Next. Select the top-level Response to select the entire response. You can omit the []links if you like. Click Finish. Switch the Variables tab. Add a new variable called tasks of type getTaskCollection. Switch to the Actions panel and open loadExpenseReportChain. Drag a Get Task Collection action under Assign Variables expenseReportRecord. In the Property Inspector, click alias under Input Parameters.  Enter "ExpenseApproval" for the alias. Map Page > expenseReportRecord > processDefId on the left to processInstanceId on the right. Click Save. Drag an AssignVariables action below the Get Task Collection. In the Property Inspector, click Assign next to Variables. Map getTaskCollection1 > content on the left to Page > tasks on the right.  Close the action chain editor tab. Adding the Task Buttons To dynamically bind the buttons, we're going to do the following: Add an oj-bind-if that checks that the number of tasks is greater than zero. We're going to assume that the user will always only have one task assigned and so just hard-code the first result in the array of tasks that the REST service returns. Add a for-each loop to loop over all of the tasks. We will filter out system tasks Add a button in the template of the for-each loop for performing the task. Note that for the sake of simplicity we're leaving out some things we'd probably want to do, like save the record before executing the task. Switch back to the Page Designer for the EditExpenseReport page. Drop an If component in the toolbar next to the Save and Cancel buttons. In the Property Inspector, set Test to [[ $page.variables.tasks.items.length > 0]] Drop a For Each component inside the Bind-If component. Note it may be easier for you to select the right drop target by dragging and dropping into the Structure pane rather than into the Page Designer. In the Property Inspector, set Data to [[$page.variables.tasks.items[0].actions.filter(a => a.type === 'Custom')]] and As to task. Switch to the Source View and manually enter an oj-button in the template for the oj-bind-for-each element. (A bug prevents you from dropping the button using the Design view.) Switch back to the Design view. In the Page Structure view select the button so that you can see its properties in the Property Inspector. In the Property Inspector, set the Text to {{task.data.label}} Still with the Button selected, open the Events tab of the Property Inspector and click New Event -> Quick Start: 'click'. The tab with the new action chain opens. But before we can configure the action chain, we have to configure our input variables to hold the information we need. In the Action Chain editor, switch to the Variables view and create two string variables named actionId and taskId. Mark both as input variables in the Property Inspector Now let's pass in the info from the button as part of the click event. Open the EditExpenseReport page again, click the Events tab, and select the button click action that you generated with the quickstart. In the Property Inspector, click Assign for the Input Parameters. Map actionId to {{ $current.data.id }} and taskId to {{ $current.data.taskId }}. Click Save. Go back to the action chain editor for the ButtonClickAction1 and drop a Perform Task action onto the action chain. In the Property Inspector for the Perform Task action, click Assign for Parameters. Assign actionId on the left to id on the right. Assign taskId on the left to taskId on the right. Click Save. Drop a Navigate action under the Perform Task action. In the Property Inspector, click Select Target > Peer Page > main-start. Test the application by creating a new expense report, checking for the Approve task in the task list, then going to its Edit screen and performing the action with the buttons.  

This blog is part of the series Visual Builder Cloud Service Learning Path. In a previous lesson, we designed the process we will use in our application. If you don't have it, you can download the...

Oracle Visual Builder Cloud Service

Processes in VBCS Applications - Adding a Task List

This blog is part of the series Visual Builder Cloud Service Learning Path. In a previous lesson, we designed the process we will use in our application. If you don't have it, you can download the process and the VBCS application and import them into your environments. We assume that you've named the process Expense Approvals and have already started the process in Test mode as described in the first chapter. In this chapter, we will add a Task List that shows all of the currently active tasks for the logged in user. VBCS contains a quickstart to populate a table with a list of tasks for the current user and drop-down of available actions for each given task. The tricky part is hooking up the task list to the correctly list information from the business object, like the expense request name, and to link to the correct Edit page for the business object record. We do this by storing the information we pass into the PCS business object in the properties of the tasks. Configuring Tasks to Propagate Business Data We're going to highjack some of the standard properties of the tasks to pass business object informaiton.  (Note, in an upcoming release of PCS you'll be able to get fetch any PCS business object field with the list of tasks.) In PCS, open the ExpenseApproval process in the editor. Select the Approve Request task. Then click the menu icon and select Data Association. Map name and id from ExpenseApproval > Data Object > expenseReport on the left to title and longSummary from execData on the right. Then click Apply. Do the same for the Resubmit action. Save, publish, and test the process.  Adding the Task List to the Application We will add the task list by just dropping a table in the mytasks page and hooking it up to a ProcessDataProvider. Then we'll use the quickstart to add the Task Actions buttons. In VBCS, open the Web Apps tab and click the mytasks page to open it in the Editor. Drop a table component on the page.  In the Property Inspector for the table, choose the quickstarts tab and click Add Data. Choose Process Objects > task > GET tasks as the endpoint and click Next. Select the following columns:  label creationDate creationUser state Expand the query parameters and select the alias parameter. In the field at the bottom of the editor, type in "ExpenseApproval". Make sure to include the quotation marks. Click Finish. Preview the application and create a few records. Your task list table will look something like this: Select the table in the Page Designer and switch to the Data tab in the Property Inspector. Reorder and rename the columns so that they say: Expense Report Created By  Created On  Status Drag and drop an Input Date component onto the Created On column in the Page Designer. The display switches to correctly display as a date. Linking a Task to an Edit Page Now we'll link the values in the Expense Report column to the correct Edit page for the expense report record. In the Page Designer, drag and drop a Hyperlink component onto the Expense Report column in the table. The values turn into links. Click any of the column hyperlinks to select them in the Property Inspector. In the Events tab click New Event > Quick Start: 'click'. Before you can hook up the action chain, we have to pass in the ID of the expense report. Remember in PCS we mapped that into the longSummary field of the tasks. The REST call to the GET /tasks returns a payload with a field called description, which contains the longSummary field from the task. Go back to the my-tasks page and click the Events tab. In the Property Inspector, click key under Input Parameters. Select the key parameter in the right side of the dialog. In the field at the bottom of the type in $current.row.description. Click Save. Switch back to the HyperlinkClickAction tab. If you've closed it, you can find it in the Actions tab of the mytasks page. Drag a Navigate action onto the action chain. Click Select Target > Peer Page > EditExpenseReport. In the Property Inspector, click expenseReportId under Input Parameters. Map key to expenseReportId and click Save. Preview the mytasks page again. Click any of the links in the task list. The application navigates to the correct page. Adding a Task Actions Button Select the task list table in the Page Designer.  Open the Quick Starts panel of the Property Inspector and click Add Task Actions. Accept the default information and click OK. The Task Actions button is added above the list of tasks. Preview the page and select any task, then open the menu to choose from a list of actions to perform on the task. In the next section, we look at how to add Task buttons to the Edit page itself.

This blog is part of the series Visual Builder Cloud Service Learning Path. In a previous lesson, we designed the process we will use in our application. If you don't have it, you can download the...

Processes in VBCS Applications - Starting a Process from a VBCS Application

This blog is part of the series Visual Builder Cloud Service Learning Path. In the previous lesson, we designed the process we will use in our application. If you don't have it, you can download the process and the VBCS application and import them into your environments. We assume that you've named the process Expense Approvals and have already started the process in Test mode as described in the last chapter. In this tutorial, we'll look at how to start a process from our ExpenseReport VBCS application and pass in the required information as part of the REST call. This entails the following steps: Registering an Alias for the process in VBCS. This will allow us to reference the process without having to make changes to our code when we publish our application. Calling the Start Process REST API passing in the info that we marked as required on the Start message in the process. PCS needs to know the version and mode of the application so that it can correctly configure the REST URL to call back into VBCS business object REST endpoints. It also needs to have the name and id of the expense report item so we can correctly configure the Task List in VBCS. Storing the identifier of the the process we started back in the VBCS business object. This is so we can associate a specific expense report record with the correct instance of the approval process and show the right tasks for that record when we view its Edit screen. Registering the Process Alias In the Expense Report application in VBCS, click the Processes tab on the left. Then click the + sign at the top of the Processes tab. Select ExpenseApproval in the list, click Add, then click Close. If it doesn't appear, make sure Include test instances in selected and you have activated the process in Test mode in PCS as described in the last chapter. If it still doesn't show, try refreshing VBCS and opening the Register Deployed Process window again. Editing the CreateExpenseReport Action Chain to Start the Process Now we need to edit the create expense report action chain to do the following: Save the Expense Report record Save the record in a temporary action chain variable Call the Start Process REST endpoint, passing in the required attributes Store the processInstanceId from the response to the Start Process call into our temporary variable Call the PATCH REST endpoint for the Expense Report record we just created, passing in our temporary variable So let's do this now. In the Web Apps window, open expenses > flows > main > CreateExpenseReport.  Open the Actions tab, click the createExpenseReport action. Click the Variables tab in the left of the Action Chain Editor. Add a variable called patchPayload of type updateExpenseReportRequest. Click the Action Chain tab in the left of the Action Chain Editor to view the steps of the action chain again. Drag an Assign Variables action to the success path on the far left of the action chain. In the Property Inspector, click Assign next to Variables. Map Results > createExpenseReport > body to Action Chain > patchPayload. Click Save. Drag a Start Process action under the Assign Variables action you just added. In the Property Inspector, click Select Process.  Select Process Alias > ExpenseApproal > Receive Message In the Property Inspector, click startPayload under Input Parameters. Map id and name from Results > createExpenseReport > body on the left to id and name from Parameters > startPayload on the right. Click Save. Drag an Assign Variables action under the Start Process action that you just added. In the Property Inspector, click Assign next to Variables. Map Action Chain > Results > startProcess1 > content > id to Action Chain > patchPayload > processDefId on the right.  Drag a Call REST Endpoint action under the Assign Variables action that you just added. Click Select Endpoint. Select the PATCH /ExpenseReprort/{ExpenseReportId} endpoint. Under Input Parameters in the Property Inspector, click ExpenseReport_Id. Map Action Chain > Results > createExpenseReport > body > id on the left to Parameters > ExpenseReport_Id on the right. Click Save. Under Parameters in the Property Inspector, click body. Map Action Chain > patchPayload on the left to Parameters > body on the right. Click Save. Close the CreateExpenseReportChain tab. In the Page Designer for the CreateExpenseReport page, change the display text of the Save button to Submit. Test the application by entering a new expense report. In the PCS Test window, you will now see an instance in the Running Instances list. In the next chapter, we will add a Task List to the application.  

This blog is part of the series Visual Builder Cloud Service Learning Path. In the previous lesson, we designed the process we will use in our application. If you don't have it, you can download the...

Processes in VBCS Applications - Creating and Launching a Process

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll learn about how to back your VBCS application with an approval process in Process Cloud Service (PCS). PCS is included as part of Oracle Integration Cloud Enterprise, as is VBCS. In this tutorial, we'll look at how to create a process in PCS that can handle the approval process for your Expense Report application. Import this application to start the lesson. Creating the Process Here are a few key points about the process we are going to create: It is based on the Start With Message Approval template that is included in PCS. We will remove a few things to make it easier to work with. It contains a PCS Business Object called ExpenseReport that includes some key information that PCS needs to know in order to interact with the VBCS application We pass in this info by defining an ExpenseReport object as a parameter to the Start message and then mapping that data to the PCS ExpenseReport. The important thing to remember here is that the argument on the Start message only defines the shape of the data, while the Business Object in the process itself actually holds the data. Let's create our process. In the VBCS Expense Report application, open the Processes tab and click the menu button in the top right of the tab. Then click Design Processes. In the top-right corner of the Process Applications page, click Create > New Application. Name the application Expense Approvals and click Create. Click Start when a message is received. Then select Simple Message Approval Pattern, name the process ExpenseApproval, and click Create. Configuring the Process Let's remove a few things and do some basic setup.  Remove the Notify and Fulfill actions by selecting them then clicking the trash can icon above them. When you have exclusive gateways like the one after the Approve Request step, you set one path as being the default path and have to set a condition for all other paths. Let's set the condition for the No path. Select the No path then click the pencil icon. In the Property Inspector that opens at the bottom of the screen, click the pencil button next to the Condition field. Expand ExpenseApproval, select TaskOutcomeObject, and click the Insert Into Expression button.  Fill out the rest of the expression to say TaskOutcomeDataObject == "REJECT" Click OK. Creating the PCS Business Object Now let's create our ExpenseReport business object that will hold our data from the VBCS application In the left sidebar of the PCS window, click Business Types. In the top-right, click Create > New Business Object. Set ExpenseReport as the name and click Next. Insert the following fields, all strings, and click Finish. id​ name Note that id is an integer but because of some problems PCS has when dealing with integers we're just going to treat it as a string. Configuring the Start Message So above we created a business object shape. Now we have to: Use that shape to define the input parameter of the process Create an instance of the business object in the process Map the input parameter to the business object instance Let's do that now. Double-click the Receive Message node to open the property inspector. Click the pencil button next to Define Interface. Click the + button in the Arguments Definition list. Change the name to startPayload.  Click the down arrow next to string in the Type column. Expand Components and select BusinessData.ExpenseReport. Click OK. In the top-right of the Process window, click Data Objects. Click Add. In the dialog, set the name to expenseReport. Under Data Type, choose Business and select BusinessData.ExpenseReport. Click Create. Close the Data Objects dialog. Click the menu icon on the Start Message and choose Data Associations. Expand startPayload on the left and ExpenseApproval > Data Object > expenseReport on the right. Then map the id and name fields by dragging them onto the canvas in the middle. Click Apply. Running the Process in Test Mode Now let's save the project, publish our version, then run activate it in test mode. It's best to save and publish every time you make a change in the process and want to test it in VBCS. In the top-right of the Process window, click Save.  Click Publish at the top of the page. Add a comment in the Publish dialog and click Publish. Click Test in the top of the page. In the Test window, click the Activate button. Confirm the dialog that asks to add you to all roles.  Hopefully the validation window doesn't show any errors, but if so fix them in the process and save and publish again. The Running instances window will show you instances of the process that you launch from VBCS. We'll look at how to debug problems with the process in a later chapter. That's it! You're ready to hook this up to a VBCS Application, which we'll cover in the next chapter.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll learn about how to back your VBCS application with an approval process in Process Cloud Service (PCS)....

Oracle Visual Builder Cloud Service

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

Oracle Visual Builder Cloud Service

Visual Builder Mobile App Native Build Configuration Tips

A few tips to get mobile app build configuration right.   Mobile App Configuration Mobile app native build configuration is exposed as part of app settings Android build configuration 1. Keystore Generation Use keytool utility available with Java (JDK) is used to generate the keystore needed for signing your Android app. keytool is typically be available in your path, it provides a very quick way to generate a public/private key pair and store them in keystore. Here is link to detailed keytool documentation. Below is the screenshot of cmd line used to generate a keystore for my sample application for your reference: 2. Build Profile Configuration Configure the keystore values from the above as part of the Android build configuration as shown below. You can also select a specific profile as the default if you have more than one configuration. General recommendation is to have separate build profiles for development and production purposes.        iOS Configuration iOS configuration requires following guidelines from Apple to generate the provisioning profile and the certificate required for generating the IPA file. You would need a Apple Developer account to generate the above.  There are two flavors of Apple Developer accounts you could use for this purpose :  1. Standard Apple Developer Program : This is required for distributing your application via Apple AppStore.  2. Enterprise Developer Program : This allows companies to distribute apps to employees without going through the AppStore. If you are planning to build apps targeted for employees of your company this program is better suited than the standard developer program as you don't have to go through the Apple review to distribute your app. More details about the enterprise program are available here.  Generating .p12 file: A very nice step by step instructions video from Josh Morony here for creating p12 file on windows. If you are using a Mac you could create this a bit more easily following the instructions from Apple. Here is nice article I found useful for generating p12 file on Mac. Upload the p12 file to the Certificate field in the screen shot shown below. Enter the same password used while generating the p12 file in the Certificate password field. Provisioning Profile Variants: Development provisioning profile:  Typically used when running locally on a phone plugged in to your computer. This allows debugger access. A development provisioning profile allows apps signed by you to run on your registered devices.  In-House Distribution Provisioning Profile: If you want to develop and distribute apps privately within your company or to a selected number of end users, you can use a provisioning profile for in-house distribution. It's available only when using Apple Enterprise Program AppStore Provisioning Profile : This Distribution Provisioning Profile is available for the Apple Developer Program, allows you to generate a release version of your mobile app that can be published and distributed through the App Store. Ad Hoc: This allows you to generate a release version of your mobile app that can only be used in a limited list of devices. Use this profile to distribute your application to a limited group of end-users. Only the devices specified for the provisioning profile will be able install and launch the app. Often used when sending out to testers. Configuring Provisioning Profile: Upload the provisioning profile file in to the Provisioning Profile and in the Signing identity field enter the Common Name of the certificate. This is a bit tricky to get right and I have seen a lot of people getting this wrong. We are working on improving this but in the mean time follow these steps: 1. Install the certificate (p12 file) on your mac by double clicking it 2. It opens in the key chain app 3. Copy the Common Name as shown in the screenshot below        Build Configuration Screen                   

A few tips to get mobile app build configuration right.   Mobile App Configuration Mobile app native build configuration is exposed as part of app settings Android build configuration 1. Keystore...

Oracle Visual Builder Cloud Service

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

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. 

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

Oracle Visual Builder Cloud Service

Importing and Using Javascript libraries in your Visual Builder custom code

In a recent post, I shared the prescriptive model for creating custom code within Visual Builder. Namely, using Javascript modules at the App, Flow, or Page level to create custom functions within the module. In this post, I want to talk about importing and using external Javascript libraries so you can use functions, objects and variables within that library. For this example, I will use the glmatrix library, a collection of Vectors, Matrices, and associated linear algebra operations. These types of operations can be used for more than just graphics so they live in their own library. The glmatrix library is provided in a "min" format. Essentially one free of whitespace and newline characters and in one file. So, the library I am importing is the glmatrixmin.js library which can be downloaded from the "dist" directory within the project github page: https://github.com/toji/gl-matrix/tree/master/dist. First, you'll need to import the library into your project. With Visual Builder, you can import resources at each of the levels, App, Flow, and Page and that resource will be accessible via that path. To import the file, right click on the project App, Flow, or Page node and select Import Resource. The resource needs to be uploaded as a zip file. So compress the glmatrixmin.js into a zip and select it from your files system in the Import Resources dialog. The dialog will show the import location. Remember this as this is how we reference the file later. Now the file is imported, you can see it in your code view under the Resources folder of the "main" Flow within which it was imported.  Now, we can write some custom code in our PageModule and reference the file to load it into our module. To do that we use a define statement, which provides the path to the file and the alias with which we will refer to the imported library in our code. See the below code example, for the define statement and usage. The full path to the file is used combining the import location with the flow name and resources directory. Note, the .js file extension is not necessary. Also, note the alias "glmatrix" is used to reference the objects and functions within the library.       

In a recent post, I shared the prescriptive model for creating custom code within Visual Builder. Namely, using Javascript modules at the App, Flow, or Page level to create custom functions...

Styling Visual Builder Cloud Service Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll learn about how to style VBCS applications. All styling in VBCS applications happens manually in CSS. There are no declarative features for changing the display of text or images. As all VBCS applications are just JET applications, they use JET Themes to style the applications. When styling your VBCS or JET applications, it is important that you use theming correctly to do so, otherwise you run the risk of finding that your re-styling breaks when you upgrade your platform versions.  JET components provides a styling API through the use of SASS only, and any directly styled oj-* component selectors or other approaches will not be supported. This is because the internal structure of JET components, and the styles that they use, are subject to change from release to release. The published set of SASS variables constitutes a stable supported API that will internally re-map the configuration as required by internal changes within the JET implementation. Read the JET Dev Guide on Themes for more information. By default, all VBCS applications use the Alta UI Theme. VBCS applications have a built-in app.css file that you can use to define additional styling on top of the main Alta theme. For example, if you have made a <div> clickable, you may want to add a class called "clickable" to the div and define the CSS for the class so that it's highlighted, the cursor changes to a pointer when you hover over it, etc. If, however, you want to style the core elements of a VBCS theme, you should use SASS variables and generate the CSS rather than coding against the DOM elements directly using oj-* selectors in app.css. The reason is that the internal DOM of JET elements can and does change between releases of JET. Therefore a CSS that worked in one release may not work in another. SASS variables insulate you from these changes. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, go to Building Your First VBCS Application and follow the steps to import the project, then continue below. Download this ZIP file to your computer. In your project, click the menu in the top right and choose Import Resources. Drag and drop the ZIP file into the dialog. Select Delete existing files and resources and click Import. Using Custom Classes in VBCS CSS Let's define a custom class to style clickable text in VBCS. As you can see when you open the main-start page, I've changed the list in the Expense Reports to have a clickable <h3> title for each expense report that navigates to the Edit page for that record. I've also added the custom class "clickable" to the div. In the Web Apps panel, open Expenses → resources → css → app.css and add the following code: .clickable { color: #07C; } .clickable:hover { cursor: hand; cursor: pointer; } Go back to your main-start page and reload the page in the Page Designer. Using a Custom Theme We won't go into how you actually create a new theme in JET. For that you can read the JET Dev Guide on Themes and try out the JET Theme Builder. The JET Theme Builder will generate a theme that looks like these: JET Stealth Theme JET Green Theme To use this theme in your application: In the Web Apps panel, expand Expenses → resources and right-click the css node. Choose Import. Drag and drop one of the above ZIPs and choose OK. For the Stealth them, for example, you should get a directory structure like this: Switch to the Source View panel and click index.html to open it in the code editor: Change the link to the CSS file to: <link type="text/css" rel="stylesheet" href="resources/css/stealth.css">

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll learn about how to style VBCS applications. All styling in VBCS applications happens manually in CSS....

Connecting to an External REST API (Twitter) in a Visual Builder Cloud Service Application

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we will look at integrating a third party REST API that has no description document (Swagger or ADF Describe). We will integrate the Twitter API to fetch a list of tweets for a list celebrities stored in a custom Business Object. Importing the Starter Project We'll start the lesson with an application that already contains the Celebrities Business Object and mobile application with a list of celebrities and a details page for each one. Download this ZIP file to your computer. In the VBCS list of applications, click Import > Application from File. Drag and drop the ZIP file into the dialog and click Import. Creating an Application in Twitter Before you can connect to the Twitter APIs, you need to register for the developer program and create an app in Twitter. Go to https://developer.twitter.com/en/docs/basics/getting-started and follow the instructions under Get started: Build an app on Twitter. Registering the Twitter API In order to work with a REST API, VBCS needs to understand basic information about that REST service, such as: The service endpoints and verbs The required query parameters and headers The authentication method used to connect The transformation patterns for creating URLs for pagination, sorting, and filtering Since the Twitter API doesn't have Swagger documentation, we can run through a wizard to input this information manually. In the left sidebar, click the Service Connections icon Click the icon in the Services panel Click Define By Endpoint In the wizard, enter the following information and click Next: Field Value Method Get URL https://api.twitter.com/1.1/statuses/user_timeline.json Action Hint Get Many Service Base URL Leave default (https://api.twitter.com/1.1/statuses) In the Service tab, change the Service Name to Twitter. In the Authentication tab, enter the following information. Go to https://apps.twitter.com to get this information: Field Value Authentication Method Client Credentials OAuth 2.0 Client Id The Consumer Key (API Key) from your app Secret Consumer Secret (API Secret)  Scope Leave blank Authorization URL https://api.twitter.com/oauth2/token Enable token relay Leave unchecked Click Request > URL Parameters. Add the following Dynamic Query Parameter: screen_name – String Click Test. Enter SFGiants as the screen_name and click Send. The response body appears in the Body area below. Click the Copy to Response Body button. Click Create. Consuming the Twitter API Now let's drop a list into the Celebrity Detail page and populate it with a list of the celebrity's tweets. Go to the Mobile Apps panel and click Tweets > flows > main > CelebrityDetail. The page opens but gives a 404 error as there is no cebrityId provided.  Click the button and enter 1 in the dialog box. The page renders with the Katy Parry information.  Drop a List View under the Twitter Feed header.  In the Property Inspector, click Add Data. Under Twitter, select GET /user_timeline.json and click Next. Choose the first template and click Next. Add the created_at field to Field 2 and the and the text field to Field 4. Set the Primary Key to id. Click Next. Map celebrity > twitterHandle on the left to uriParameters > screen_name on the right. Click Finish. Wrapping the Twitter Feed List in an oj-bind-if If you run the app now you'll notice that the Twitter call isn't working. If you look at the REST call in the Chrome Developer Tools, you'll see it's passing undefined as the screen_name. That's because the page hasn't finished loading the celebrity details before it tries calling Twitter. We fix that by wrapping the list in an oj-bind-if and check that celebrity object is populated before we render the Twitter list. Right-click the list in ContactDetail and choose Surround With > If Right-click the list and choose Select Parent > If.  In the Property Inspector, change the test to: [[$page.variables.celebrityRecord.twitterHandle !== undefined]] Note: In our database we know that twitterHandle will always have a value. In more complex cases, you'll have to create more complex logic to handle null, undefined, empty string values, and other situations. Reload the page. The list of Tweets renders correctly.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we will look at integrating a third party REST API that has no description document (Swagger or ADF...

Oracle Visual Builder Cloud Service

Consuming Fusion Applications REST APIs in Visual Builder Cloud Service Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we will look at consuming Fusion Applications REST services in a VBCS mobile application. In order to work with a REST API, VBCS needs to understand basic information about that REST service, such as: The service endpoints and verbs The required query parameters and headers The authentication method used to connect The transformation patterns for creating URLs for pagination, sorting, and filtering Fusion Applications like Oracle CX, HCM, and ERP clouds expose REST APIs that VBCS knows how to consume right out of the box.  There are three ways you hook up to register a REST connection: Select from Catalog - The Service Catalog shows all of the REST APIs for a registered Fusion instance. VBCS understands FA REST services out-of-the-box. See Authenticating Against FA below to see the requirements for Service Catalog Define by Specification - Enter the location of a Swagger or ADF-Describe document for a REST API. Use this to set up an App ID connection to any FA server, regardless of whether it meets the requirements in Authenticating Against FA. Define by Endpoint - Use this wizard to manually specify the required information about a REST endpoint. We will use this to register a Twitter API in a later lesson. Creating the Project and the Mobile Application In this lesson we will build the following UI over the FA Contacts REST endpoint: To do this we will access three endpoints: The GET ONE and GET MANY endpoints for /contacts The finder method that retrieves all of the country names, country codes, and other information Creating the Mobile App Create a new project called FAContactList In the Mobile Apps panel, click Create New Mobile App. Name the app Contacts and select None for the Navigation Style. Click Finish. Registering the Contacts REST API Click the Service Connections panel and click Add Service Connection. If you have a registered Service Catalog, click Select from Catalog.  If you do not have a registered Service Catalog, click Define by Specification. Switch the API Type to ADF Describe. Enter https://pathToYourCRM/crmRestApi/resources/latest/contacts/describe in the Service Specification field. Set the Service ID to contacts. Enable Basic Authentication and enter a set of valid credentials that has permission to call the REST API. Then click Next. Expand the /contacts node and select all of the following: GET /contacts GET /contacts/{contacts_Id} GET /fndTerritories;for=contacts-CountriesLOV Creating the List Select the main-start page in the Page Designer. Drop a List View onto the page. Select the List View in the Page Designer. (If you have just dropped it in, it will be selected already.) Then open the Property Inspector and select the Quickstarts page. Under crmRestApi, select contacts. Select the first template and click Next Add the following fields: Field 2: ContactName Field 3: AccountName Field 4: Country Click Next and then click Finish. Creating the Details Page Select the List View in the Page Designer. In the QuickStart tab of the Property Inspector, click Add Details Page. In the Select Endpoint page, select contacts and click Next. Add these fields: AccountName ContactName FormattedHomePhoneNumber FormattedMobileNumber PrimaryAddress > item[i] > FormattedAddress Click Finish. Open the ContactDetails page in the Page Designer Select the Form Layout and in the Property Inspector change the Label Edge variable to Top. All of the display labels move to above the input fields. Fix the display label text and reorder the fields so the page looks like this: Displaying LOV Labels in Collections and Details Pages As you can see, the list of Contacts is showing the country code instead of the full country name. This is because there is no one REST API that you can use to retrieve both the country codes and the display labels in the same call. Instead, we have to cache all of the country display labels in an application-scope variable when the application is first accessed. Then we will use a custom Javascript function to swap out the country codes for the display labels when the list is rendered. Adding the getLOVMeaningValue Function Open the application editor by opening the Mobile Apps panel and clicking the top-level Contacts node. Open the JavaScript panel of the application editor by clicking the JS button Add the getLOVMeaningValue function as shown in lines 6-22 below: define([], function() { 'use strict'; var AppModule = function AppModule() {}; AppModule.prototype.getLOVMeaningValue = function(key, lovs) { if (!lovs || !lovs[0]) { return; } var res; var keyProperty = Object.keys(lovs[0])[0]; lovs.forEach(function(record) { if (record[keyProperty] === key) { res = record; } }); if (res) { return res[Object.keys(res)[1]]; } }; return AppModule; }); Creating the Type and Variable for the Status Code Options Still in the application settings editor, open the Variables editor, then click the Types tab. Create a new Type from Endpoint based on the /fndTerritories;for=contacts-CountriesLOV endpoint. Change the name of the type to countryCodeOptions. Add TerritoryCode and TerritoryShortName to the Type and click Finish. Switch to the Variables tab. Create a new variable called countryCodes of type countryCodeOptions. Creating an Action to Populate Account Type Options Still in the application settings editor, open the Actions page. Create a new Action Chain called populateCountryCodes. Drag a Call REST Endpoint action from the left panel to underneath the Start node. In the Property Inspector, click Select Endpoint and select contacts > contacts  > /fndTerritories;for=contacts-CountriesLOV By default the REST call only returns the first 25 entries, but we want to cache all of the country names in our variable. So we will set a high limit for the REST call. In the property inspector, click limit under Input Parameters. Map the variable to 500, leaving it set as Static Content, and click OK. Add an Assign Variables action that maps the body returned by the Call REST action to the statusCodes flow variable. Return to the application editor and open the Events panel Create a new event: Event: vbEnter Action Chain: populateStatusCode Updating the List to Call the getLOVMeaningValue Function Open the Page Designer for main-start. Select any row in the list In the General tab of the Property Inspector, change the Value1 to: [[ $application.functions.getLOVMeaningValue($current.data.Country,$application.variables.countryCodes.items)]]

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we will look at consuming Fusion Applications REST services in a VBCS mobile application. In order to work...

Getting The Label/Description Value from a Select List in Visual Builder

When you add a select list component such as selectOneChoice to a Visual Builder page, you get a nice wizard that helps you bind it to data, and you can then easily access the value that you select in the list. However in some cases you might want to access the label of the list rather than the value. Here is a quick tip that will help you get there. Oracle JET introduced a new attribute to the oj-select-one component called value-option - this contains an object with two fields value and label that synch up with the list. Read more about this attribute in the JET Doc here. Right now there is no design time support for using this property in VBCS right now, but you can still leverage it. First create a page variable of type object and then add two string attribute in it called label and value. Next go into the page layout editor and switch to the code editor view and add the value-option option to your component (note that you should use curly braces):   You can now refer to the label using a syntax such as: {{ $page.variables.selectedVal.label }} For example this page: The Code would be: <div class="oj-flex">     <oj-label id="oj-label--490912658-1" for="oj-select-one--490912658-1" class="oj-flex-item oj-sm-12 oj-md-2">Select (One)</oj-label>     <oj-select-one value-option="{{$page.variables.selectedVal}}" options="[[$page.variables.airlineListServiceDataProvider]]" options-keys.value="id" options-keys.label="airline" value="{{ $page.variables.airline }}" id="oj-select-one--490912658-1" class="oj-flex-item oj-sm-12 oj-md-4" ></oj-select-one> </div> <div class="oj-flex">     <oj-label id="oj-label--490912658-2" for="oj-input-text--490912658-1" class="oj-flex-item oj-sm-12 oj-md-2">value</oj-label>     <oj-input-text id="oj-input-text--490912658-1" class="oj-flex-item oj-sm-12 oj-md-4" value="{{ $page.variables.airline }}"></oj-input-text> </div> <div class="oj-flex">     <oj-label id="oj-label--490912658-3" for="oj-input-text--490912658-2" class="oj-flex-item oj-sm-12 oj-md-2">Selected val label</oj-label>     <oj-input-text id="oj-input-text--490912658-2" class="oj-flex-item oj-sm-12 oj-md-4" placeholder="{{ $page.variables.selectedVal.label }}" value="{{ $page.variables.selectedVal.label }}"></oj-input-text> </div> <div class="oj-flex">     <oj-label id="oj-label--490912658-4" for="oj-input-text--490912658-3" class="oj-flex-item oj-sm-12 oj-md-2">selected val value</oj-label>     <oj-input-text id="oj-input-text--490912658-3" class="oj-flex-item oj-sm-12 oj-md-4" value="{{ $page.variables.selectedVal.value }}"></oj-input-text> </div>

When you add a select list component such as selectOneChoice to a Visual Builder page, you get a nice wizard that helps you bind it to data, and you can then easily access the value that you select in...

Oracle Visual Builder Cloud Service

Data Security and Role-Based UI in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lab we will add some role-based UI based on groups in IDCS. We will also implement Data Security on our Expense Report business object. It's important before we go on that you understand the difference between data security and role-based dynamic UI. You need to do both to provide a secure app that has elegant usability. Data Security Data Security controls what data a user can fetch from the back-end. You can limit access to an entire resource - i.e. all Expense Reports - or define more complex rules for a resource - i.e. all Expense Reports created by me. Data security is enforced at the service endpoint so it's always secure and can't be spoofed by changing settings in your browser or changing the URL of the REST service being called. For business objects, you can define your own security rules at the object level. You can't set data security rules for fields in an object - i.e. only Managers can see the Salary field in an Employee object. For external REST services, you have to set the permissions at the service endpoints. There is no way to set additional VBCS-specific security rules over what the endpoints already specify. For many Oracle PaaS and SaaS services, like Oracle Sales Cloud or Oracle Mobile Cloud Service, you can define the security rules for the endpoints exposed. Role-Based Dynamic UI Role-based dynamic UI controls what components a user sees on a page. You can set restrictions on entire pages, or just on certain components in a page. For example you can hide the navigation button to a page or a tab. We use this expression to set component visibility by role: <oj-bind-if test=“$application.user.roles.role_name” > </oj-bind-if> Role-based dynamic UI is only enforced on the client. It is easy to go into the browser's developer tools and change the value of the user role. As such it alone is not enough to make a secure application - you must always use it with data security. So you hide the navigation to a page and make the contents of that page appear only to certain roles, but you must also secure the data returned on that page so that if someone spoofs the role the REST call only returns an empty data set. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, go to Building Your First VBCS Application and follow the steps to import the project, then continue below. Download this ZIP file to your computer. In your project, click the menu in the top right and choose Import Resources. Drag and drop the ZIP file into the dialog. Select Delete existing files and resources and click Import. Setting Up a Role When you set up additional roles in your project, the roles map to groups in your IDCS account. Roles are defined at the project level and are available to all applications and business objects in the project. These roles act as additional roles on top of the standard VBCS "Authenticated User" role. We will talk more about what that means in the next section. For now, let's just set up a role. Open Project Settings in the top-right of the application window.   Click User Roles. Then click Add Role. Enter following information: Role: Admin Mapping: Any group you have access to. See https://docs.oracle.com/en/cloud/paas/identity-cloud/uaids/managing-oracle-identity-cloud-service-groups1.html for instructions on setting up a group Click the check box on the right. The Role switches to read-only mode.   Click Close to close the Settings dialog. Setting Up Data Security Now let's define data security rules on our Expense Report business object. We will it configure it so that: Authenticated User can only see their expense reports Admin user can see all expense reports So let's do that now: In the Business Objects panel, click Expense Report to open the Business Object Editor Click the Security tab in the editor, click the icon next to Role-based Security Select Authenticated User. The View, Edit, and Delete rows display below. Click the menu for each of these and select Allow if user created row Notice you can expand each node to see the exact query being checked for and add additional conditions to the query. Previewing the App as Different Roles The Page Designer has a Who Am I button  that allows you to preview the application in different roles. As we said, the Admin role is an additional role layered onto the Authenticated User role. But you can have different settings for all authenticated users and just Admin users. So if you want to preview the app as Admin, you have to deselect Authenticated User, even though Admin users are also authenticated users. Note that the Who Am I only spoofs the role in the UI and does not change the identity with which you call the services. Therefore, the Expense Reports REST calls will still return all the data that you - the currently logged in VBCS designer user - are allowed to see. Setting Role-Based View Restrictions on a Page You can set role-based permissions on a page or flow in the JSON metadata for the page/flow.  In the Web App panel, click the admin flow node to open the admin flow editor page. Click the {} node to view the JSON for the page.  Enter the following code at the end of the JSON. Don't forget the comma at the end of the variable line:   "variables": {},   "security": {     "access": {       "requiresAuthentication": true,       "roles": ["Admin"]     }   } } If you run the page as a user who does not have Admin access, the Administration link no longer works Hiding the Navigation Link to the Admin Page Now we will set up a rule on the Administration link to make it visible only to people with the Admin role. In the Web Apps panel of the App Navigator, click root pages > shell. Right-click the Administration link and choose Surround With > Bind If. In the Property Inspector, set the Test property to {{$application.user.roles.Admin}} Use the Who Am I button to turn the Admin role on and off and see the dynamic UI in action.

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

Oracle Visual Builder Cloud Service

Adding a Navigation Bar to a VBCS Application

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll add a navigation bar to our application. First it's important to understand what actually gets loaded when you open a VBCS page in the runtime. Here is the heirarchy: index.html - this is the page that actually gets loaded. It's just a wrapper. The only time you'll need to edit this page is when you want to specify a different CSS file. shell page - this is the wrapper you see in the page. It contains the header and footer and the navigation bar that you will add in this lesson. You can have multiple shell pages for different parts of your application. The default shell is specified in the application settings (i.e. click Expenses node in Web Apps panel, then click the Settings panel). Like any other page, a shell page has its variables, actions, events, and so forth. flow - each flow specifies a top-level page and the application settings also specify the default flow to open when the app is accessed. Currently VBCS only allows you to navigate to the top level page of a flow or to another page inside the same flow. That means that any page that you want linked from the top-level navigation menu must be in their own flows. That's why we created the admin page as its own flow instead of a page in the main flow. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, go to Building Your First VBCS Application and follow the steps to import the project, then continue below. Download this ZIP file to your computer. In your project, click the menu in the top right and choose Import Resources. Drag and drop the ZIP file into the dialog. Select Delete existing files and resources and click Import. Adding the Navigation Bar Open the Web Apps window and open Expenses > root pages > shell. Switch to the Code mode. Add the following code before the closing </header> tag: <div role="navigation" class="oj-web-applayout-max-width oj-web-applayout-navbar"> <oj-navigation-list id="123" aria-label="Choose a navigation item" navigationlevel="application" drill-mode="none" display="all" edge="top" selection="[[$page.currentFlow]]" class="oj-md-condense oj-md-justify-content-flex-end" on-selection-changed="[[$listeners.ojNavigationListSelection]]"> <ul> <li id="main"><a href="#">My Expense Reports</a></li> <li id="admin"><a href="#">Administration</a></li> </ul> </oj-navigation-list> </div> The oj-navigation-list component is highlighted with an error. This is because you haven't imported the component in the page's metadata. Hover over the tag until the editor hints appear, then use the Add Missing Dependencies hint to fix the error. Creating the navigateToPage Action Chain Go to the Actions panel of the shell Page Editor Create a new Action Chain called navigateToPage. Go to the Variables panel of the Action Chain Editor. Add a String variable called page Add a Boolean variable called navigate. In the Property Inspector for the page variable, check Input Parameters and Required. Do the same for the navigate variable. Switch back to the Action Chain view and drop an If action on the action chain. Set the Condition to {{ $chain.variables.navigate }}.  The reason you're doing this is that the selection change event can get dispatched from either a user action, like a click, or by external changes to the selection property. We only want to react to the former - user actions. We will set the navigate property below to ignore external changes. Drop a Navigate action to the true path of the If action. Switch to the Metadata View and add the following lines in bold. Don't forget the comma at the end of the history line. "actions": { "navigateToPage1": { "module": "vb/action/builtin/navigateToPageAction", "parameters": { "history": "push", "page": "[[ $variables.page ]]" } } Adding the Listener on the Navigation List Go back to the shell tab and open the Events panel Click the + Event Listener button. Click the + button on Other Events and  name your custom event ojNavigationListSelection. Click Select. Select the navigateToPage action chain and click Finish. The event is created. In the list of Events, click page under Input Parameters Enter $event.detail.value as the mapping for page, set it to be an Expression Click navigate under Parameters. Enter $event.detail.updatedFrom !== 'external', set it to be an Expression, and click Save. The next lesson in the learning path is Data Security and Role-Based UI.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll add a navigation bar to our application. First it's important to understand what actually gets loaded...

Oracle Visual Builder Cloud Service

Dynamic UI in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll look at how to dynamically hide or display items in a VBCS application. Although many components have a "hidden" HTML attribute, many times the value there can be overridden by some parent control. To explicitly control any component's visibility, use the <oj-bind-if> tag.   Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Dynamically Displaying Fields Let's wrap Exchange Rate and Amount in USD in an <oj-bind-if> that only displays if the currency is not USD. Go back to the Page Designer for CreateExpenseAccount and switch into Code view. Insert the following <oj-bind-if> statement above the Exchange Rate <oj-input-number> <oj-bind-if id="oj-bind-if--862244262-2" test="[[ $page.variables.expenseReport.country !== 1 && $page.variables.expenseReport.country !== undefined && $page.variables.expenseReport.country !== null && $page.variables.expenseReport.country !== '']]"> Put a closing </oj-bind-if> tag after the Amount in USD tag. The next lesson in the learning path is Creating a Navigation List

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we'll look at how to dynamically hide or display items in a VBCS application. Although many components have...

Oracle Visual Builder Cloud Service

Are you done with your call? Managing callbacks with a Promise in Visual Builder custom code

In a previous blog, we talked about how to create custom code within Visual Builder. In this blog, we'll discuss how to work with callbacks within that custom code. If you are familiar with Javascript callbacks, read on, but if you need an introduction to callbacks and asynchronous operations and why this takes special care, here is a good primer. In short, we need to manage this specifically because the return result of a custom function may not be available yet when it gets assigned within a callback. Since the callback gets scheduled to run later (asynchronously), your result can be returned undefined because the callback which populates that return value had not completed yet.  Let's look at a specific example, getting a GPS location using the HTLM5 navigator.geolocation API. Screenshot from: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition As shown above, the function takes three parameters called success, error, and options. Success and error are both callbacks and are used in this API because retrieving a location could take several seconds. If the function were to wait for the result, your app would be stuck waiting too. So, callbacks are you used to be "called back" when that information is available rather than blocking your code execution.  But then, how do you deal with the situation described above where our success callback may not be called yet? Use a Promise, as discussed in primer I linked to at the beginning of the article.   Let's implement this within Visual Builder custom code using a module function.  PageModule.prototype.getGeolocation = function()   {      return new Promise(function(resolve, reject) {         var geolocation = navigator.geolocation;         geolocation.getCurrentPosition(function(position) {                var latitude = position.coords.latitude;                var longitude = position.coords.longitude;                var latlong = JSON.stringify({ lat: latitude, lng: longitude});                console.log(latlong.toString());                resolve(latlong);            }, function(error) {                console.log(error);                reject("The error is: " + error);            });      });   }   Within our custom function getGeolocation, we are returning a Promise. This Promise wraps our call to navigator.geolocation and the two callbacks functions it expects as anonymous methods. This ensures our action chain custom function call will wait for the Promise to return (itself an asynchronous call) but will release the custom function from blocking execution at the same time.  A successful retrieval of a geolocation calls our anonymous function for success and returns our assigned variable in the Promise resolve function, ensuring it is not undefined. Non-success calls the error function as an anonymous function and then calls the Promise reject function.  Using the above pattern within Visual Builder custom module functions will ensure: Visual Builder can reference your custom code within an action chain Your callbacks will complete before a result is returned, ensuring a  return result is not undefined Allow you to also deal with error conditions within the same function            

In a previous blog, we talked about how to create custom code within Visual Builder. In this blog, we'll discuss how to work with callbacks within that custom code. If you are familiar with Javascript...

Adding New Oracle JET UI Component to Visual Builder Cloud Service

Oracle Visual Builder Cloud Service is an extendable platform - you can add your own UI components to the list of around 70 UI components that already show up in the component palette of your visual editor. In this blog and video we show you two ways to add additional Oracle JET components to the editor. In the first part of the video we show how to add a "core" Oracle JET components, specifically the train component. In the second part of the video (starting at minute 9) we show you how to add an Oracle JET Composite Component. For the core component, the main thing to know is that you also need to add the component to the json file that describes your page. This way VBCS will know to load this component into your pages. (This is needed since VBCS is optimized to only load needed resources - leveraging require.js for smart resource management). In the video we also show how to create a new data type and array of that type to store a data structure needed to populate the train steps, and how to hook up data from a business object to populate that object when the page loads. In the second part of the video we show how easy it is to pick up an Oracle JET Composite Component and add it to a page. A JET CCA Component is a complex UI component that can include multiple UI elements along with logic. This is based on the Web Components standard architecture, and allows developers to share UI components.

Oracle Visual Builder Cloud Service is an extendable platform - you can add your own UI components to the list of around 70 UI components that already show up in the component palette of your visual...

Using Mobile Cloud Backend API in Visual Builder Mobile App

This blog provides details about using MCS/OMCe back-ends in Visual Builder (VB) mobile apps. We will walkthrough the steps of configuring VB service connections and using the data from MCS to build a simple mobile app. MCS Mobile Backend(MBE) Configuration: Identify the MBE you want to use in your app and get the following information from the MBE API & Settings: 1. Service URI: Navigate to the API section of your MBE to get the base URI for the end point    2. Mobile Backend(MBE) ID  Get MBE ID from the Settings section as shown in the screenshot below 3. Authentication details Identify authentication mechanism used to secure the MBE. Typically, any mobile user defined in the Users section of the back-end Service Connection Configuration: 1. Create a Visual App 2. Create a Service Connection  using Define by End Point option. This experience is going to get much better in a upcoming release but for now follow the steps below                           3. Configure Base URI using the Base URI from step#2 in MBE Configuration section                 4. Configure MBE Id as Request Header                      5. Authentication From the Authentication mechanism drop down select Basic and configure the user name and credentials for the mobile user from step #3 in MCS MBE configuration section.    6. Use the Test tab to test the end point. Use Copy to Response Body option to create the resource definition from the response                       Create Mobile App UI 1. Create a mobile app & select navigation template 2. Select a page template 3. Add Listview from the component palette to the page and select AddData from the quick start menu 4. Select the end point configured in the Service Connection Configuration section to bind data to the Listview                 5. Run the app to preview in the browser using the play button on the top right          

This blog provides details about using MCS/OMCe back-ends in Visual Builder (VB) mobile apps. We will walkthrough the steps of configuring VB service connections and using the data from MCS to build a...

Computed Fields in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. This lesson is the first in the series on Dynamic UI. In this lesson we'll learn how to create computed fields in the UI. We will create an Amount in USD field that is computed by multiplying the Amount by the Exchange rate. Simple enough, right? Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path.  Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Creating a Computed Field in the UI Open main-create-expense-report in the Page Designer. Select Amount in USD In the Data panel of the Property Inspector, change the Value property to: {{$page.variables.expenseReport.exchangeRate * $page.variables.expenseReport.amount }} In the General panel, mark the field as Read-only Run the page and try entering different values for the Exchange Rate. Amount in USD is updated automatically. The next lesson in the Visual Builder Cloud Service Learning Path is Dynamic UI.

This blog is part of the series Visual Builder Cloud Service Learning Path. This lesson is the first in the series on Dynamic UI. In this lesson we'll learn how to create computed fields in the UI. We...

Oracle Visual Builder Cloud Service

Client-Side Validation in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we'll look at setting up client-side validation in a VBCS Form. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path.  Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Setting Up Validation First we have to set up our form to check the validity of its contents before submitting. We do this by surrounding the form with an <oj-validation-group> element, adding a custom isFormValid Javascript function that returns a boolean, and then calling that function before submitting the form. Open main-create-expense-report Switch to the Code view Surround the expense-form div with <oj-validation-group id="CreateForm">. Don't forget the closing tag. Notice the oj-validation-group tag shows an error in the source code. That's because we haven't added the import for the component to the page's metadata. Hover over the line and use the Add Missing Dependencies hint to add the import statement. Now open the main application editor and switch to the JS view Add the isFormValid function: define([], function() { 'use strict';   var AppModule = function AppModule() {};   AppModule.prototype.isFormValid = function(form) { var tracker = document.getElementById(form);  if (tracker.valid === "valid") { return true; } else { tracker.showMessages(); tracker.focusOn("@firstInvalidShown"); return false; } } ... Go back to the main-create-expense-report page. Click the Actions tab and open createExpenseReportChain. Add an If action after Start. Set the Condition to {{ $application.functions.isFormValid("CreateForm") }} Move the Call businessObjects/cre... node to the true branch of the If action Setting a Date Validation Note that we are going to use the Expression Editor here to create the expression. The Expression Editor gives you code completion over all in-scope variables as well as JS error highlighting. Go back to the Page Designer for main-create-expense-report. Select the End Date field in the form.   In the General panel of the Property Inspector, click fx button for the the Min property.   In the left panel, expand {} expenseReport and double-click startDate. The editor enters: $page.variables.expenseReport.startDate Run the page and try entering a date before the Start Date. The DatePicker for End Date makes all dates before the Start Date unavailable. If you manually enter a date before the Start Date it shows an error. Using a Custom Validator Open the JS panel for main-create-expense-report. Add the endDateAfterStartDateValidator function: var PageModule = function PageModule() {}; PageModule.prototype.endDateAfterStartDateValidator = function(startDate) { return [{ validate: (endDate) => { if (endDate) { const valid = endDate >= startDate; if (!valid) { throw new Error('End date must be start date or later'); } return valid; } }, }]; }; return PageModule; }); Return to the Page Designer panel and select End Date In the General panel of the Property Inspector, delete the value for the Min property. In the All panel of the Property Inspector, change the validators property to: {{ $page.functions.endDateAfterStartDateValidator($page.variables.expenseReport.startDate) }} Setting Up the Page for Dynamic UI Now we are going to do some dynamic UI around the amount and exchangeRate fields. There are a few things we need to do to set this up: Add the exchangeRate field to our Type and Variable Add the Input Number fields for Exchange Rate and Amount in USD (we will use this later) Give amount and exchangeRate a default value. The reason we have to do this is that we are going to add some expressions that act over these fields. However, the REST call that initializes and populates these fields may not have completed before the page is displayed and the expressions are evaluated. To get around this, we can either wrap our whole form in an oj-bind-if tag to only load it once the expenseReport variable has been populated, or just give the fields some default values to initiate the variable on page load. Open the Variables panel for main-create-expense-report and click the Types tab. Select the createExpenseReportRequest type. Click Edit from Endpoint Select Request -> exchangeRate and click Finish. Now if you look at the expenseReport variable in the Variables tab, you'll see it includes exchangeRate. In the Property Inspector for expenseReport -> exchangeRate, set the Default Value to 1. Select expenseReport -> amount and set the Default Value to 1. In the Page Designer panel, add an Input Number field below Amount. In the General tab of the Property Inspector, change its Label Hint to Exchange Rate. In the Data tab, bind its Value to {{ $page.variables.expenseReport.exchangeRate }} Drop a Currency field below Exchange Rate. In the General tab of the Property Inspector, change its Label Hint to Amount in USD Making a Field Conditionally Required Let's make the Justification field required if the Amount is more than $500. Select Justification In the All panel of the Property Inspector, click the FX above the required property. Use the editor to set the following: {{ $page.variables.expenseReport.amount * $page.variables.expenseReport.exchangeRate >= 500 }} Run the page and try entering 600 for the Amount. Justification becomes required. The next lesson in the Visual Builder Cloud Service Learning Path is Computed Fields.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we'll look at setting up client-side validation in a VBCS Form. Updating Your Project This lesson builds on the...

Oracle Visual Builder Cloud Service

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

Oracle Visual Builder Cloud Service

Pagination in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. Most modern UIs use Load More on Scroll pagination rather than a list of pages with next and previous buttons. Also, note that Business Objects have their own "limit" and "offset" URL parameters that are visible in VBCS. We are going to leave those alone and let the component drive the pagination through the scroll-policy-options.fetch-size property on the list view. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Setting Pagination on the List Open main-start. Select the list of Expense Reports. In the All tab of the Property Inspector, set the following: scroll-policy: loadMoreOnScroll scroll-policy-options.fetch-size: 10 scroll-policy-options.scroller: [[document.documentElement]] Some notes about this: If you are using a table instead of a list, it does not support scroll-policy-options.scroller, so you have to set an explicit height to the div that contains the table. If you would like to have a traditional Paging Control on a table or list, you need to use an ArrayDataProvider instead of a ServiceDataProvider, as you cannot bind a Paging Control to a ServiceDataProvider. The next lesson in the Learning Path is Filtering and Sorting Lists in VBCS Applications.

This blog is part of the series Visual Builder Cloud Service Learning Path. Most modern UIs use Load More on Scroll pagination rather than a list of pages with next and previous buttons. Also, note...

Oracle Visual Builder Cloud Service

Parent-Child Master-Detail in VBCS

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we create a Master-Detail view over Expense Reports and their child Line Item entries.  Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path.  Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Adding a Child Table Open EditExpenseReport. If you get a 404 when you open it, it means the page is missing the required context. Click the button, enter "1", and click Reload. Add a Heading between the form and the buttons and call it Line Items Add a List View below the heading. In the Property Inspector, click Add Data In the Choose an Endpoint tab, select the Business Object Line Item. Click Next. Select the second row template. Click Next.   Choose the name and amount fields. Click Next. In the Define Query for the page, expand filterCriterion on the left and set the following properties: item[0] -> attribute: expenseReport (mark as Static content) item[0] -> op: $eq (mark as Static content) item[0] -> value: $page.variables.expenseReportId (you can drag expenseReportId from the left panel to bind it, it will automatically be marked as an Expression) Click Finish Adding a New Line Item Form Go to the Variables panel of the EditExpenseReport page. Click the Types tab. Create a New Type from Endpoint. Select Business Objects > LineItem > POST /LineItem Click Next. Add the expenseReport, name, and amount fields. Click Finish. Click the Variable Tab and add a new variable called newLineItem of type createLineItem   Expand the newLineItem variable and select the expenseReport property. In the Property Inspector, change Default Value to {{ $page.variables.expenseReportId }} Go back to the Page Designer by clicking . Drop a Form Layout component between the Line Items heading and the list of Line Items Add an Input Text component and a Currency component to the Form Layout. Change the display labels to Name on the Input Text and Amount on the Currency component. Select the Name field in the Page Designer. In the Data tab of the Property Inspector, bind Value to {{ $page.variables.newLineItem.name }}. Do the same to bind the Amount field to {{ $page.variables.newLineItem.amount }} Add a Button below the Form Layout. Change the Text to Add. Select the Button and click the Events tab of the Property Inspector. Click New Event > Quick Start: 'click'   Drop a Call REST Endpoint action under Start. Click Select Endpoint and select Business Objects > LineItem > POST /LineItem. Under Parameters in the Property Editor for the Call REST Endpoint action, click body. Map newLineItem on the left panel to body on the right panel. Click Save. Drag a Fire Data Provider Event under the Call REST Endpoint action. Select {{ $page.variables.lineItemListSDP }} as the Event Target. Set Refresh as the Type.   Drag a Reset Variables action to under the Fire Data Provider Event action. Set $page.variables.newLineItem as the Variables to Rest.   Run and test the app. The next lesson in the Learning Path is Single-Page Master Detail in VBCS.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we create a Master-Detail view over Expense Reports and their child Line Item entries.  Updating Your Project Thi...

Oracle Visual Builder Cloud Service

Single-Page Master Detail in VBCS

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we will look at another popular Master-Detail pattern, which is the single-page master-detail. Here we will create a new page that shows a list of ExpenseReport names on the left and some details of a selected report on the right. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Creating the New Flow First we will create a new flow. As you remember, flows are sets of pages that logically belong together. We're going to create a flow that will serve as an administrator's view of all Expense Reports along with some reports. In the Web Apps panel, click the plus sign next to the flows node. Name the flow admin and click OK. Open the admin-start by double-clicking it in the flow editor for the admin flow.   Drop a List View on the page. Use the Add Data Quickstart to bind the list to the Expense business object and display the name and amount fields. See Building Your First VBCS Application for detailed instructions.  Shrink the List View to only take the left third of the page. You can play with the formatting, like removing the name label and expanding the field to take up the full width of the list. Go to the Variables panel for admin-start. In the Types tab, create a Type from Endpoint based on the GET /ExpenseReport/{ExpenseReport_Id} endpoint. Add the name, amount, startDate, and endDate fields to the Type and click Finish. Switch back to the Variables tab and add a variable called selectedReport of type get_ExpenseReport. Switch back to the Designer tab and drag a Form Layout on the right side of the List. Drag and configure the following components into the form: Component Display Text Bound to Property Input Text Name name Currency Amount amount Input Date Start Date startDate Input Date End Date endDate Make all of the components Read Only by selecting them and clicking the Read Only checkbox in the Property Inspector. Select the List View. In the Events tab of the Property Inspector, click New Event > Quick Start: 'selection'. This opens the ListViewSelectionAction in the editor. Drop a Call REST Endpoint under Start and select the GET /ExpenseReport/{ExpenseReport_Id} endpoint. Under Input Parameters, click ExpenseReport_Id to open the variable mapper. Map Action Chain > selection > item[0] to ExpenseReport_Id and click Save. Drop an Assign Variables action under the Call REST Endpoint action. In the Property Inspector next to Variables, click Assign and map Action Chain > Results > callRestEndpoint1 > body to selectedReport. Switch into Live mode and test selecting your different pages. The next lesson in the Learning Path is Pagination in VBCS Applications.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson we will look at another popular Master-Detail pattern, which is the single-page master-detail. Here we...

Oracle Visual Builder Cloud Service

Filtering and Sorting Lists in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we will add a filter and sort control to our list of Expense Reports. Updating Your Project This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. If you are starting at this lab, just import the zip file below as a new project. Download this ZIP file to your computer. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.   If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there. Adding a Filter to the List Open the Page Designer for main-start. Drop a Label and an Input Text component in the Toolbar next to the Create/Edit buttons. Change the display text to Filter: Select the input component. In the All tab of the Property Inspector, set the Placeholder to Name. Switch to the Variables panel and select expenseReportListSDP. In the Property Inspector, click filterCriterion and set map the following values to in filterCriterion: item[0] -> attribute: name item[0] -> op: $co Go back to the Page Designer panel. Select the input text component. In the Data tab of the Property Inspector map the Value to {{ $page.variables.expenseReportListSDP.filterCriterion.criteria[0].value }} Adding a Sorting Control Open the Page Designer for main-start. Drop a Label and a Select One component in the Toolbar next to the Filter component. Set the display text on the Label to Sort By: Select the Select One component, then click the Data tab in the Property Inspector. Then click the + sign next to Sub Elements (oj-ojoption) to add these options: Name: name Start Date: startDate In the General tab, enter an empty space -  " " - in Placeholder. Make sure it is set as an Expression and not as a Static value. Switch to the Variables panel and select expenseReportListSDP. Under Input Parameters click sortCriteria. Enter an empty string - "" - in the sortCriteria > items[i] > attribute. Change the mapping to be an Expression and not a Static String. Go back to the Page Designer and select the Sort By Select One component in the Toolbar. In the Data tab of the Property Inspector, set the Value to {{ $page.variables.expenseReportListSDP.sortCriteria[0].attribute }} The next lesson in the Learning Path is Client-Side Validations in VBCS Apps.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we will add a filter and sort control to our list of Expense Reports. Updating Your Project This lesson builds...

Oracle Visual Builder Cloud Service

Building your First VBCS Application

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, look at building our first app, the simple Expense Report app. We'll spend a fair amount of time reviewing the artifacts that are created and how we can customize them.  Setting Up the Project Throughout this series we will be working mostly on one project, Expense Reports. We will start small and eventually incorporate everything from complex server-side rules to Process Cloud Service flows. To start with, we will just import a project that contains the Business Objects and an empty web application. Importing the Project Download this ZIP to your computer. Click Import > Import from File Drag the ExpenseReportStarting.zip file into the dialog Give the file any name you want, I suggest ExpenseReport YourName Click Import. Adding the List Click the project to open it. In the left panel, click the Web Applications node. Then expand flows -> main and click main-start. The page opens in the Page Designer. In the list of components on the left, find the List View component. Then drag and drop it onto the page. Select the List View in the Page Designer. (If you have just dropped it in, it will be selected already.) Then open the Property Inspector and select the Quick Starts page.   Under Business Objects, select ExpenseReport and click Next.   Select the second row template and click Next. Select these fields in the left panel of the wizard: name countryObject -> items -> item[i] -> name amount startDate endDate   Click Next. Leave the default settings in the Query panel of the wizard and click Finish.   Adding the Create Page Now we will generate the Create page. Then we will fix up the UI generated by the Quickstart. Specifically, we are going to delete the Justification simple Input Text Field and replace it with an Input Text Area. You may be asking, why do I add a Problem Description field if I'm just going to delete it again? Why not generate the form without it and then add the field? The reason is that we want the Quickstart to generate the Type with the Justification field so it's fetched in the REST call. We could edit the Type to add Justification after it's been generated, but this is simpler. Select the List View in the Page Designer. In the QuickStart tab of the Property Inspector, click Add Create Page.   In the Select Endpoint page, choose ExpenseReport from the Business Objects and click Next. Add these fields: amount country description endDate justification name startDate Optionally change the Button Label and Page Title to better names. Click Finish. Open the Create page by switching into Live mode and clicking the Create button.   Select the Form Layout component. In the Property Inspector, set Max Columns to 2. Delete the Justification field. Add a Text Area field. Note: Be careful when selecting that you have selected the individual component and not the enclosing Form Layout. The Property Inspector tells you which component you have selected. If you accidentally delete something, use the Undo button to get it back. In the General tab of the Property Inspector, set the Text Area's Label Hint to Justification. Set the Rows property to 4. In the Data tab, set the Value property to {{ $page.variables.expenseReport.justification }}. You can manually type in the value or use the Expression Picker to fill it in automatically.   Do the same for the Description field. Delete the Amount field. Drop a Currency field onto the page. Set its display name to Amount and in the Data tab set the Value Property to {{ $page.variables.expenseReport.amount }}. Rearrange the fields until your app looks like this: Adding the Edit Page Like with the Create Page, we are going to edit this page after it's been created. Note we can use variables and expressions anywhere, including in the <h1> title of the page.                   Go back to main-start tab in the editor. Select the List View then open the QuickStarts tab of the Property Inspector. Click Add Edit Page Select ExpenseReport for the on both the Read Endpoint and Update Endpoint pages of the wizard Add these fields: amount country description endDate justification name startDate id Click Finish. Open the Edit Page. Note: When you open a page that takes a mandatory input parameter, like the Edit page for an entry, the editor needs a value for the input parameter, otherwise it will show a 404 error in the editor. You can either switch into Live mode, select a record in the list, and click the Edit button, or you can open the Edit page from the list of pages and use the button and input an ID manually. Delete the id field. Click the Heading and in the Property Inspector change the Text to {{ "Expense Report " + $page.variables.expenseReport.id }} Fix up the rest of the page like we did with the Create page. The next lesson in the Learning Path is Parent Child Master-Details in VBCS.

This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, look at building our first app, the simple Expense Report app. We'll spend a fair amount of time reviewing...

Oracle Visual Builder Cloud Service

Variables, Modules, and Functions, OH MY! Custom Client Code in Visual Builder

Not only does the new version of Visual Builder (as of 18.2.5) give you full access to modify your generated client source code it also makes it really easy to create and manage custom code within the client application. This custom code can be accessed and called from other custom code blocks and from visual editors like the action editor. To get the most out of your custom code, it is import to understand 3 key concepts and how they present themselves within Visual Builder.  1) Variables Variables are cornerstone to working with code. With Visual Builder, you will use variables to interact with UI controls, REST interfaces, and general application logic. Visual Builder support standard Javascript types with built in types as well as custom types that can be declared and instantiated as needed.  To create a variable, you use the variables editor found within the designer. It is denoted by a symbol and allows you to quickly create new variables you wish to use within your module. Simply select a type (or create a custom type) and give it a unique name.  2) Modules Variables and Functions are stored within the scope of a Module. Visual Builder presents three types of modules: The AppModule, the FlowModule, and the PageModule. You may also declare a variable within the scope of an Action Chain.  In the below screenshot, the hierarchy of the various module types is visually shown. At the top level, called "custom" in this case, you have your AppModule. An App can contain one or more flows, each with their own FlowModule, and each flow can contain one or more pages, each with their own PageModule. Within a page, there can be several UI events captured and each associated with and action chain. And within each module and/or action, we define our custom variables and functions.    3) Functions To create a custom function, you use the Javascript editor, denoted by the  symbol, for either the app, flow, page, or action. Within each you will see a Module defined that within you can create a custom function. To define the function use the prototype function within the module object. Below is an example of adding a custom function to the AppModule, it takes a string appends some additional text to it and returns that new string.    Putting it all together To put this all together, we are going to create some UI within which we can enter some text, hit a button to call the function and pass that text, then modify the string and bind it to an output control.  To do this we need to use variables, actions, and custom module function. The UI control that takes input is bound to a PageVariable we created within the page.   The output control is bound to the AppVariable we created at the app level.   Now, we create an Action Chain that gets called when the button is pressed. The Action chain calls my custom function and maps that PageVariable to that input.     Then the Action chain assigns the output of that function to my AppVariable.    Since those are already bound to my UI control, they update automatically when the action chain runs.     

Not only does the new version of Visual Builder (as of 18.2.5) give you full access to modify your generated client source code it also makes it really easy to create and manage custom code within...

A New Oracle Autonomous Visual Builder Cloud Service - Visual and Coding Combined

We are happy to announce the availability of Oracle Autonomous Visual Builder Cloud Service (VBCS) - Oracle's visual low-code development platform for JavaScript based applications with built-in autonomous capabilities. Over the past couple of years, the visual development approach of VBCS has made it a very attractive solution to citizen developers who leveraged the no-code required nature of the platform to build their custom applications. Many professional developers also expressed interest in the visual development experience they saw, but they were looking for additional capabilities. Specifically developers were demanding an option to have direct access to the code that the visual tools created so they can change it and enhance it with their own custom code to achieve richer behaviors. With the new VBCS version we are addressing these demands adding direct access to manipulate code, while keeping the low-code characteristics of VBCS. Visual and Code Based Development Combined Just like in previous versions, constructing the UI is done through a visual WYSIWYG layout editor. Existing VBCS users will notice that they now have access to a much richer set of UI components in the component palette. In fact they now have access to all of the components offered by Oracle JET (Oracle's open-source JavaScript Extension Toolkit). In addition you can add more components to the palette using the Web-components standard based Oracle JET composite components architecture (CCA). The thing to note about the visual editor is the new "Code" button at the top right, clicking this button will give professional developers direct access to the HTML code that makes up the page layout.  They'll be happy to discover that the code is pure HTML/JavaScript/CSS based - which will let them leverage their existing expertise to further enhance and customize it. Developers can directly manipulate that code through the smart code editor leveraging features such as code insight, syntax highlighting, doc access, and reformatting directly in their browser. The visual development approach is not limited to page layouts. We extend it also to the way you can define business logic. Defining the flow of your logic is done through our new action flow editor. With a collection of operations that you can define in a declarative way, and the ability to invoke your specific JavaScript code for unique functionality. Now that developers have direct access to the code, we also added integration with Git, leveraging the private Git repositories provided through Oracle Developer Cloud Service (DevCS). Teams can now leverage the full set of Agile methodology capabilities of DevCS when working on VBCS applications, including issue tracking, version management, agile planning and code review processes. Mobile and Web Development Unified With the new version of VBCS we further integrated the development experience across both web browser-based and on-device mobile applications.  In the same project you can create both types of applications, leveraging the same development approach, application architecture, UI components, and access to custom business objects and external REST services. Once you are done developing your mobile application, we'll package it for you as an on-device mobile app that you install, test, and run on your devices - leveraging the native look and feel provided by Oracle JET for the various mobile platforms. Standard-Based Data Openness With the new version you can now hook up VBCS to any REST data source with a few button clicks, leveraging a declarative approach to consuming external REST source in your application. VBCS is able to parse standard Swagger based service descriptors for easy consumption. Even if you don't have a detailed structure description for a service, the declarative dialog in VBCS makes it easy to define the access to any service, including security settings, header and URL parameters, and more. VBCS is smart enough to parse the structure returned from the service and create variables that will allow you to access the data in your UI with ease. Let's not forget that VBCS also lets you define your own custom reusable business services. VBCS will create the database objects to store the information in these objects, and will provide you with a powerful secure set of REST services to allow you to access these objects from both your VBCS and external applications. Visual Builder Cloud Service Goes Autonomous Today’s Visual Builder Cloud Service release also has built-in autonomous capabilities to automate and eliminate repetitive tasks so you can instead focus on app design and development. Configuring and provisioning your service is as easy as a single button click.All you need to do is tell us the name you want for your server, and with a click of a button everything is configured for you. You don't need to install and configure your underlying platform - the service automatically provision for you a database, an app hosting server, and your full development platform. The new autonomous VBCS eliminates any manual tasks for the maintenance of your development and deployment platforms. Once your service is provisioned we'll take care of things like patching, updates, and backups for you. Furthermore autonomous VBCS automatically maintains your mobile app publishing infrastructure. You just need to click a button and we'll publish your mobile app to iOS or Android packages, and host your web app on our scalable backend services that host your data and your applications.  For more about the benefits of Oracle's Autonomous Cloud Services visit this page. But Wait There is More There are many other new features you'll find in the new version of Oracle Visual Builder Cloud Service. Whether you are a seasoned JavaScript expert looking to accelerate your delivery, a developer taking your first steps in the wild world of JavaScript development, or a citizen developer looking to build your business application - Visual Builder has something for you. So take it for a spin - we are sure you are going to enjoy the experience. For more information and to get your free trial visit us at http://cloud.oracle.com/visual-builder    

We are happy to announce the availability of Oracle Autonomous Visual Builder Cloud Service (VBCS) - Oracle's visual low-code development platform for JavaScript based applications with built-in...

Oracle

Integrated Cloud Applications & Platform Services