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.
Conclusion
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.
Manage SAP Business One access rights
SAP Business One extension - what you should consider
SAP Business One vs SAP Business ByDesign
SAP Business One UI designer compared to Boyum Advanced Item Placement Tool
Many new functions in SAP Business One 9.0