Extend SAP Business One web client interfaces
5 June

Extend SAP Business One web client interfaces

UI API extension development with Visual Studio Code

In a recently published video, SAP Business One Product Management presents the development of UI API extensions for the SAP Business One Web Client before. This process enables companies to customise their web client user interfaces to specific business requirements. SAP Business One uses Visual Studio Code (VS Code) as the development environment.

Preparation and installation

At the beginning of the video, you learn that you can customise the web client using UI API extensions. First of all, you have to create the Visual Studio Code is equipped with the corresponding plug-in and the Web Client Inspector. These extensions are necessary to create a UI API project. After installation, you can start the project creation wizard.

Project creation step by step

The project creation wizard guides the developer through several steps. Firstly, at minute 0:40, the 'SAP Business One Web Client Extension UI API' is selected. Then basic information such as the application ID, the application version and the provider of the application must be entered. This information is demonstrated in the video from minute 0:51.

Selection of the view to be expanded

The next step, from minute 1:16, is to select the view that you want to expand in the SAP Business One web client. Here you can choose between a system object or a user-defined object (UDO) decide. In the example video, the Business Partner Detail view is selected. The URL of this view is inserted into the wizard at minute 1:40 to start the extension.

Structure of the project

After the setup, the video explains the structure of the project from minute 2:08. The layout is described in a JSON file that contains all UI elements. Developers only need to specify where they want to place the new UI element. As an example in the video, a new button is created and inserted before the Edit button.

JavaScript controller

The next step, from minute 2:48, leads to the JavaScript controller, which contains the entire logic of the application. In this case, you create a Event handler for the new button, which retrieves all company information from the service layer with one click and displays it in a message box.

Preview and test of the SAP Business One web client

The video presents a new function with the preview option, starting at minute 3:13, which makes it possible to test the project before publication. The video shows how the new 'Get Company Information' button appears and works in the SAP Business One web client.


The ability to develop UI API extensions with Visual Studio Code provides companies with a flexible way to customise their SAP Business One web client interfaces. This process is structured and user-friendly, allowing developers to work quickly and efficiently. With the new preview function, changes can be tested immediately, which significantly reduces development time.

In summary, the video shows that the customisation of web client views with the UI API and Visual Studio Code is not only possible, but also relatively easy to handle. Developers can better implement specific business requirements and improve the user-friendliness of their SAP Business One environment.

Contact Versino
SAP Business One Access Rights Administration

Manage SAP Business One access rights

The administration of SAP Business One access rights plays a central role. This can quickly become a challenging aspect in the management of ...
SAP Business One extension

SAP Business One extension - what you should consider

As a company that is implementing or has already implemented SAP Business One, you will sooner or later come across the topic of enhancements ...
b1vs Bydesign

SAP Business One vs SAP Business ByDesign

There are still some people who associate SAP primarily with software solutions for large corporations. In the process, completely ...

SAP Business One UI designer compared to Boyum Advanced Item Placement Tool

There are currently three relevant ways to customise or extend SAP Business One. First, there are the board tools of SAP: ...

Many new functions in SAP Business One 9.0

We'll have to wait a little longer. According to the latest plans from SAP, version 9.0 of SAP Business One ...

SAP Business One - What is - What will be

Recently we have noticed (to our delight) a rapid increase in interest in SAP Business One. This is due to ...