SAP Business One Web client extensions: what you can build, and what happens to your add-ons
By Zain Abbas, Kodenova · Updated
More SAP Business One users now work in the browser, and every partner with a desktop add-on is asking the same question: what happens to my add-on? This guide explains what the Web client is, the ways SAP lets you extend it, where classic add-ons stop, and how to plan the move. It is based on SAP’s Web client extensibility guide and administrator documentation.
What is the SAP Business One Web client?
The Web client is SAP’s browser client for SAP Business One. SAP’s administrator’s guide describes it as offering “the SAP Business One core business logic and processes” in the SAP Fiori user experience. It reads and writes the same company database as the desktop client, so both clients can run side by side on one company.
A few facts that matter for planning:
- It is not HANA-only. The Administrator’s Guide for the Microsoft SQL Server version has its own section on installing the Web client, which runs as a Windows service there.
- It needs the Service Layer. The Web client’s installation prerequisite is an installed Service Layer with a valid registration in the System Landscape Directory (SLD). Both are bound to a database instance in the SLD.
- It runs in a browser. The administrator’s guide lists Firefox, Chrome and Safari (Mac and iPad) for the Web client. Its default port is 443.
- Extensibility has grown release by release. SAP’s Web client extensibility guide starts with 10.0 FP 2105 (July 2021). It has been updated for every feature package since, through FP 2608.
What can you extend in the Web client?
SAP’s extensibility guide describes “Fiori/SAPUI5 applications, URL mashup applications with an external backend service, and typical frontend applications created by HTML/CSS/JavaScript”. All of them are packaged as multi-target applications (.mtar) and deployed through the Extension Manager.
| Extension type | What it does | Technology | Available | Data access |
|---|---|---|---|---|
| Tile app (Fiori/SAPUI5) | A new app behind a tile on the Web client home page | SAPUI5 / Fiori tools | Current guide | Service Layer |
| Tile app (React, Angular, Vue, Blazor, SAP Build) | The same, built with your team’s front-end framework | Your framework, packaged as .mtar | Current guide | Service Layer or your own back end |
| URL mashup | A tile that opens an external web app in the existing window or a new one | Any web app plus a small manifest | Current guide | The partner app’s own back end, with Web client context |
| Web client UI API extension | Adds or changes controls on supported standard views, and on UDO/UDT views | JavaScript (up to ECMAScript 2017), JSON overlay files | From 10.0 FP 2405 | Service Layer (OData v4) via getService, plus external services |
| Server-side events | Notifies a back end when business objects change | Service Layer webhooks | From 10.0 FP 2602 | Webhook Messenger Service |
How do Web client UI API extensions work?
A UI API extension does not redraw the screen. It sends an overlay: a *.layout.json file that places new controls before or after an existing control, or changes one on it, identified by its GUID. Event handlers can have a before handler, which can change the parameters or stop the event, and an after handler for follow-up logic. The extension reads and writes data through getService, which uses the Service Layer’s OData v4 interface internally.
SAP is clear about the limits:
- Only the exposed controls, properties, events and methods are supported. They are a subset of what the Web client itself uses.
- Only the supported views can be customized. FP 2405 started with 62 list and detail views: sales and purchasing documents, inventory and production documents, journal entries and business partners. Later feature packages added more, such as items, incoming and outgoing payments, opportunities and service calls (FP 2502), down payment invoices (FP 2508), blanket agreements and payment runs (FP 2602), and checks for payment (FP 2608).
- Events can only be triggered by real user interaction. Firing them from code is not supported yet.
- Code must stick to ECMAScript 2017. Newer language features can fail when the extension is packaged or run.
Development uses SAP’s VS Code plugin (Chrome only) and the Web Client Inspector browser extension. You run the extension against a Web client with Developer Mode switched on. SAP says to switch Developer Mode off in production.
What is a URL mashup good for?
A URL mashup is the fastest way to bring an existing web app into the Web client: a portal page, a scanning app, a dashboard. The tile link can carry {b1-companyID}, {b1-language}, {b1-theme} and {b1-companyName}. With OpenID Connect single sign-on, the app can then skip asking the user to log in and pick a company.
Watch out for third-party cookies. If the mashup embeds your app in an iframe and the app relies on cookies, Chrome’s cookie changes can lock users out. SAP recommends installing the Web client and SLD under one root domain (through a proxy or FQDNs). Otherwise, open the mashup in a new tab or use partitioned cookies, the Storage Access API or an OAuth PKCE flow.
How are Web client extensions deployed?
- Package the project as an
.mtararchive with SAP’s VS Code wizard for Web client extensions. - Import it in the SAP Business One Extension Manager, a Server Tools component. It is reached at
https://<host>:<port>/ExtensionManageron the machine that runs the SLD. - Assign it to one or more companies.
- Open it in the Web client.
The same Extension Manager also handles “lightweight” desktop add-ons, the zip-and-.ard packages described in our add-on development guide. It is one tool for two package types. A desktop add-on package does not become a Web client extension.
Web client extension data is stored in the SLD database. SAP says backup and restore of extensions relies on the database backup, so include the SLD database in your backup plan.
What can classic UI API add-ons not do in the Web client?
SAP’s SDK describes the classic UI API as a DCOM interface to the running SAP Business One application, meaning the Windows desktop client. In practice:
| Classic desktop add-on does this | In the Web client |
|---|---|
| Adds a menu and a new form (SAPbouiCOM) | Not available. Build a tile app, or a UI API extension on a UDO/UDT view |
| Adds fields or buttons to a standard form | Only on supported views, with a Web client UI API overlay |
| Cancels a document add in the “before” form event | No equivalent document-level cancel. A pre-event handler can stop a control event, such as a button press. Enforce business rules on the server instead (see below) |
| Posts documents through the DI API connection it shares with the client | Call the Service Layer from the extension, or from your back end |
| Reacts when another user adds a document | Service Layer webhooks (from FP 2602) or the transaction notification procedure |
| Opens an external app or web page | URL mashup tile |
| Runs any .NET code on the user’s PC | No local code. Extensions are browser JavaScript, and heavy logic moves to a server |
Rules that must apply in every client belong in SBO_SP_TransactionNotification. It runs at the database level, inside the save transaction, so it applies whichever client or API saves the document. See transaction notification examples for SQL Server and HANA versions.
How should you migrate an existing add-on?
- Split screens from logic. List what the add-on shows (forms, buttons, menus) and what it enforces or posts (validations, automatic documents, integrations). Logic usually moves first, and screens second.
- Move rules to the server. Hard validations go into the transaction notification procedure. Automatic postings and integrations go into a service that calls the Service Layer. Both clients then follow the same rules.
- Check the supported views list for your feature package. If the screen you extend is on the list, rebuild the change as a Web client UI API overlay. If not, use a tile app or a UDO view, or keep that step in the desktop client for now.
- Turn standalone screens into tile apps. Use SAPUI5 if you want the Fiori look. Use React, Angular, Vue or Blazor if your team already knows them. Use a URL mashup if the app already exists on the web.
- Run both clients during the transition. Both use the same company database, so the desktop add-on can keep serving desktop users while Web client users get the new version.
- Test on your exact release. Web client APIs and the supported views change with each feature package. Test on a copy of the company with a normal user, not only with the manager account.
Not sure which API fits each piece? Our comparison of the Service Layer, DI API, UI API, B1if and API Gateway has a decision tree. The Service Layer request builder and SAP B1 table reference help when you rewrite DI API calls as Service Layer requests.
Who can build or migrate a Web client extension?
Kodenova is independent and works alongside your SAP partner. We build desktop add-ons with the UI API and DI API, Service Layer back ends, and the browser apps that sit on top of them, on SQL Server and SAP HANA. If you have an add-on to move to the Web client, see custom SAP Business One add-on development or contact Kodenova with your SAP Business One version and feature package.
Sources
- SAP Help Portal: Web client extensibility, Introduction
- SAP Help Portal: Web client extensibility guide, document history (FP 2105 to FP 2608)
- SAP Help Portal: Tile Extensions (Fiori, URL mashup, Angular, React, Vue, Blazor, SAP Build)
- SAP Help Portal: Creating a URL Mashup App (context placeholders)
- SAP Help Portal: UI API Extensions (10.0 FP 2405)
- SAP Help Portal: Web Client UI API References (scope and limits)
- SAP Help Portal: Web Client UI API, Supported Views
- SAP Help Portal: Web Client UI API, Overlay
- SAP Help Portal: Web Client UI API, Event Flow
- SAP Help Portal: Web Client UI API, getService (Service Layer OData v4)
- SAP Help Portal: Deploying Web Client Extensions on Extension Manager
- SAP Help Portal: Third-Party Cookies for Web Client Extensions
- SAP Help Portal: SAP Business One Administrator's Guide, 10.0 SP 2505 (Microsoft SQL Server, PDF)
- SAP Help Portal: Service Layer webhooks (10.0 FP 2602)
- SAP Help Portal: SAP Business One SDK, User Interface API
- SAP Learning: Introducing the SAP Business One and the Web client landscape architecture
Related services
Frequently asked questions
Does the SAP Business One Web client need SAP HANA?
No. SAP's Administrator's Guide for the Microsoft SQL Server version includes a section on installing the Web client, which runs as a Windows service there. Its prerequisite is an installed Service Layer with a valid registration in the System Landscape Directory, so the Service Layer must be set up first on either database.
Can I run my existing SAP Business One add-on in the Web client?
Not its screens. The classic UI API is a COM interface to the running Windows desktop client, so menus, forms and events built with it appear only there. Business logic in the add-on can be moved to a server process that uses the Service Layer, and then both clients can share it.
What is a URL mashup in the SAP Business One Web client?
A tile that opens an external web application, either inside the Web client or in a new window. The tile link can carry placeholders such as {b1-companyID}, {b1-language}, {b1-theme} and {b1-companyName}. The Web client fills these in, so the partner app knows the company and language without asking.
From which version can I customize standard Web client screens?
From SAP Business One 10.0 FP 2405, when SAP exposed the Web client UI API. It customizes a defined list of supported list and detail views, plus views for your own UDOs and UDTs. SAP adds views in each feature package, so check the supported views list for your exact release.
How do I deploy a Web client extension?
Package the project as an .mtar file (a multi-target application archive), import it in the SAP Business One Extension Manager, assign it to one or more companies, and open it in the Web client. The Extension Manager runs as part of the Server Tools and is reached in a browser at /ExtensionManager on the SLD host.
Do Web client extensions get server-side events?
Yes, from 10.0 FP 2602. The Service Layer supports webhooks, delivered by a new Webhook Messenger Service, so a tile app's back end can be notified when business objects are created or updated. Before that release, the usual server-side hook was the SBO_SP_TransactionNotification stored procedure.
Ready to get started?
Tell us what you need. You get a clear technical answer, a fixed scope and a price, usually within 24 hours.
