What you should know when extending SaaS with VBCS – Part 1 The User Interface

Part one starts with looking at some of the user interface, as developers we not always gifted with good UI skills but that can be sorted by using a design agency to tweak/build the CSS files. A good UI is incredibly important for many reasons, the speed a user can do their job and performance of the screen itself. Sometimes the backend systems performance is finite and we cant get around the fact that the queries will take say 5-6 seconds, but with smart screen design we can design a UI experience where the user doesn’t even notice this.

Mind the size

When designing VBCS UI extensions to Oracle Fusion SaaS make sure you design the UI to fit the Fusion real estate, the screen space you have, correctly. When embedding VBCS within a “tab” in Fusion you are embedding an HTML5 app within an iFrame. This iFrame could be a toplevel object (using the Page Integration Wizard feature in Fusion) or at the object instance level using Application Composer in Fusion CRM. iFrames have their benefits but they also some disadvantages, one specifically is that if not careful the iFrame may be too small for the VBCS app causing nasty things like scrollbars to appear. Best practice is to ensure you know how big the iFrame will be, based on your user population browsers and then ensure any UI you build is responsive and adapts to the viewport appropriately.

When dealing with limited real estate it’s very easy to try and display all the information on a single page but this tends not to work out well. A better approach is to design a UI where we have the most important data visible at the first impression and then the additional data available via tabs or other links.

Image showing effect of too much vertical content

Beware of “drilling down”

We have seen occasions where customers have created custom screens for Fusion and then need to hyperlink to a standard Fusion screen.

Consider this scenario

“You have created a custom UI, embedded within Sales Cloud, where you list all proposals sent to a specific customer. Within this list you show the customer contact name. What you would like users to be able to do is click on the link and then “drill down” to the out of the box (OOTB) contact screen in Sales Cloud“

The issue in this scenario is that whilst the drilling down to an standard contact screen in Fusion is possible via Oracle Fusion Deep Links(link), what you might find is that Fusion will refuse to render itself the way you want. This is because by default a (deeplink) hyperlink will call the Fusion page just fine but because you are launching it from within an iFrame it will not render the contact region within the iframe and instead will open a new Tab in the browser showing the entire page.

This isn’t ideal behaviour but thankfully the workaround is quite simple. The easiest workaround here is to ensure that the drill down link replaces the current Browser tab instead of creating a new tab.

VBCS provides a special link type “Full body of window”, which sorts this out for you, this image is from VBCS Designer UI showing the option you need to select.

The link itself would follow the standard Fusion Deep link method which looks something like this image

https://://crmUI/faces/FuseWelcome?fndGlobalItemNodeId=HZ_FOUNDATIONPARTIES_CONTACTS_CRM_CARD&fndTaskItemNodeId=HZ_FOUNDATIONPARTIES_CONTACTS_CRM&fnd=%3BsubTabName%253DOverview%253BContactPartyId%253D99999%253B%3B%3B%3Bfalse%3B256%3B%3B%3B

The contact ID is set to 99999 and would be replaced by the contact ID in VBCS.

The above technique will load the Fusion contact page we desire but this time replacing the current contents of the window with the target of the deep link. Thankfully as caching and SSO are enabled, the page should render quite quickly and not ask the user for a login again.

Two things you should be aware of :

• Make sure you add controls/checks to your page so that when the user navigates
  to the deep link any changes you have made in VBCS are committed or discarded with a user choice box.

• If we deep link to a contact page in Fusion SaaS and then the user hits “OK”, or “Cancel” they will be navigated back to landing page for the object and not back to the VBCS extension – this behaviour may not be obvious to the user.

Lots of VBCS screens vs One VBCS Screen

This scenario is more of a balance between a UI Pattern and performance. When you embed any VBCS application in an iFrame there will be a level of “bootstrapping” required – i.e. loading the framework for your JavaScript application. This bootstrapping will entail loading the HTML5/VBCS application itself, loading any resources and additionally calling any “start-up” REST requests for the app.

Consider the scenario where you have a side bar with multiple custom tabs, each custom tab contains a VBCS app. If the user navigates from one tab to the other and then back again they will be opening and closing multiple VBCS applications and incurring the penalty of bootstrapping each VBCS application each time we navigate to/from the tab time.

There are multiple solutions to this problem

1. Firstly, ensure you are on the latest version of VBCS (19.1.x +). This version of VBCS automatically caches the VBCS app resources on the browser so that the bootstrap process doesn’t incur a network hit. Recently in some projects we’ve see the bootstrap times to be in the 1-2 second range with additional time for REST calls so reducing this time is crucial for a good UI experience.  By simply upgrading to the latest version, VBCS will automatically cache its own resources and later on in this document we detail how to minify the entire VBCS app to ensure performance is as good as we can get.

2. Consider merging functionality into a single VBCS application thus reducing the number of tabs in the Fusion user interface

E.g. When you click on the VBCS app tab it loads VBCS and presents you with an additional set of Subtabs (Vertical or Horizontal). This will ensure the VBCS app is loaded ONCE and we reduce the amount of bootstrapping we see.

Example screenshot showing each tab being related to a single VBCS app

Next Steps

Click here to proceed to the next article in this series, What you should know when extending SaaS with VBCS – Part 2 Getting Data in and out of SaaS