<p>about your learning experience to help us improve.</p>

You've completed

cleanFiles/bookmap_Developing_UI_API_Extensions_for_SAP_Busin_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2024-12-10T14:16:49.000Z

Customizing SAP Business One, Web Client Views Using UI API Extension

<div id="content"><div class="section"><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="A person in front of the SAP logo." alt="A person in front of the SAP logo." src="/service/media/TB1320_2409_en-US_media/TB1320_2409_en-US_images/U2_Emily_img.png" tabindex="0"><div class="imageCaption"></div><p tabindex="0">Emily is a developer and is starting to work on a project for one of their customers, OEC Computers. They asked Emily to add a button to one of the Web client views so when a user clicks the button, the current company information displays from the Service Layer. This information is useful when the users report issues to the system administrator.</p><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="The SAP Business One, Web client business partner detail view with a highlight over the “Get Company Information” button." alt="The SAP Business One, Web client business partner detail view with a highlight over the “Get Company Information” button." src="/service/media/TB1320_2409_en-US_media/TB1320_2409_en-US_images/U2_GetCompInfo_scr.png" tabindex="0"><div class="imageCaption"></div><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="The SAP Business One, Web client showing a pop-up window with the company information related to that business partner." alt="The SAP Business One, Web client showing a pop-up window with the company information related to that business partner." src="/service/media/TB1320_2409_en-US_media/TB1320_2409_en-US_images/U2_CusInfo_scr.png" tabindex="0"><div class="imageCaption"></div><p tabindex="0">In this video, Emily demonstrates how she adds the button to the Business Partner Detail view.</p><div class="kalturaVideoLessonWrapper"><div aria-label="" class="kalturaVideoLessonContainer" data-testid="video" id="1_2ikg3aa6"></div></div><div class="note"><div class="noteTitle"><span class="noteIcon"><img title="Note" src="/icons/note.svg"></span><span class="noteTitleText">Note</span></div><div class="noteBody">To preview the extension on the SAP Business One, Web client from Visual Studio Code project, you must enable the development mode in the Web client development environment. Follow the process in this link: <a target="_blank" href="https://help.sap.com/docs/SAP_BUSINESS_ONE_WEB_CLIENT/e6ac71d18c7543828bd4463f77d67ff7/78a7d245d90949968f180a8d1ebf6b8c.html">Running UI API Apps | SAP Help Portal.</a><p tabindex="0"></p>By default, the Web client developer mode is off and should stay off in the production environment. <p tabindex="0"></p>For more details on how to create UI API extensions refer to <a target="_blank" href="https://help.sap.com/docs/SAP_BUSINESS_ONE_WEB_CLIENT/e6ac71d18c7543828bd4463f77d67ff7/1fb1716fdee447df927abe315c52d57c.html">Working with UI API Apps in Visual Studio Code Plugin for Web Client.</a><p tabindex="0"></p> To learn more about the exposed controls used in the Web client, refer to <a target="_blank" href="https://help.sap.com/docs/SAP_BUSINESS_ONE_WEB_CLIENT/e6ac71d18c7543828bd4463f77d67ff7/62caf329233141f89068c686e40e2dae.html">Web Client UI API References.</a><p tabindex="0"></p> This extension and more examples are available for you on the <a target="_blank" href="https://help.sap.com/docs/SAP_BUSINESS_ONE_WEB_CLIENT/e6ac71d18c7543828bd4463f77d67ff7/4fe55ef56153479e804910ba4192abbd.htm">Samples</a> page of the SAP Help Portal.</div></div></div></div>

How to Customize a Web Client View

Developing Extensions for SAP Business One and the Web Client

<div><div><div><div><div>Learn how to add a button to the business partner detail view using Visual Studio Code and Web Client Inspector in this step-by-step tutorial video.<br><br># This description was auto-generated #</div></div></div></div></div>

Adding a Click Button to Get Company Information from the Service Layer.

Let's look at how to add the button to the business partner detail view. After installing the Visual Studio Code plugin and the Web Client Inspector, I can start creating a UI API project. I’m using Visual Studio Code with the Web client development plugin. This plugin enables you to run a wizard that takes you through a step-by-step process for creating the extension. From the Visual Studio Code, I’ll run the wizard. I choose the View menu, then select the Command Palette. From the dropdown menu, I select the Open Template Wizard option. I choose the generator for SAP Business One Web Client Extensions, then choose Start. I select the UI API App option, then choose Next. Here, I’ll fill in basic information about my new application. Then, I choose Next. In the Module Attributes step, first I enter a module name and a view name to be used in this project. Then, I select the object type. I have two options for the object type field: System Object or UDO/UDT. I want to extend a system view, so I keep the System Objects selected. Finally, I open the system view dropdown to see all the supported views that can be extended. I can choose the view from the list or start typing the view name. I select the Business Partner Detail view, then choose Next. Now, I must define the view settings. I go to the Web client and copy the URL of the Business Partner detail view. I go back to the Visual Studio Code project and paste the URL. I choose Next and Finish. Let's look at the created project. The Project folder name includes the Application ID and the version number that I defined in the wizard. I select the module name that I defined for the view that I extended. Under Layout, I see the JSON file, which includes a default UI element for extending the Business Partner Detail view. The UI element is of button type. Next, I need to decide where to place the new button. I go to the Web client. The Web Client Inspector is already open. I want to place the new button before the Edit button. I right-click on the Edit button, and the button is highlighted in the UI Inspector. In the Properties tab, I see the properties for this specific control. I copy the Edit button’s globally unique identifier value also known as the GUID. I go back to my Visual Studio Code project, to the layout JSON file of the extended Business Partner Detail view and paste the Edit button GUID value to replace the sample GUID value. On this view, the Web client UI API can figure out that the new button will be placed before the Edit button. In addition, in row 18 I see the onButtonClick function that will be called when the new button is clicked. Next, I choose the controller folder. The controller includes the business logic of the application. Under the controller, there is a JavaScript file created automatically for each module that I add to the application project. The JavaScript contains the business logic of the extended view. In this case, it is the extension of the Business Partner detail view. By default, the file is created with some event handler functions and contains the OnButtonClick function, which will be called when the newly added button is clicked. The default code of this function calls the service layer to get the company information, then displays it in a message box. To preview my new project in the Web client, I right-click the layout JSON file and select Preview (Web Client). I login to the Web client. I see that in the Business Partner Detail view there is a new button called Get Company Information before the Edit button. I click it to view the company information.