The Premise

SAP Business Network for Asset Collaboration

SAP Business Network for Asset Collaboration (BNAC) is SaaS solution hosted on Business Technology Platform. Historically, we have seen SAP customers having specific processes or data, niche to their Business. This requires SAP products to be customizable or extensible. This is relevant for cloud solutions as well. In this blog we will explore the UI extensibility supported by BNAC.

Adaptive UI aka Key User Adaptation

With key user adaptation, one can change the user interface of SAP Fiori apps directly in the launchpad - intuitively and without having to write new code. This makes it easier for non-technical Business users also to customize UIs.

How does BNAC enable Key User Adaptation?

BNAC supports adapting UIs in two applications. Work Orders and Notifications.

Work Order application:

Adapt UI features: Work Order application -1

Adapt UI features: Work Order application -2

Notification application:

Adapt UI capabilities in Notifications application

Refer Adapting the UI help page to understand the various possibilities of changes that can be done on the UI.

As a pre-requisite, to be able to adapt UI using key user adaptive capabilities, the user should be assigned FlexKeyUser portal role.

How can I leverage Adapt UI to add my custom section?

If there is a use case where you would like to show additional data coming from another source in the context of the object you can build a custom application and embed it as a section using Adapt UI.

To build a custom app, you can use any standard approaches that SAP defines, in an environment of your choice, Cloud Foundry, Kyma or ABAP.

In this blog, I have tried a Proof of Concept using development on Cloud Foundry with a basic Fiori application and cloud portal service to host the app. 

Typical high level architecture for custom UI app embedded using Adapt UI

For simplicity, I created a basic freestyle application with a bunch of fields that I would like to see against a Work Order.

Fiori application templates wizard

Once the app is built and deployed, you can use either SAP Cloud Portal Service or Work Zone to host/present your app via a launchpad.  

Few Tips / Things to consider:

• Since you access the app from the launchpad, the launchpad shell has a header which will be visible in your extension when you configure via Adapt UI. This might not be desirable, hence you can remove it by adding the below lines in your App.controller

if (sap.ushell.Container.getRenderer("fiori2")) {
sap.ushell.Container.getRenderer("fiori2").setHeaderVisibility(false,true);
}

• Adapt UI internally uses iframe to render the custom application when you add a URL to the header or as a section. So, typically sites block requests originating from unknown sources to avoid cross-site scripting. In our case we trust the source, so you can whitelist is by adding content-security-policy header in the Site Manager settings of your launchpad that is hosting your custom application.

• The context of the object is passed as a URL parameter. So, your application should be able to read/access it and you can use to to further fetch more information that is relevant to that particular object. There are many ways to extract it, one of the ways is as below:

var urlParams = new URLSearchParams("?"+document.referrer.split("?")[1]);
var orderId = urlParams.get("orderID");

• The launchpad URL sometimes may have more than one “?” or a ‘#’. It’s important to understand the syntax and handle it accordingly. '#' in a URL is typically used as a fragment identifier. Anything that comes after # is typically not sent to the server but the browser uses it to resolve the specific location within a document. So, make sure the parameter that you wish to send to this URL from the source portal is before the ‘#’.

Pattern example 1: Notice there is a "?" and parameters after the '#'. This is just the fragment identifier.

https://xxxxxxx.cpp.cfapps.xxxx.hana.ondemand.com/site/woextain#wo-disp?sap-ui-app-id-hint=saas_approuter_woext2

Pattern example 2: Notice that there are 2 '?", once before and one after the '#'. The one before the '#' is the query parameter and the one after is the fragment identifier.

https://xxxxxxxxxx.cpp.cfapps.xxxx.hana.ondemand.com/site?siteId=1314b6fd-5f30-412b-b4d8-c223d28ad4a1#wo-disp?sap-ui-app-id-hint=saas_approuter_woext2

How to add the extension to the BNAC application?

Once you have your custom application ready, all you need to do is configure the URL and add it as a section as shown below. 

Design time and Runtime of Adapt UI based embedded applications in Work Order app

Demo showing how to embed custom applications via Adapt UI in Work Order application

Conclusion

BNAC provides a number of ways to extend applications, via extension points in some apps such as Equipment, and enables Adapt UI capabilities in a few such as, Notifications and Work Orders applications. Depending on the nature and complexity of customization and extensibility, this activity could range from something a business user could do themselves, to where, technical skillset could be required, or a combination of both as explained in this blog. Enabling applications to support Adapt UI provides a lot of flexibility for the end user and also could potentially be a replacement to extension points as this keeps in-app extensions decoupled and less dependent on standard code thereby also decoupling from release dependencies.