Watch for me by moonlight,
I’ll come to thee by moonlight, though hell should bar the way.”
The above lines are one of the strongest promises I have ever read. The passionate lover dies while fulfilling the promise. But do not worry, our SAPUI5 Application will not die when it has to keep its promise. ?
This article on promise is motivated while helping a friend of mine who was struggling using traditional callbacks. Callbacks can get frustrating when used for asynchronous operations and make code more difficult to understand and refactor.
You guys might be wondering, what is this title Promises? What does that mean? What is its relevance in SAPUI5?
Hold on my friend. I Promise, I will explain the Promise concept in UI5 in details. ?
Well let’s keep this simple, You can say Promises are like making Promise to someone where you can keep up with the Promise or Fail to do so.
Here we have 2 simple terms
- Resolved (I have completed my promise)
- Rejected (I have failed to keep up with my promise)
Lets say you have a simple operation to do, a single operation. Below demonstrates how to create a promise.
Demo 1 – Promise for Simple Single Operation in SAPUI5
Step1:- Create a sample sapui5 project
Step2:- Create a button and write a function as shown below
We hardcoded the variable test as true, it would be in resolved case and write “Hey I was resolved”.
Now, lets reject the promise by changing test to boolean false.
Lets say if an error occurred, then the error function returns message. I have also provided comments for your better understanding.
Hope you have understood the single operation, now its time to play with real time asynchronous 3 executions.
Demo 2 – Multiple Promises in SAPUI5
Step3:- Create a 3 promises as shown below
Now you might need to perform some business operation when all of the three are resolved. In order to handle this asynchronous operation we use the promise.all function.
Handling Promise.all function.
In other words, the UI function Promise.all helps to trigger number of asynchronous calls and when all the calls are complete, we can write logic as per the business needs and perform the activity.
Now lets assume one of the function got error. As per new use case remember only single error result is displayed. Rest all errors and resolved will be ignored if occurred.
To come up with the combination of the resolved and the rejected responses use Promise.allSettled as shown below. As per new use case first one resolved and rest of them rejected.
Handling Promise.allSettled function.
Also Check – First Program in ABAP HANA
Demo 3 – Handling the First Response from many Promises
Step4:- The first response wins.
You have 3 asynchronous requests/calls and your business requirement is to perform the activity based on the first call to complete. It is like the rat race and the first one which resolves the quickest wins.
Promise 1 completes at 200 ms, Promise 2 rejects at 100ms and Promise 3 rejects with no delay. So the race winner is Promise 3!! Hurray.. Let’s check how we program it.
Handling Promise.race function.
Promise is an object representing the success or failure of an asynchronous operation. In other terms, Promise is a returned object to which we attach callbacks, instead of passing callbacks into a function.
How to create a Promise?
The Promise constructor takes one argument and a callback with two parameters, viz resolve and reject.
How to use the above created Promise?
then() accepts two arguments, a callback for happy path and another for the failure path. Both are optional and we can add only the failure or success if we want.
Chaining can be performed in Promises.
then() can be used in chain to perform multiple other checks and functions. We can start an operation when the previous operation succeeds.
Also Take – End to End Video Course on SAP ABAP Debugging
References for Promise API
Promises is a new concept for ABAP developers learning UI5. It has lots of advantage. If you have any issue or face any difficulty in implementing it, do put your questions in the comment section below.
I promise to reply to every query. ?
You may join our SAP Technical Telegram Group . You need to install Telegram App first and then click the link in your mobile device. You may also install it in your desktop.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters
- SAPUI5 – How to Apply CSS in UI5 Apps?
- SAPUI5 – Hybrid App Tutorial
- SAPUI5 – Offline Application in 8 Steps
- SAPUI5 – Use of Formatter Function
- SAPUI5 – Voice Recognition
- SAPUI5 – Resource Model for Freshers
- How to Get Weight from the Weigh Scale/Weigh Bridge using Python for SAPUI5 Fiori Apps?
- SAP Fiori Tutorial. Part 7 – Custom Fiori App to Approve Change Requests in SOLMAN
- SAPUI5 – Promises in UI
- SAPUI5 – Binding JSON Model Data in SAPUI5 List Control using SAP Web IDE
- SAPUI5 – Custom Control in UI5
- SAPUI5 – Understanding the ObjectListItem Control of UI5
- SAPUI5 – How to Build Master Detail UI5 App along with Search?