Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP UI5

A Simple form using label and text field

Label, Text Field & Panel

In this tutorial I am going to create a simple form with the help of panel, label, text field (input field) controls.

Below is the sample of the form which we are going to create.clip_image001

Part1: Create an Application project

Click on file->New->Project.clip_image002

In the project wizard, select Application project in SAP UI5 Development and click on next.

clip_image003

Enter the name for the project and click on next.

clip_image004

Enter the name for the view and choose the development environment and click on finish to create the application project.

clip_image005

Part 2: Creating the UI Controls

Create a matrix layout and create a row with label and text field as shown below.

clip_image007

Run the application project in the local server. (Refer Button control link to see how to run the application locally)

Output:

clip_image008

Similarly create the other fields.

clip_image009

Panel:

Now let’s put this form we created inside a panel.

Create a panel as shown below:

clip_image011

The panel doesn’t look good with the default theme, so I have modified the theme to be used in the index.html file. I have replaced the gold reflection theme with platinum.

clip_image012

Output:

clip_image013

Add button to the panel Title as below.

clip_image014

Output:

clip_image015

An action can be associated with the button save and update the data in the database. This will be discussed in the later topics.

Code in the Main View Create content method:

document.write('<p id="layout"></p>');

// Creating a matrix layout

var oLayout = new sap.ui.commons.layout.MatrixLayout({id:"layout1", layoutFixed:false});

var oLabel, oText;

// First Name

oLayout.createRow(

oLabel = new sap.ui.commons.Label({ id : "Label1", text:"First Name", labelFor:"firstName"}),

oText = new sap.ui.commons.TextField({id:"firstName", required:true})

);

// Last Name

oLayout.createRow(

oLabel = new sap.ui.commons.Label({ id : "Label2", text:"Last Name", labelFor:"lastName"}),

oText = new sap.ui.commons.TextField({id:"lastName", required:false})

);

// Email

oLayout.createRow(

oLabel = new sap.ui.commons.Label({ id : "Label3", text:"Email ID", labelFor:"email"}),

oText = new sap.ui.commons.TextField({id:"email", required:true})

);

// Phone Number

oLayout.createRow(

oLabel = new sap.ui.commons.Label({ id : "Label4", text:"Phone Number", labelFor:"mobile"}),

oText = new sap.ui.commons.TextField({id:"mobile", required:true})

);

// Creating a panel

var oPanel = new sap.ui.commons.Panel({id:"panel1", text:"Personal Details", width:"300px"});

oPanel.addContent(oLayout);

oPanel.placeAt("layout");

// Add button in the panel title bar

oPanel.addButton( new sap.ui.commons.Button({ text:"Save"}) );

About Arun

0 Comments:

Post a Comment

Powered by Blogger.