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

You've completed

cleanFiles/bookmap_Building_Side-by-Side_Fiori_Applications_w_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2025-03-05T07:34:47.000Z

Developing a Sample Application with SAP Build Apps

<div id="content"><div class="section"><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="Flow chart of the end-to-end integration process with the first step highlighted: Develop." alt="Flow chart of the end-to-end integration process with the first step highlighted: Develop." src="/service/media/TB1330_2502_en-US_media/TB1330_2502_en-US_images/6.2_DevelopApp_img.png" tabindex="0"><div class="imageCaption"></div><p tabindex="0">In this lesson, you’ll learn how to develop an application with SAP Build Apps.</p><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"><p tabindex="0">The following video uses the pay-as you go model. However, the process is the same as the SAP Build Apps free version.</p></div></div><div class="kalturaVideoLessonWrapper"><div aria-label="" class="kalturaVideoLessonContainer" data-testid="video" id="1_4qbgtfmx"></div></div></div></div>

How to Develop an Application with SAP Build Apps

Developing Extensions for SAP Business One and the Web Client

Developing an Application with SAP Build Apps

To start developing an application with SAP Build Apps, log into the SAP BTP console and launch the SAP Build Apps. Or use the SAP Build Apps free edition, also known as the Community Edition. To create a project, choose create, select the build and application option, then the SAP Build Apps option, and lastly web and mobile application. Give your project a name, then choose create. This brings you to the main screen, which is the canvas of the SAP Build app. Let's start by adding the connection to SAP Business One. To do this, choose integrations. Under SAP Build App's classic data entities, choose create data entity, then select OData integration from the drop-down. Select Basic Authentication for the authentication type. For the base API URL, use the service layer address. For the username, I'll use Manager, followed by an at sign and the database name, then enter the password. Next, verify the URL. When this is imported into an SAP Business One Web Client extension, the username and password will be cleared from this project so that it can be used in any other database and by any user logged in. Next, let's search for an object. for example, items, and toggle the items option so it is enabled. Then choose Save Data Resources to finalize the connection to SAP Business One. Next, choose the variables tab, then select data variables from the left menu. You can see that no data variables have been added to the homepage. To assign a data connection to the first page of the app, choose Add Data Variable and select items, which is the only one we defined. For design purposes in SAP Build apps, you'll also need to specify the basic authentication, which will be cleared when deployed as the Web Client Extension. To enable this, choose the X under Basic Authentication in the right pane and select object with properties. For the username and password, enter the same details as before and save it. Next, navigate to the user interface. tab. Note that it is recommended to periodically save your changes. From the user interface, drag a list item to the canvas. If you click twice on the headline, you can edit the text and do the same in the following text field. Then we need to define how this list element is going to repeat itself and how it will gather data. To do this, click on the list item element and navigate to the property section on the right. Choose the icon under repeat with, then select data and variables. On the next screen, select data variable, then select the one assigned to the home page, which is items. On the canvas, there are now multiple items in this list visualized. Next, you need to assign the primary and secondary label by choosing the ABC icon. Let's start with the primary label. I want this primary label to come out of SAP Business One data, so I'll select data item in repeat, then choose current. Next, I'll select the desired data field in this repeat, for example, item code. Then save it. For the secondary label, choose data item in repeat again, and select item name. Next, let's assign an action to this list so that when the item is clicked on, it opens a web browser. To do this, select the list item and choose Show Logic for List Item 1 to open the logic bar, and choose Marketplace on the left. In the search bar, search for browser, select Open Web Browser, and choose install to install the additional component for SAP Build apps. Once installed, you can drag the open web browser in the logic behind the component tab and link these two boxes. For the open web browser component, you'll also need to define a URL to open. In the Properties pane, choose the ABC icon under URL to open. Choose the formula option and choose the drop-down arrow to open the formula editor. In the quotes, input the fixed part of the URL. To add a flexible part, add a plus and then enter item name. Click twice to select the suggested item name data field from the repeat and save it. Save the overall project and preview it. Choose open web preview, then open the item search. Here you can see a list of the item codes as well as the item names. If you select the item, for example, mouse USB, it opens a Google search for mouse USBs in a new browser tab.