Creating a Grid with Customized Data Model

Objective

After completing this lesson, you will be able to create a grid with a text column and a clickable button column.

How to Create a Tab with a Grid

Two people on opposite sides of the SAP logo.

In the previous lesson, Jayson Butler, the sales manager at OEC Computers, asked Emily to make changes so that his sales employees could see their customers’ latest purchases when reviewing the business partner master data.

Emily first extended the Business Partner Detail view. After that, she added a specific tab containing a grid with the last five items purchased by the customer, so that clicking on an entry in the Item Name column opens a Google search for the item.

The SAP Business One, Web Client Business Partner Detail view showing five item codes and names

In this video, Emily will show you how the controls were added.

For this scenario, there is a prepared source code sample that you can open on Visual Studio Code: Sales Assist App Sample.

Note

To preview the sample extension on the Web client from the Visual Studio Code project, go to the .vscode folder. In the launch.json file, enter your Web client business partner detail view URL link.

Summary

  • A grid displays the last five items purchased by each customer in a dedicated tab of the Business Partner Detail view.
  • The Item Name column is clickable, opening a Google search for the selected item in a new tab.
  • Data for the grid is loaded dynamically using a service layer query and linked to the grid through a custom data source.
  • Layout and control definitions are managed in a JSON file, while business logic and event handling are implemented in JavaScript.