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.