Skip to Content
Author's profile photo Gavin Du

How to Extend BPC 10.1 NW Web UI

Customization and extension are always important for enterprise software where requirements are so diverse and dynamic. BPC for NW considers such architectural requirement from the start of the product. It takes advantage from NetWeaver platform. Customers can implement their own ABAP code in standard BADI to change product behavior. The Excel client opens many APIs for customers to call in VBA and Macro. Since BPC 10.1 NW SP07, we have also made the web client extensible.

this article talks about how to extend BPC 10.1 NW web UI by an example, which is about a process integration with a third party process tool. In this scenario, user needs to define mapping of BPF process with external tool in an extended web UI of BPC.

What can be extended
Customer can add new pages in Administration, and can add entrance in the navigation tree view of Administration. In below two screenshots, the Workflow Definition link and view, the Process Mapping link and view are added to BPC web application.

Steps to extend

Step 1. Develop your web application. To be harmonized with BPC standard web UI, it’s better to use JavaScript technology based on SAPUI5 library. There are many ways to develop such a web application but we recommend you to use Eclipse. This article is not focusing on this are, you can find plenty of blogs in SCN regarding Eclipse and SAPUI5 development. Here is the official site for SAPUI5 development tools.

Step 2. Define customized views in customerView.js file. The most import thing in your application is to define where your web page to be added and this is done in the customerView.js file as below.

In this example, two views are added to Administration>Business Process Flow, one is Workflow Definition view, the other is Process Mapping view. Here parent: “admin-bpf-desc” refers to the Business Process Flow view, which already has two child view Process Templates and Process Instances. The id: “admin-loc-wkf-def” refers to the id defined in custimze.json file which will talked about later in step 5. viewName is the view name you defined in your JavaScript file (you can find it in the first eclipse screenshot). “security-task”: “P0109|P0123” refers to BPC task ID which will be checked when user accessing this view. Finally, the view need to be added to navigation object “admin-composite-container”.

Step 3. Deploy your web app as a BSP application. For details on how to deploy your web app as a BSP application, please read this article.

Step 4. Create or update customize.json file under BPC web folder. Open transaction SE80, navigate to Repository Browser, and open BSP Application bpcwebclient. Then go to bpcwebclient/Page Fragments to create or update customize.json file. Note we pre-delivered a sample file called customize_sample.json at same location. You can take it as a reference.

Step 5. Define path and links in customize.json file. How your views are loaded by BPC web application is defined in this file.

Here path refers to your BSP app web content path. viewDefination refers to the place where you define your customized views in step 2. adminLink defines links to your extended views. layoutName refers to the place under where you want to put the link, oVLayout2 is the second function group in Admin home page (2nd screenshot), which is Business Process Flow. id and linkText refer to the view defined in step2. linkTooltip defines the tooltip help of the link. viewId refers to the view ID you defined in customerView.js file and pushed to “admin-composite-contrainer”.

Step 6. Activate your BSP app and customize.json file, which is the final and easiest step:)

Summary

This web extension is supported at architecture level. your extension keeps intact and will work as before even if you upgrade your BPC support packages. It is independent on modelling technology, whether BPC Standard or BPC Embedded, same way. There is a pre-delivered BSP application BPCLocWebClient in BPC installation since SP07, which is the example I used in this article. You can take it as reference.

Notice current extension is only available for Administration pages. You cannot extend other pages for now. You are also responsible for security check and other security compliance for your web code.

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      That's great Gavin, thanks for the post. I remember a conversation about this in 2013, so am pleased to see it made its way into BPC!

      Author's profile photo Michael Scharf
      Michael Scharf

      Hi Gavin,

      Thanks for the great post! We tried to integrate a UI5 App into BPC. But we are struggling with the following issues:

      • You have mentioned a security-task”: “P0109|P0123” which refers to the BPC task ID. How and where can we get this task ID? Is it the Action ID of a BPF? The format looks different.
      • We have cloned the BPCWebClient BSP Application as it does not allow to create a customize.json file in the BPCWebClient application.
      • We have created a new customize.json file in the cloned BPCWebClient application and defined our external resource mapping but after debugging it looks like it is not calling our customizeView.js file. I have also tried to map resource to the default 'BPCLocWebClient' but it still does not work.

      Thanks!

      Best regards,
      Michael