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.
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.
We hope you found this series useful and that you will use it to create beautiful full-stack applications in SAP Web IDE Full-Stack 🙂