This repos describes how to utilize a SAP Fiori Launchpad Plugin to gain client-side insights into Fiori metrics with Azure Application Insights. It leverages the standard views for Azure Application Insights and a dedicated Azure Monitor Workbook for SAP.
Note
Find official API documentation for the Azure Application Insights JS snippet here.
A typical single instance setup would look like below. The plugin concept applies to native SAP on Azure deployments, SAP RISE, on-premises and SAP BTP Build WorkZone, Standard edition.
Note
Connection from BTP to the SAP workload on Azure can be done with the cloud-native SAP Private Link Service for Azure or the SAP Cloud Connector (SCC). For any-premises choose Azure VNet integration via ExpressRoute/VPN or the SCC.
Note
The reverse proxy is required in case of strict CORS policies. Proxy choices range from managed services like Azure Front Door or Azure Application Gateway to self-hosted solutions like Apache.
🧪Tested with Business Suite NW 7.51 and S/4HANA 2022 using Edge Browser.
- Azure Application Insights instance (access to connection string)
- Imported Azure Monitor Workbook (Create new, open code view </>, select Gallery template, copy & paste the json into it and save)
- Fiori Launchpad with SAPUI5 1.86+ (older Fiori stacks need to consider alternatives).
Note
You may upgrade your UI5 stack independently from the NetWeaver release
- Fiori Launchpad configured to use custom Plug-Ins. See SAP's Fiori docs (especially steps 76 onwards) to get started.
| Parameter | Value | Description |
|---|---|---|
| Launchpad Plugin ID | ZAZUREFLPPLUGIN |
Retrieve from builder.customTasks.configuration.app.name in ui5-deploy.yaml |
| Launchpad Plugin URL | /sap/bc/ui5_ui5/sap/ |
Re-use from here or collect from npm run deploy output |
| UI5 Component ID | microsoft.com.flpmonitor |
Verify from sap.app.id in manifest.json |
Note
Optionally add Azure Monitor for SAP Solutions Instance for infrastructure telemetery correlation
Default settings of this repos anticipate UI5 releases 1.86+. Use below table to understand potential feature scope for older releases.
| Feature | SAPUI5 release | Usage |
|---|---|---|
| AppLifeCycle | 1.38+ | Use SAP's public API to handle app loaded events |
| Interaction | 1.76+ | Use SAP public tracing APIs for analysis, matching SAP backend trace measurments |
| User Info | 1.86+ | Use SAP's public Fiori user API to correlate user info |
| Passport | n.a. | Use SAP's internal API to enrich requests with RootId and TransactionId for deep linking from Azure into SAP backend transactions |
If none are applicable revert to tracking Fiori hash changes only:
//uncomment in init function
$(window).hashchange(function () {
window.appInsights.trackPageView();
}Another alternative poses the App Insights configuration enableAutoRouteTracking. However, launchpad navigation durations are not reflected, because it gets treated as a large single-page-application (SPA).
git clone https://github.com/MartinPankraz/az-monitor-sap-fiori-plugin.gitThis app has been generated using the SAP Fiori tools - App Generator in SAP Business Application Studio, as part of the SAP Fiori tools suite. In order to launch the generated app, simply run the following commands from the generated app root folder:
npm installMaintain your Azure Application Insights Connection String and AICloudRole attributes on the Component.js.
npm run buildnpm startThere are multiple ways to deploy the plugin to AS ABAP. Learn more here
Note
The provided guidance focuses on AS ABAP but the plugin also applies to the SAP Build Workzone, standard edition (formerly SAP Launchpad service). Learn more here.
Consider the crossOrigin setting of the App Insights configuration. Read more about it here.
In case relaxation of the CORS policy is not an option, consider adding a reverse proxy. This is a standard practice with SAP Fiori integration with SAP Business Objects for instance. To do so adjust the hostname accordingly on the App Insights SDK by changing the connection string.
It would look something like this on the Component.js:
cfg: {
connectionString:"InstrumentationKey=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx;IngestionEndpoint=https://<your-reverse-proxy-hostname>/v2/track"
}and something like this on the reverse proxy with a special port to identify this special rewrite scenario (pseudo code):
<If "%{HTTP_HOST} == '<your-reverse-proxy-hostname>' && %{SERVER_PORT} -eq 7777">
Redirect "/" "https://<your azure app insights domain>/"
</If>Note
Learn more about overriding the SAP standard regarding CORS settings on the Fiori layer in this blog post.
Use the hot-key CTRL+SHIFT+ALT+S provided for SAPUI5 to enable debug mode from your Fiori Launchpad instance to load the non-minified sources for this plugin and the Azure App Insights SDK.
- 2022-12-14 Azure Monitor workbook added
- 2022-12-07 CORS guidance
- 2022-10-21 Automatic build process note for SAPGUI upload added
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit CLA open-source.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.