- SAP Managed Tags:
Important Update: SAP Build Apps Preview App is now available on App Store.
Introduction
Let us create our first project in SAP Build Apps.
How do you create your first project in SAP Build Apps?
Access your BTP Subaccount with the pre-requisites met and subscribed to SAP Build Apps. I am using a Free-Tier version.
From the SAP Build Lobby, you need to click on Create button
Click on Build an Application
Click on Web and Mobile Application
Add “Project Name” and click on Create button
Now you see App Builder below with:
This is the start point for us to create an application.
Select the component on the UI canvas. By default, you get a Title and Text Component.
How to edit a component?
Select the component, Title on the UI canvas.
Go to Component Properties and click on the Content property
Change the text to Product
Select the Text component and click on the cross mark to delete it. By this way you can delete a component from the view canvas.
Go to the Component Library and find the Search Bar component. Drag and drop it on the view canvas below the title.
Similarly, go to the Component Library and search for the List Item component. Drag and drop it on the view canvas below the search bar.
Creating a Variable
Let us create an App Variable, which will be used to store the search term. We will call it as “filterText”.
Go to the UI canvas, you see a toggle button for View and Variable. Toggle to variables and select the “App Variable” tab and then click on + icon. Now, select the variable created and change it to filterText.
In the above screenshot, you also see there is a button in the bottom left for Remove from the app, which you can click when you intend to delete the variable.
With this you have successfully completed designing the app structure!
Click on the Launch button in the Global Toolbar
Click on Open button to launch the web preview
Final Output looks like this:
Now, let us connect the app to the oData service in my next blog.
Stay tuned!
Introduction
Let us create our first project in SAP Build Apps.
How do you create your first project in SAP Build Apps?
Access your BTP Subaccount with the pre-requisites met and subscribed to SAP Build Apps. I am using a Free-Tier version.
BTP Subaccount with SAP Build Apps
SAP Discovery Center
From the SAP Build Lobby, you need to click on Create button
Create Project
Click on Build an Application
Build an Application
Click on Web and Mobile Application
Web & Mobile Application
Add “Project Name” and click on Create button
Save Project
Now you see App Builder below with:
- View Canvas in the center
- Left-hand side panel is Component Library
- Right hand side panel is called as Component Properties and
- Top panel is the Global Toolbar
- At bottom, you see the Logic Canvas.
This is the start point for us to create an application.
Components of App Builder
Components of App Builder -cont.
Select the component on the UI canvas. By default, you get a Title and Text Component.
How to edit a component?
Select the component, Title on the UI canvas.
Go to Component Properties and click on the Content property
Change the text to Product
Edit Title Component
Select the Text component and click on the cross mark to delete it. By this way you can delete a component from the view canvas.
Delete Component from Canvas
Go to the Component Library and find the Search Bar component. Drag and drop it on the view canvas below the title.
Search Components: Inserting Search Bar and List Item components
Similarly, go to the Component Library and search for the List Item component. Drag and drop it on the view canvas below the search bar.
Creating a Variable
Let us create an App Variable, which will be used to store the search term. We will call it as “filterText”.
Go to the UI canvas, you see a toggle button for View and Variable. Toggle to variables and select the “App Variable” tab and then click on + icon. Now, select the variable created and change it to filterText.
Add Variable
In the above screenshot, you also see there is a button in the bottom left for Remove from the app, which you can click when you intend to delete the variable.
With this you have successfully completed designing the app structure!
Final Structure of App
Click on the Launch button in the Global Toolbar
Launch App
Preview
Preview on web
Click on Open button to launch the web preview
Click Open
Final Output looks like this:
Output
Now, let us connect the app to the oData service in my next blog.
Stay tuned!
Feel to connect with me at c-b.singh Why not say a 'Hi' on LinkedIn? Do you have any suggestions? Comment below. If you found it to be useful, give us a like and share on social media platform. Have a question in mind, just ask here. |
10 Comments
