VBCS: Create your Mobile Application

Now that we have set up a first stable version of our application within VBCS, it is time to explore the mobile capabilities of VBCS. It leverage the capabilities of MAX (Mobile Accelerator) and is build in to the VBCS platform.
This blog post will take you through the basics of the functionality.

We start by sharing our application resources of the build VBCS web application. In the security properties we toggle to enable Resource sharing.

Once this is done, we go to the home screen and create a new mobile application.

This action will open MAX within VBCS. In the create application wizard we choose the
Screen with Top Tabs as basic template.

In the next step we can give the application a name (Screen Title) and already configure how many tabs we want the application to have and specify the names. Lets start with the Tracks and Speaker page from the earlier created application.

In the next step of the wizard, for the content we select ‘List Content’ as screen.

We have completed the wizard, so lets click the green ‘Create’ button to create the mobile app.

On the next page, we want to add data to the generated app and page, so we choose the ‘Add Data’ option.

For this we need to select a layout again, so to display the data it feels ok to add 4 fields per row on the page, we select the top right option and press Next.

Now that have selected how to display the data, we need to select a data source. Remember that we turned on the share application resources as first step of the blog? We are now going to add the application here to use the resource. Select the ‘Add Application’ option.

In the next screen we select the app we want to use:

And after that we can select business objects from that application.

After Drag & Drop’ing all the fields we want to show. You can see the data in action, by pressing the ‘Live Data Preview’:

With this we also completed the wizard to add the data to the screen and we can press finish to exit the wizard.

The phone app now looks like above, but we want to add a detail screen to this page. So as you might expect we need to select ‘Add a Detail Screen’.

In the wizard/train I select a simple screen, enter ‘Track Details’ as title and select form content.
After this we go to the detail screen and again select the ‘Add Data’ option.

Now we go through the wizard again, to drag & drop fields on the form component, but as you can see we drop more components on this form then on the previous layout. In the parent page we had a form that displayed 4 fields, here we are going to show more details:

After setting up these two pages, we still want to change the icon for our app. So go to the Application Settings. There we find the application icon and we change it to our desired logo.

Now we can run our app in the test mode. We can select the layout and the phone.

However, you can also ‘Test on Phone’, by pressing this button, a QR code is generated.

This QR code enables you to test your application on your phone. You need the MAX app for this. However, this is a clever trick by Oracle. You download the special MAX app and then add your application by scanning this code.
This way you can actually test the app on your phone and see the native behaviour, but you do not need to go through the trouble of getting your app accepted on either the play store or the app store.
A great way for easy testing on your phone!

VBCS: Action Handlers, send an email

Within VBCS, Virtual Builder Cloud Service, you can add custom actions in menus or on buttons. We will explore this feature in this blog by allowing people who visit our Tech17 application to send an email to a speaker.

Within the REST service, I added the email field, so it does now come back in the collection as well. I changed the extension and business objects accordingly, I will not cover that in this blog post.

The result of the service now looks something like this.

On the existing Speakers page, from the common section, I drag & drop a button into the list view item. On the right hand side, I select the Action tab, the hand with the arrow next to the pointing index finger.

When clicking the green ‘Add Action’ button, you see a couple of predefined actions. However, we want to do a custom action, so we click the ‘Add Custom Action’.

This brings us to the custom action screen, in where we can choose out of a lot predefined custom actions. Using this actions you can define a flow of actions that you want to happen when pressing the button. Under Miscellaneous, there is and ‘Compose Email’ option, which I drag and drop into the center.

The ‘Compose Email’ dialog will appear.

In the dialog, I can either enter data myself or we can select it. When clicking the data icon, I select the Speaker Business Object, after which the E-mail field is automatically selected, because it is configured as mail property.

It will be selected and entered in the inputfield.

After this, I add the ‘Message about the nlOUG’ as subject. I want to have a convenience in the body, by starting with the Speakers name, which I can select again from the business object.

After this, pressing Done on the top right will bring us back to the speaker page.

Now that the page is done, we can press the run icon and run the page to test our new functionality.

Pressing the ‘Send Email’ button next to my own name, opens the email client on my laptop and start a new email. It will fill the To, Subject and even the name in the start of the body!

VBCS: Integrate VBCS with PCS

The integration between VBCS (Visual Builder Cloud Service) & PCS (Process Cloud Service) is getting a lot better, you can now create and start processes from within VBCS. It is also possible to create a tasklist or task screens within VBCS. In this blog I will show you how to set up VBCS to be ready for these features as well as how to create a process and tasklist connected to this process. 

In the current release (17.3.5) of VBCS it is not yet possible to explore and connect to existing Process Cloud Instances. The whole process needs to be initially created from within VBCS. It also needs to be deployed from VBCS the first time, after that it can be deployed from either PCS or VBCS. After this it can be edited and adjusted within PCS. 

First we need to go to the security settings within VBCS, in the Access section, enable the basic authentication for business object REST APIs.

After that you need to go to the home page from VBCS. There is a somewhat hidden menu there on the right where an Administration option is hidden in a menu.

This brings up several Administration Options, of which some are required to fill out before VBCS & PCS are connected and integrated together. On the Tab ‘Associated Service Instances’ fill out the URL to the instance of Process Cloud.

Now we still need to go to the Allowed Origins tab to prevent CORS from happening.

To create a Process connected with VBCS, we need to go to the Business Objects under the Data Designer section. In here, there is an extra tab on the right called ‘Processes’. There is a green button to add a New Process.  

We give this a name, to recognise it within PCS, we name it ‘VBCS Process’.

After this it will show in the Processes tab on the Business Objects page.

When clicking the menu icon, you can select the Process Editor. Doing this will actually bring you to PCS and open the Process within PCS.

But before doing that, as said, we need to deploy from within VBCS first.

From the action bar we can select the ‘Deploy All’ option.

Especially the first time, the deployment might take a while.

While Deploying the button is greyed out and you can see that it is busy working on the deployment.

When the deployment is done, we can click the ‘Edit Processes’ link that brings us to PCS. The ‘Manage Process Roles’ takes you to PCS as well, but does not open the process but the security settings where you can assign users to your process roles.

Clicking the Edit link brings up the VBCS Process. In here I only have a User Task, since I want to task to be created to show up in the tasklist that we are going to build within VBCS.

Now let's start at least one instance so we have a task ready to show in the tasklist in VBCS. Here you see a running instance from our VBCS Process.

Enough about PCS, lets move back to VBCS and start working on our tasklist. In VBCS I open the Page Designer. In the components on the left hand side, there is a Process tab.

The first icon is the tasklist, when dropping this on the page a wizard will appear on the right hand side.

Here it will give you the options of selecting any of the PCS processes you created from within VBCS, this means you can have separate tasklist for different processes. Lets select the VBCS Process.

Pressing Next will bring us to the detail screen, I actually leave all the defaults on.

Clicking the green ‘Finish’ button will finish the wizard and bring up the tasklist.

As you can see, the instance that is started and waits for the human interaction is shown in the Tasklist already. In the menu, you can select actions, for this example I will press approve to see the integration with PCS working both ways.

The feedback is giving within VBCS, the action is performed. Once the fetching is done, the task will disappear from the tasklist.

Just to complete the circle, let's have a look at the instance now being completed within PCS.