SAP Business One Web client extensions: what you can build, and what happens to your add-ons

By Zain Abbas, Kodenova · Updated

Short answerThe SAP Business One Web client is SAP's Fiori browser client, for both SAP HANA and SQL Server. You extend it with packages deployed through the Extension Manager: tile apps (SAPUI5, React, Angular, Vue, Blazor or URL mashups) and, from 10.0 FP 2405, Web client UI API extensions. Classic UI API add-ons do not run there.

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 typeWhat it doesTechnologyAvailableData access
Tile app (Fiori/SAPUI5)A new app behind a tile on the Web client home pageSAPUI5 / Fiori toolsCurrent guideService Layer
Tile app (React, Angular, Vue, Blazor, SAP Build)The same, built with your team’s front-end frameworkYour framework, packaged as .mtarCurrent guideService Layer or your own back end
URL mashupA tile that opens an external web app in the existing window or a new oneAny web app plus a small manifestCurrent guideThe partner app’s own back end, with Web client context
Web client UI API extensionAdds or changes controls on supported standard views, and on UDO/UDT viewsJavaScript (up to ECMAScript 2017), JSON overlay filesFrom 10.0 FP 2405Service Layer (OData v4) via getService, plus external services
Server-side eventsNotifies a back end when business objects changeService Layer webhooksFrom 10.0 FP 2602Webhook 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?

  1. Package the project as an .mtar archive with SAP’s VS Code wizard for Web client extensions.
  2. Import it in the SAP Business One Extension Manager, a Server Tools component. It is reached at https://<host>:<port>/ExtensionManager on the machine that runs the SLD.
  3. Assign it to one or more companies.
  4. 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 thisIn 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 formOnly on supported views, with a Web client UI API overlay
Cancels a document add in the “before” form eventNo 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 clientCall the Service Layer from the extension, or from your back end
Reacts when another user adds a documentService Layer webhooks (from FP 2602) or the transaction notification procedure
Opens an external app or web pageURL mashup tile
Runs any .NET code on the user’s PCNo 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?

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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

Related services

FAQ

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.