Installing Visual Studio Code Plugin and SAP Business One Web Client Inspector

To develop the Web client extensions, you must first set up the environment.

It is recommended to use the Visual Studio Code plugin for the Web client because it provides you with an all-in-one environment. The development environment is set up for you automatically and doesn't require any manual setup. You can write, debug, and test your extensions directly within VS Code, eliminating context switching. You can also easily build and deploy your extensions directly to the Web client.

When you develop using the Visual Studio Code plugin, you can:

• Create a project in Visual Studio Code
• Select the relevant views to extend
• Preview the relevant changes
• Debug

To install the VS Code plugin, follow the steps provided on the Installing Visual Studio Code Plugin for Web Client | SAP Help Portalpage.

Web Client Inspector is a standard Chrome or Edge extension that helps app developers to inspect, analyze, and debug extensions and plugins for SAP Business One, Web client.

The key feature of the inspector is the ability to quickly locate the individual Web client app UI controls and display the control information in the browser development mode.

A control is a core element that allows the users to interact with the Web client application. Controls are UI elements, such as buttons, input fields, grids, or tables, that can handle user interaction, maintain their state, and manage any relevant data.

Key features of the Web Client Inspector:

• View UI elements in a tree structure
• Search and filter UI elements
• Get a Universally-Unique Identifier (UUID) and other properties of UI elements
• Inspect a UI element by right-clicking on it
• Locate and highlight a UI element by selecting it in the UI inspector panel
• Get Web client details, such as version, settings, extensions

To install the Web Client Inspector, follow the steps provided on the Installing Web Client Inspector | SAP Help Portalpage.