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})
);
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"}) );
0 Comments:
Post a Comment