Embedding SAP HANA App or Any other Web App into SAP Business One

[YatseaLi]

You have built a Fiori App or SAPUI5 Web Application hosted in the XSEngine of SAP HANA, or a web application developed with ASP.NET/PHP etc. And would like to embed it into SAP Business One as part of B1. As a result, the users can accomplish his/her system-related daily work inside B1 with the same user experience rather than switching between B1 and HANA App/other external web app.

To do so, SAP Business One provides a web browser widget since version 9.0, which allows you to customise the target URL of web application, and then the widget can be showed in the cockpit. But this web browser widget is not available in the new Fiori style cockpit of B1H 9.1(which may be available in the future patch.)

Alternatively, you can use the WebBrowser user control (SAPbouiCOM.BoFormItemTypes.it_WEB_BROWSER)  in UI API of SAP Business One 9.1 to open the web application within an Add-On form. Therefore UI API Add-On as a container is needed to accommodate such a web application in SAP Business One, whatever it is a web app in XSEngine of SAP HANA or any other web app developed with ASP.net hosted in IIS etc.

In order to simplify of embedding SAP HANA App or any other web app into SAP Business One, I have created a container Add-On named “B1xAppContainerAddOn”, which can embed your HANA Apps or any other web apps into B1 with configuration. The sample screenshot as below:

For HANA App:



For any web app with a given URL:

The features of  B1xAppContainerAddOn

1.Customize menu item(s) in B1xAppContainerAddOn to open your multiple HANA app(s) or any other web app(s):

You can customize multiple menus in  to open several HANA apps or web apps. One menu entry for one web app.

The following options of menu can be customised within B1xAppMenus.xml located in the Add-On folder after installation.

-FatherUID: The father menu id of your menu, by default, it creates a sub folder name “My HANA App” on the top of B1 main menu.

-String: Caption of menu.

-Image: Replace the icon image file of your app with the same name “xApp_icon.png”.

-Position: the position index of menu, starting from 0.

-TargetHANAxApp: If the target web app is a HANA app hosted in XSEngine of SAP HANA, specify the package of your entry page.
For example, the full path of your HANA app is open with URL like this. https://<HANAServer>:4300/B1SpatialDemo/ui/index.html

You just need to set the TargetHANAxApp as /B1SpatialDemo/ui/index.html and leave the TargetWebAppFullUrl as blank. The tool will compose the full url for your HAAN app dynamically by adding the https://<HANAServer>:4300 in prior to TargetHANAxApp.

-TargetWebAppFullUrl: If you have web app which is not hosted in XSEninge of SAP HANA,for example, a web application hosted in IIS, then you can specify the TargetWebAppFullUrl as your web app url. Please noted that TargetWebAppFullUrl has higher priority than TargetHANAxApp, if WebAppFullPath is not empty, then it will be used as the target URL. The TargetHANAxApp will be ignored.

-FormTitle: The title of your Web App Form, the default values as "My Web App"

-PassB1CredInUrl: "true" or "false" to determine if current user’s B1 credential will be added to URL as parameters including CompanyDB, User and Language, which can be used in your target web app to support connection to dynamic B1 company schema to support multi B1 company.

For example:

https://<HANA_SERVER>:4300/B1SpatialDemo/ui/index.html?CompanyDB=SBODEMOUS&User=manager&Language=ln_English

-PassSLContextInUrl: "true" or "false" are possible values. If set to true the Service Layer Context will be passed in the URL, the SL context is obtained via UI API new SSO method available since B1H 9.2 version (for more information on SL SSO please check the blog SAP Business One Service Layer SSO with UI API).

Url example:

https://<HANA_SERVER>:4300/B1SpatialDemo/ui/index.html?SLCONTEXT=B1SESSION=cd41846e-638f-11e6-8000-0...

Note: This feature is only implemented in the source code and not in the prepackaged addon executable and installer. You can download the source code from here.

In my HANA sample app, I have models and procedure deployed to SBODEMOUS, SBODEMOAU for Sales Analysis by Geospatial, using Server Side JavaScript(xsjs) to invoke the procedure to retrieve values from the models. To enable your HANA app work with multiple B1 company schemas, as a best practice, it is recommended to have the Company schema or company package dynamically as parameters into XSJS instead of a static company schema.

https://<HANASERVER>:4300/B1SpatialDemo/services/getCustomerList.xsjs?CompanyDB=SBODEMOUS&User=manager&Language=ln_English

An example of the B1xAppMenus.xml:

<?xml version="1.0" encoding="UTF-16"?>
<Application>
	<Menus>
		<action type="add">
			<!--Menus for your B1xApp
It will add an folder on top of B1 Menu.
You can customize the menus as you like, except below
1.The naming conversion of menu id as "B1xApp_n" (n=0~9), used to open the xApp.
2.Image name "xApp_icon.png", the icon file name must be "xApp_icon.png".-->
			<Menu Checked="0" Enabled="1" FatherUID="43520" Position="0" String="My Web Apps" Type="2" UniqueID="B1xApp" Image="{0}\xApp_icon.png">
				<Menus>
					<action type="add">
						<Menu Checked="0" Enabled="1" FatherUID="B1xApp" Position="0" String="HANA App#1-Customer/Sales Ana on Map" Type="1" UniqueID="B1xApp_1"

