1.Project Creation in SAP Build Apps
To begin integrating and displaying data from a REST API in SAP Build Apps, the first step is to create a new project. Follow these steps:
Step-by-Step Guide:
Log in to your SAP Build Apps account using your SAP BTP credentials.Navigate to the Home Page:Once logged in, you will land on the SAP Build Apps dashboard.Click on ‘Create Project’:On the dashboard, locate and click the “Create Project” button. This will open a project creation wizard.Select the Project Type:Choose “Application” (usually the Web and Mobile App option) to build a UI-based application.Click “Next” to proceed.
Now select the frontend option and click on next button.
Select the Web and Mobile applications option and click on next.
5.Enter Project Details:
Project Name: Enter a meaningful name for your project (e.g., “REST API Integration App”).Optionally, you can also provide a description to document the purpose of the project.
6.Create the Project:
Click “Create” or “Finish” (depending on UI version).The app builder canvas will open, allowing you to start designing your application interface and logic.
2. REST API Integration in Build app.
To connect your SAP Build App with an external REST API and use its data, you need to configure it using the Universal REST API Integration feature. Follow the steps below to complete this process:
Step-by-Step Guide to Integrate a REST API:
Open Your Project in SAP Build Apps
Once your application project is created, open it to launch the Build Editor (the design and logic workspace).
Go to the Integrations Panel
Open Integrations panel. This section is where you can manage data resources, including integrations with external services.
Create a New Data Resource
Click on the “Create Data Entity” button.From the dropdown list of available data integration options, choose:“Universal REST API Integration”
Configure the REST API Connection
You will now be prompted to fill in the details for your API:
Resource Name: Enter a name for your API resource (e.g., UserAPI, ProductsAPI).Base URL: Provide the base URL of the REST API you want to connect to.
Example: https://restcountries.com/v3.1/all
Test the API Connection
After configuring each endpoint, click the “Test” button to verify the API response.If successful, you will see the response schema, which will be used for data binding in your app.
Save the Configuration
Once your API endpoints are set up and tested, click “Save” to finalize the data integration.
Now added REST API details displays like below.
3. Declaring Data Variables to Map API Data to the UI
After successfully integrating a REST API in SAP Build Apps, you may notice that you cannot directly bind the API response properties to the UI components. To resolve this, you need to declare data variables, which act as a bridge between your API data and the UI.
Step-by-Step Guide to Declare Data Variables
1. Open the Variables Tab
In the top-right panel of the Build Editor, click on the “Variables” tab.
2. Select ‘Data Variables’
In the variables panel, you’ll see different types of variables:Page Variables – for temporary, page-specific values.App Variables – for global values across the app.Data Variables – for storing and working with data from integrated APIs or data sources.Click on “Data Variables” to expand that section.
3. Add a Data Variable
Click the “+ Add Data Variable” button.
4. Select the Data Type
Choose the appropriate type of data variable based on your use case:Collection – If you’re fetching a list of records (e.g., list data).Single Data Record – If you’re fetching or working with a single item (e.g., a product detail).
5. Save the Variable
Once configured, click “Save” to finalize the data variable.
4. Designing Build App User Interface
Once your REST API is integrated and data variables are configured, the next step is to design your application’s user interface (UI). This is where you define how the app will visually display data and interact with users.
Step-by-Step Guide to Design the UI
Open the User Interface Editor and set page title.
5. Binding Data to List Control in SAP Build Apps
After designing your UI and creating data variables, the next step is to map your data to a List component. This allows your app to dynamically display items (such as users, products, or any collection) from the REST API.
Step-by-Step Guide to Bind Data to a List Component
1. Add a List Component to the Page
Open the UI Canvas (User Interface Editor).
From the Component Library, drag the “List” component onto your page layout.
2. Select the List Component
Click on the List component to open its Properties panel on the right-hand side.
3. Configure Repeating Items (Repeat With)
In the Properties panel, locate the setting labelled “Repeat With”.This defines the data source for the repeating list items.
4. Choose a Data Variable
Click the dropdown next to Repeat With.A list of available Data Variables will be shown — select the one you created for the API data (e.g., Current countries data).
5. Save the Configuration
After selecting the data variable, click the “Save” button to apply the binding.Now, the List is set to dynamically repeat and render items based on the API data.
Display Data inside List Items
Now we have to map the list control primary and secondary variables from data variables option shown like below.
Here I have selected the current countries as primary label and country codes selected for secondary label as shown like below.
6.Previewing and Running the App in SAP Build Apps
Once the data is successfully mapped to the List component and your UI is complete, it’s time to preview the application and see how it functions in real-time.
1. Save Your Work
After completing all data bindings and UI configurations, ensure that you click the “Save” button (usually located in the top-right corner of the editor).This saves your project and prepares it for preview.
2. Click the “Preview” Button
At the top toolbar, click the “Preview” button.This opens the Preview panel, where you can choose how and where to run your app.
3. Select Your Application
In the Web Preview Portal, find and select your app from the list of available applications.Look for the name you gave during the project creation step (e.g., User Directory App, Product Catalog).Click the “Open” button next to your app.
Finally View Our Application in the Browser
Thanks,
Spandana.
1.Project Creation in SAP Build AppsTo begin integrating and displaying data from a REST API in SAP Build Apps, the first step is to create a new project. Follow these steps:Step-by-Step Guide:Log in to your SAP Build Apps account using your SAP BTP credentials.Navigate to the Home Page:Once logged in, you will land on the SAP Build Apps dashboard.Click on ‘Create Project’:On the dashboard, locate and click the “Create Project” button. This will open a project creation wizard.Select the Project Type:Choose “Application” (usually the Web and Mobile App option) to build a UI-based application.Click “Next” to proceed.Now select the frontend option and click on next button.Select the Web and Mobile applications option and click on next. 5.Enter Project Details:Project Name: Enter a meaningful name for your project (e.g., “REST API Integration App”).Optionally, you can also provide a description to document the purpose of the project. 6.Create the Project:Click “Create” or “Finish” (depending on UI version).The app builder canvas will open, allowing you to start designing your application interface and logic.2. REST API Integration in Build app.To connect your SAP Build App with an external REST API and use its data, you need to configure it using the Universal REST API Integration feature. Follow the steps below to complete this process:Step-by-Step Guide to Integrate a REST API:Open Your Project in SAP Build AppsOnce your application project is created, open it to launch the Build Editor (the design and logic workspace).Go to the Integrations PanelOpen Integrations panel. This section is where you can manage data resources, including integrations with external services.Create a New Data ResourceClick on the “Create Data Entity” button.From the dropdown list of available data integration options, choose:“Universal REST API Integration”Configure the REST API ConnectionYou will now be prompted to fill in the details for your API:Resource Name: Enter a name for your API resource (e.g., UserAPI, ProductsAPI).Base URL: Provide the base URL of the REST API you want to connect to.Example: https://restcountries.com/v3.1/allTest the API ConnectionAfter configuring each endpoint, click the “Test” button to verify the API response.If successful, you will see the response schema, which will be used for data binding in your app.Save the ConfigurationOnce your API endpoints are set up and tested, click “Save” to finalize the data integration.Now added REST API details displays like below.3. Declaring Data Variables to Map API Data to the UIAfter successfully integrating a REST API in SAP Build Apps, you may notice that you cannot directly bind the API response properties to the UI components. To resolve this, you need to declare data variables, which act as a bridge between your API data and the UI.Step-by-Step Guide to Declare Data Variables 1. Open the Variables TabIn the top-right panel of the Build Editor, click on the “Variables” tab. 2. Select ‘Data Variables’In the variables panel, you’ll see different types of variables:Page Variables – for temporary, page-specific values.App Variables – for global values across the app.Data Variables – for storing and working with data from integrated APIs or data sources.Click on “Data Variables” to expand that section. 3. Add a Data VariableClick the “+ Add Data Variable” button. 4. Select the Data TypeChoose the appropriate type of data variable based on your use case:Collection – If you’re fetching a list of records (e.g., list data).Single Data Record – If you’re fetching or working with a single item (e.g., a product detail). 5. Save the VariableOnce configured, click “Save” to finalize the data variable.4. Designing Build App User InterfaceOnce your REST API is integrated and data variables are configured, the next step is to design your application’s user interface (UI). This is where you define how the app will visually display data and interact with users.Step-by-Step Guide to Design the UIOpen the User Interface Editor and set page title.5. Binding Data to List Control in SAP Build AppsAfter designing your UI and creating data variables, the next step is to map your data to a List component. This allows your app to dynamically display items (such as users, products, or any collection) from the REST API.Step-by-Step Guide to Bind Data to a List Component 1. Add a List Component to the Page Open the UI Canvas (User Interface Editor).From the Component Library, drag the “List” component onto your page layout. 2. Select the List ComponentClick on the List component to open its Properties panel on the right-hand side. 3. Configure Repeating Items (Repeat With)In the Properties panel, locate the setting labelled “Repeat With”.This defines the data source for the repeating list items. 4. Choose a Data VariableClick the dropdown next to Repeat With.A list of available Data Variables will be shown — select the one you created for the API data (e.g., Current countries data). 5. Save the ConfigurationAfter selecting the data variable, click the “Save” button to apply the binding.Now, the List is set to dynamically repeat and render items based on the API data.Display Data inside List Items Now we have to map the list control primary and secondary variables from data variables option shown like below.Here I have selected the current countries as primary label and country codes selected for secondary label as shown like below.6.Previewing and Running the App in SAP Build AppsOnce the data is successfully mapped to the List component and your UI is complete, it’s time to preview the application and see how it functions in real-time. 1. Save Your WorkAfter completing all data bindings and UI configurations, ensure that you click the “Save” button (usually located in the top-right corner of the editor).This saves your project and prepares it for preview. 2. Click the “Preview” ButtonAt the top toolbar, click the “Preview” button.This opens the Preview panel, where you can choose how and where to run your app. 3. Select Your ApplicationIn the Web Preview Portal, find and select your app from the list of available applications.Look for the name you gave during the project creation step (e.g., User Directory App, Product Catalog).Click the “Open” button next to your app. Finally View Our Application in the BrowserThanks,Spandana. Read More Application Development and Automation Blog Posts articles
#SAP
