Community
Application Development and Automation Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Create an Application with SAP Build Apps

Create an application with SAP Build Apps on SAP BTP. The application, created in a browser, can be used to register an employee. 

With this you can learn 

  • How to create a no code UI application with SAP Build Apps. 
  • How to add and edit visual elements in the SAP Build Apps UI editor. 
  • How to create a entity and variables with SAP Build Apps and leverage in UI application. 
  • How to add no code logic on Submit Button.

 

Step – 1 Create a new Build an Application

Mittal31_2-1708280932775.png

 

Step – 2  Select Web and Mobile Application

Mittal31_3-1708280932781.png

 

Step – 3  Enter Project Name and Description then click on create , it will open the Web Editor.

Mittal31_4-1708280932787.png

UI editor will open as below. 

Mittal31_5-1708280932790.png

 

Create a new data entity which  will leverage into web applications apps variables.

Select Data tab  and click on create data entity

 

Mittal31_6-1708280932791.png

 

 

Mittal31_7-1708280932793.png

 

 

Mittal31_8-1708280932794.png

 

Mittal31_9-1708280932795.png

 

Mittal31_10-1708280932797.png

 

 

New Record Added Manually

Mittal31_11-1708280932799.png

 

 

Create a New Apps Variables

Mittal31_12-1708280932800.png

 

 

Mittal31_13-1708280932801.png

 

Same steps will follow for all the fields

 

Create a Web Application 

Select UI Canvas Tab and select view slider

   Add below fields on web page

  • Employee ID (Number)
  • First Name   (Text)
  • Last Name    (Text)
  • Date of Birth  (Date)
  • Resignation Date  (Date)
  • Date of Joining  (Date)
  • Current Address (Text)
  • Permanent Address (Text)
  • City  (Text)
  • Country (Text)

 

How to add Input Field for Text Fields

  • Drag and drop input field on editor.
  • Rename the Label and Enter Placeholder Text.
  • Bind the field with Variable or Entity.

 

Mittal31_14-1708280932804.png

 

Rename the Label and Enter Placeholder.

Mittal31_15-1708280932805.png

 

For Input field binding , Go to Properties and select Value field

 

Mittal31_16-1708280932807.png

 

Click on Data and variables and then select App Variable

Mittal31_17-1708280932809.png

 

Mittal31_18-1708280932810.png

 

Same process have to follow for all the input fields , created all the variables for all the input fields.

Mittal31_19-1708280932811.png

 

Bind this variables to respective  input fields.

Mittal31_20-1708280932813.png

 

 

Add Logic on Submit Button

Click on Submit button then click on Add Logic Button 1

Mittal31_21-1708280932814.png

 

Select create Record

Mittal31_22-1708280932815.png

 

Select Resource Entity

Mittal31_0-1708281214196.pngMittal31_1-1708281266173.png

 

 

Select Custom Object from Create Record Properties and bind entity fields with App variables.

Mittal31_24-1708280932819.png

 

 

Web Application has been successfully developed.

Mittal31_25-1708280932822.png

 

 

Preview the Web Application.

 

Click on Launch Tab  and select Preview your application

Mittal31_26-1708280932824.png

 

 

 

 

Mittal31_27-1708280932828.png

 

 

 

 

Comment
2 Comments