TargetHANAxApp="/B1SpatialDemo/ui/index.html" TargetWebAppFullUrl="" PassB1CredInUrl="false" PassSLContextInUrl="true" FormTitle="Customer and Sales Analysis on Map"/>
						<Menu Checked="0" Enabled="1" FatherUID="B1xApp" Position="1" String="Web App#2-SuccessFactor" Type="1" UniqueID="B1xApp_2"

TargetHANAxApp="" TargetWebAppFullUrl="https://pmsalesdemo8.successfactors.com/sf/home?_s.crb=RsKr8UXadKuYx%252bJKVgONbYDMjwY%253d"

PassB1CredInUrl="true" FormTitle="HR - SuccessFactors - Dashboard/KPI"/>
					</action>
				</Menus>
			</Menu>
		</action>
	</Menus>
</Application>​

As a result, the menus created as screenshot below:

2.A UI API form embedding a Web Browser to open the web app when click a menu entry

B1xAppContainerAddOn listen to the menu events for the menu id following the pattern "B1xApp_n"(n=0~9), open a UI API form embedding a web browser with the given target url and form title of the web app.

 

How to use B1xAppContainerAddOn?

You can download the lightweight Add-On package, Binary Files and source code of B1xAppContainerAddOn here.

Latest source code of the B1xAppContainerAddOn (containing the SLContext implementation) can be donwloaded from here.

Option 1: Using lightweight Add-On package of B1xAppContainerAddOn

The lightweight installer of B1xAppContainerAddOn is available as B1xAppContainerAddOn_LW_Installer.zip.  You can use import and deploy B1xAppContainerAddOn, then just configure the menus and your target web app in B1xAppMenu.xml after deployment.

Step 1: Download the lightweight installer B1xAppContainerAddOn_LW_Installer.zip from download area above

Step 2: Import the lightweight Add-On package (B1xAppContainerAddOn_LW_Installer.zip) through lightweight Add-On deployment (SAP Business One menu=>System=>Add-On=>Add-On Administration)

Step 3: Assign the extension to your target company and users.

Step 4: (If applicable) Deploy your HANA App or external web App

Step 5: Customize the menu caption, icon and B1xAppPath or WebAppFullPath etc as described above the B1xAppMenu.xml and B1xAppContainerAddOn.exe.config

Step 6: Start the Add-On from Add-On manager.

Please note that the HANA app or external web app will be deployed separately, and the Add-On name is fixed as “B1xAppContainerAddOn” in Add-On Manager. If you would like to package your own lightweight extension package including HANA app delivery unit and specific configuration for your solution, check option 2 below.

If you would like to learn more about the lightweight extension management, please check this document:  How to Package and Deploy SAP Business One Extensions for Lightweight Deployment in SAP Business One...  (S-number login required)

Option 2: Package&Deploy your own lightweight Add-On Package with the binary files

You also can package your own lightweight extension with solution name and version management instead of fixed extension as B1xAppContainerAddOn in option 1. The executable files of the B1xAppContainerAddOn are also available in download area above as B1xAppContainerAddOn_executable.zip.

Step 1: (If applicable) Export your HANA App with SAP HANA Studio, File=>Export=>SAP HANA Content=>Delivery Unit.

Or deploy your external web app if necessary.

Step 2: Download and unzip the executable files (B1xAppContainerAddOn_executable.zip) from the download link above.

Step 3: Customize the menu caption, icon and B1xAppPath or WebAppFullPath etc as described above the B1xAppMenu.xml in the executable files in step 2.

Step 4: Package your own lightweight Add-On Package with ExtensionPackage tool, which can be found in the SDK installation folder. For example,

C:\Program Files (x86)\SAP\SAP Business One SDK\Tools\ExtensionPackage

Now you can enter the Extension name and version freely in the basic information page.



In Extension File, so you can use them for both 32 bit and 64 bit client, for this B1xAppContainerAddOn Add-On is compiled with any cpu option.



If there is a HANA App delivery unit exported in step 1, now you can upload the delivery unit of your HANA extreme App in the App for the version for SAP HANA. Be sure that your HANA App Delivery Unit can be imported to your target HANA system; otherwise you may receive an error for uploading the HANA Delivery Unit.

Then finally click the Package button to save your package. As a result, a ready-to-use package will be created including everything in one package.

Step 5: Import your own lightweight Add-On package in step 3 through lightweight Add-On deployment (SAP Business One menu=>System=>Add-On=>Add-On Administration).

And the delivery unit of HANA App will be deployed when the package is deployed if HANA app is included in Step 3, so you don’t have to deploy the HANA App by manual.

Step 6: Start your Container Add-On for your Web Apps from Add-On manager.

 

Option 3: Source code of B1xAppContainerAddOn is provided above with AS-IS license for modification

Alternatively, if B1xAppContainerAddOn doesn't accomplish your specific requirement to accommodate the web app,  source code of the tool is also available for your modification, and then follow the steps in option 2 to package and deploy it.

 

License&Support:

This B1xAppContainerAddOn tool and its source code are provided by SAP under SCN AS-IS license agreement.

No official support from SAP. If you have any question or feedback, you can leave a comment. I will do my best to reply. Thank you.