This blog post is part 3 of a series of blogs on how to develop full-stack To-Do application in SAP Web IDE Full-Stack.
Prerequisites
Before reading this blog please make sure that you have read, understood and implemented part 0, part 1 and part 2 of this series.
Let’s Get Started!
Create your UI Module
The UI module is the front-end of our full-stack application.
This module will consume the OData service that we created in part 2 and will present the list of Tasks with their details.
To create the UI module:
- In SAP Web IDE, select the todo project.
- Right-click it and select New -> HTML5 Module
- Select the SAP Fiori Worklist Application - OData V4 template and click Next
- Enter ui as the module name and click Next
- The next step is to select the OData service.
SAP Web IDE will auto detect that you already have a service in your project (created in part 2) and it will allow you to select it. - Click on the todo(v4) service to select it and click Next
- In the Template Customization step you need to bind the data from the OData service to the UI fields. Make sure that your form looks like the below:
- Notice the app Type is Standalone App, and that we selected the Task collection with 2 fields: id and title.
- Click Finish.
- Now the UI5 module is generated in the project and listed in the mta.yaml.
- Also, a destination was created in the background in order for the UI module to communicate with the OData service.
- Now we are ready to run the UI module!
Click on the ui folder and then on the Run button.
- Choose to execute the index.html file.
- Almost running 🙂
In the next dialog, enter your Cloud Foundry credentials. Make sure you enter your email address and not user id.
This action will create a new destination in SAP Cloud Platform Neo, responsible to access and use Cloud Foundry services.
- Now the app is running, and (hopefully) you can see a list of task titles from your Task table.
- Click on one of the tasks to see its details.
- As you can see from the screenshots above, currently our app is very basic, it displays only the task title in the details page. Let's enhance it and add more content.
- Back in SAP Web IDE workspace, expand the ui > webapp > view folder, right-click the Object.view.xml file and choose Open with > Layout Editor.
- In the Layout Editor, select the outline tab on the left and select the SemanticPage control (sap.f.semantic.SemanticPage).
- Click on the delete button to delete it.
- After deleting the SemanticPage you will have a blank page.
- Now we wish to add a SimpleForm to our view, BUT we will not be able to drag and drop it to the Canvas, because the sap.ui.layout UI5 library is not enabled by default.
- To enable it, right click the ui folder and choose Project Settings.
- Select SAPUI5 from the left-side pane.
- Search for layout and check the sap.ui.layout checkbox in order to enable this library for your project.
- Click Save.
- The Layout Editor is now reloaded with the sap.ui.layout support.
- In the Layout Editor, open the Controls tab on the left, search for Object Header and then drag and drop it into the Canvas.
- In the Properties pane, delete the values of the following properties: Intro, Number, Number Unit and make sure only Title is displayed.
- Search for Simple Form and drag and drop it under the Object Header.
- Double-click the title inside the Simple Form and rename it to Status & Notes.
- Double-click Label 1 and rename it to Status.
- Double-click Label 2 and rename it to Notes.
- The Status of a task will be shown as a radio button.
We have 2 different statuses: New and Completed. - Drag and drop a Radio Button Group and under the Status label.
- Delete both text fields under the Status label.
- Please make sure your Details screen looks like the below:
- Rename Option 1 to New and Option 2 to Completed. This can be done by selecting the relevant radio button and change the text property value on the properties pane.
- Now let's bind the data from our OData service to the UI!
- Open the Outline tab.
- Select the Object.view.xml which is the root node of the outline
- Using the Properties Pane, change the Data Set from Not defined to /Task and confirm the popup dialog.
- Don't forget the save your changes by clicking on the Save button or Ctrl/Cmd + S.
- After selecting the OData Collection, we should bind the specific UI fields to the OData collection's properties:
- Select the Object Header control.
- In the Properties pane, search for Title and click on the little Binding button:
- In the dialog that opens, delete the value of the Expression and double-click the title OData property on the left.
- Click OK.
- In the Layout Editor Canvas, click on the text field under the Notes label.
- In the Properties pane, search for Value and click on the Binding button.
- Bind this field to the note OData property.
- Following the same steps, bind the status OData property to the Radio Button Group control.
Make sure to select the Radio Button Group and not a single radio button.
- Binding the Status property means that if the status is 0 (NEW), the radio button at position 0 is selected.
If the status is 1 (COMPLETED), the radio button at position 1 is selected.
We can add more statuses and radio button as we like (e.g. 0 - New, 1 - In Process, 3 - Completed and more).
- Don't forget to save all your changes.
The final step is to run the app to see the changes!
Select the ui folder and click Run.
That's it! You now have a full-stack application, consists of DB, Java and UI modules.
The next step would be to deploy the app to SAP Cloud Platform, Cloud Foundry environment.
Learn how to do that in part 4.
- SAP Managed Tags:
5 Comments
