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.

Part1: Create an Application project

Click on file->New->Project.

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

Enter the name for the project and click on next.

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

Part 2: Creating the UI Controls

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

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

Output:

Similarly create the other fields.

Panel:

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

Create a panel as shown below:

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.

Output:

Add button to the panel Title as below.

Output:

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"}) );

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Arun