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.
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
http://bit.ly/2AxIVIb #SAP #SAPCloud #AI
