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

[ericci]

Introduction & Recap

In the previous blog post, we learned how to create a SimpleForm within a Dialog that allowed us to update the information of a Sales Order Item.

What will be covered on this exercise

With Part 6 of this series of blog posts, we will learn how to use the same SimpleForm to create a new Sales Order Item. We polished our code and tried to re-use everything to both create and update an Item.

• ODataModel: we have already used it to display server-side information about our Business Partner, Sales Order, and Sales Order Items. We’ve also used it to delete a database record. In the previous blog post, we’ve used it to update a SalesOrderItem. Now we’re going to use it to create a temporary Entry via createEntry (it’s only created locally) that will be submitted with submitChanges only when the user hit the Save button. If the user cancels the form our temporary entry will be deleted executing deleteCreatedEntry.


• Advanced Validation: for each form element of the SimpleForm we want to add validation. The user should not be allowed to save an entry if some of its fields are not correctly filled.


• Handle batch errors


• Pre-fill values when needed (explained later)

So our main task here is to allows the user to create a new Sales Order Item and submit those changes to the backend system only if all the model fields have been validated.

Here’s a list of the things you have to do to get to the final result:

• If the user clicks on the Add button, query the backend to ask for the latest ItemPosition and create a new temporary model (via oModel.createEntry) with ItemPosition = ItemPosition+1 (to be really correct you should do this just before the submission of the entry)


• Re-use the same Fragment with inside a Dialog that contains the SimpleForm that we used in the latest blog post. Fields are enabled/disabled based on a global flag that is true when we’re in create-mode


• The SimpleForm will contain a Label/Input couple for each of our Sales Order Item fields


• If the user changes the quantity updates all the amounts: NetAmount, TaxAmount, GrossAmount


• If the user change the Product update all connected values like QuantityUnit, CurrencyCode, NetAmount, TaxAmount, GrossAmount, and NoteLanguage


• Make the Save button of the dialog enabled only if all the information have been filled correctly otherwise display the correct error for each invalid field.


• Handle the save button submitting all the user changes!

Pre-filling values

In our exercise we’re prefilling the temporary model values in four different points:

1. When the user opens the dialog: we make an async query to the database asking for the latest ItemPosition. Our element should have the ItemPosition value as ItemPosition+1


2. When we create the temporary model we pre-fill the delivery date, the quantity, and the SalesOrderID


3. When the user selects a Product, we’re using that information to automatically calculate the price Amount (based on product’s price and quantity), CurrencyCode, QuantityUnit and NoteLanguage


4. When the user changes the quantity requested we update again the price Amount

Conclusion and what’s next?

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

In the next days, I will enjoy the Christmas holiday and explore something that I wanted to learn in the last couple of months: FlexibleColumnLayout. So expect a new blog post about it 😉

Feedback needed

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

Write it down on the comment section! Happy coding to everyone!