CRUD Operation in SAPUI5
Part 1: Introduction to SAPUI5 and Designing UI
SAPUI5 contains a set of libraries that is used to build responsive web pages that can be viewed on desktop, mobile or tablet devices. SAPUI5 was built on 5 core principles namely: Simple, Role based, Coherent, Adaptive and Delightful. You can design reports or different graphs based on your needs. You can extend your application to use different external libraries as well!
While learning you will often come across OPENUI5. OPENUI5 is open-source and the code is available on github. They both share the similar design concepts.
While learning SAPUI5 the sample code for each UI element is available on their platform https://sapui5.hana.ondemand.com/.
You will find detailed documentation of all the elements we will be using throughout this series. Before we start we should also be familiar with the MVC architecture.
MVC ( Model-View-Controller ) architecture divides an application into 3 logical components namely Model, View and Controller. Let discuss them one by one.
View: This components is used for all your UI designs in your application. For example a login page will require input for username and password and a login button. These are designed in the View.
Model: This component is used for all data related logic. The data is used throughout the application is stored in this component. For example, the customer information after the login will be stored in the component such as name, age etc. It is mostly stored in JSON format.
Controller: This component binds both the view and the model. The data manipulation, business logic, request and response are carried out in this component. For example, when the login button is clicked the data should be transferred to the server. These functions are carried out in the controller.
Now lets start developing a simple application will all the CRUD operations. In this article I will design the view and in the upcoming articles we will write the logic for all the operations.
Prerequisites:
You should have SAP WEBIDE. You can either use the cloud webide or a local webide. For getting a cloud version you can create a free account and access their cloud webide as a trial or you can download a personal webide. The steps to install the personal webide can be found here . Once you install create a new account and you can start developing your applications. I Hope you were able to successfully install it in your system.
Tutorial :
Step 1: Goto File-> new -> Project from template. Click on SAPUI5 Application. Provide a project name and give a namespace. Then click on next and finish.
click next.
click next.
Now click on finish. A separate workspace with the given project name will be created. The workspace will have all the predefined folders for you to start your application development. It will look something like this.
Step 2: Now got view folder and click View1.view.xml. This is the file where we will write our UI elements.
We will create a simple application with two inputs, one button and a table. We will store the values in the input into the model and display it in the table. Let create a form with two inputs and buttons.
We will be using VBox, Simple Form, Button and Table. I will add the references to each element so that you can customize it based on your requirements.
VBox: This is used to create a vertical layout which means all the UI elements inside this tab will be going one blow the other.
Simple Form: We will use this to create a form with two input and a button. The sample code can be found here.
Table: To display the values entered inside the inputs. The sample code can be found here.
Button: The sample for buttons can be found here.
Step 3: Inside the <content> tag you can write the following code with the help of the UI elements mentioned above.
<mvc:View controllerName="session1session1.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<App id="app">
<pages>
<Page title="SAPUI5 SESSION">
<content>
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange354" editable="true" layout="ResponsiveGridLayout" title="Get Detail" labelSpanXL="3" labelSpanL="3"
labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1"
columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<Label text="Name"/>
<Input id="inputname"/>
<Label text="Country"/>
<Input id="inputcountry"></Input>
</f:content>
</f:SimpleForm>
<FlexBox height="100px" alignItems="Start" justifyContent="Center">
<Button type="Emphasized" text="Submit" press="onsubmit"/>
</FlexBox>
</VBox>
<Table id="tabledetail" inset="false" mode="SingleSelectMaster"
items="{ path: '/details'}"
selectionChange="onselectionchange">
<columns>
<Column>
<Text text="Name"/>
</Column>
<Column demandPopin="true">
<Text text="Country"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{name}"/>
<Text text="{country}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
Output:
Conclusion:
In this article we have covered the basics of the SAPUI5 with its basic principles. We have also understood the MVC architecture and designed a basic layout. You can try to modify the code and explore more with the design. In the next part we will try to create a new entry in the table by giving the values inside in input field.
Good Read Darshan!!
ReplyDelete