SAPUI5 for dummies part 5: A complete step-by-step exercise

Introduction & Recap

In the previous blog post, we learned how to create a second level of drill-down (detail of a detail) and how to interact with OData and ODataModel (v2) in order to delete a database record.

What will be covered on this exercise

With Part 5 of this series of blog posts, we will learn how to create a SimpleForm within a Dialog that will allow us to update the information of a Sales Order Item.

  • Expression Binding: an enhancement of the SAPUI5 binding syntax, which allows for providing expressions instead of custom formatter functions
  • SimpleForm: a layout that allows users to create a pixel-perfect form
  • Make the Product Name active (titleActive=”true”) and handle the titlePress event
  • Create a Fragment with inside a Dialog that contains our SimpleForm
  • The SimpleForm will contain a Label/Input couple for each of our Sales Order Item fields
  • All the Input fields won’t be editable except for the Note one
  • Make the Save button of the dialog enabled only if the Note typed by the user has a length greater than zero
  • Handle the save button submitting all the user changes!

Let’s code

UI/UX

We’ve already talked a lot about the UI/UX in this series of blog post. As you already understood this is an important topic for me. A good UX could make a huge difference at the end of the day allowing the end-user to boost his performance and reduce the overall errors he could make.

  • Can the user understand which information is missing or have invalid values?
  • I’m helping the user to fix those errors?
  • When the user has fixed the error am I correctly giving he feedback back (green highlight, enable the Save button)
  • Set the Dialog to busy state
  • Ask the framework to deliver all the changes with submitChanges
  • Listen to the callbacks in case of success or error
  • Provide visual feedback to the user with an ok or error message
  • Update the Table with the new values (done automagically by SAPUI5)

User Validation

There are many ways to add user validation to your field. In our simple example, I wanted to implement a simple use case to check only if the Note field has been filled or not. If the Note field is empty you should disable the Save button and prompt an error that highlight the Note field and explain the issue.

Update OData model record

Here comes the core part of our exercise. When the user clicks the Save button we’re going to execute a method on our Controller side.

Conclusion and what’s next?

If you want to check out the final result you can directly go to the step_5 branch of our GitHub Project.

Feedback needed

What do you think about this series? Do you want more focus on some specific SAPUI5 aspect?

Full-stack engineer at @Soplaya with a lot of love for everything around technology. Right now I’m focused on voice apps. https://ericci.dev