Abort Pending REST Calls in Visual Builder

When a REST call to your application takes too long, you might want to let your users cancel the call midway. You do this by adding an AbortController, a browser-based interface that lets you abort a web request.

Here's a sample scenario that shows how you can use an AbortController in a Visual Builder application. For demo purposes, assume the app has a page with two buttons: a Call REST button and a Cancel REST button.

When users click the Call REST button, an ojAction event triggers an action chain to call the Get/Employee/{Employee_Id} endpoint and displays a notification to the user.
When users click the Cancel REST button, another ojAction event triggers an action chain to abort the REST request and display a notification to the user.

Note:

The AbortController API is not supported for Visual Builder applications that are enabled as PWAs or configured for offline capabilities.

To use the AbortController API, you first need to create an AbortController instance. You also need to call the abort method on the AbortController instance that's created. We'll do this by adding two app-level JavaScript functions that can be used across your application's pages.
1. Select your application node, then click JavaScript to open the app-level JavaScript editor.
2. Add this JavaScript snippet to the editor:
```
  /**
   * Method to create an instance of AbortController. 
   */
  createAbortController() {
    return new AbortController();
  }

  /**
   * Method to invoke the abort method on the AbortController instance. 
   */
  abortRequests(abortController) {
    abortController.abort();
  }
```
  Your JS editor might look something like this:
  
  Description of the illustration abortcontroller-js-snippet.jpg
Create a variable to track the AbortController instance that will be created.
1. Click Variables to open the app-level Variables editor.
2. Click + Variable and create a variable with ID abortController (for example) and type Any. Click Create.
  
  Description of the illustration abortcontroller-variable.jpg
To initialize the abortController variable when the app loads, build an action chain that's triggered in response to a vbEnter event for the application.
1. Click Event Listeners at the app level.
2. Click + Event Listener.
3. Select vbEnter under Lifecycle events and click Next.
4. Select Create Application Action Chain to create a new app-level action chain. Click Finish.
5. Click Go to Action Chain next to the newly created vbEnterChangeListener action chain to open the Action Chains editor.
  
  Description of the illustration abortcontroller-eventlistener-gotoactionchain.jpg
6. From the Actions palette, drag a Call Function action onto the canvas.
7. In the action's Function Name property, select createAbortController under Application to call the JS function that creates an AbortController instance.
  
  Description of the illustration abortcontroller-callfunction.jpg
8. Now drag and drop an Assign Variables action to follow the Call Function action.
9. In the Assign Variable action's Properties pane, select abortController under Application from the Variable list.
  
  Description of the illustration abortcontroller-assignvariable.jpg
10. Hover over the Value property and open the variable picker, then select callFunctionResult. This way, you assign the value returned by the createAbortController function to your abortController variable.
Associate the AbortController with the REST call you want to abort. You do this by attaching the AbortSignal of an AbortController instance to the REST request via the signal option. For example, to abort the Get/Employee/{Employee_Id} endpoint request, you attach the AbortSignal to the Call REST action in the action chain underlying the button component (which is ButtonActionChain in our example).
1. Open the action chain that uses the Call REST action in the Action Chains editor. Because our example assumes a Call REST button on a page, this Call REST action exists in the ButtonActionChain action chain defined at the page level.
2. Click Code to switch to code view.
3. Locate the code snippet for the particular Call REST action and add this line after the endpoint constructor:
```
signal: $application.variables.abortController.signal,
```
  In this example, the AbortSignal is accessed via $application.variables.abortController.signal and attached to the get_Employee REST request:
  
  Description of the illustration abortcontroller-abortsignal.jpg
To abort REST requests with the AbortSignal attached, build an action chain to call the abort method on the AbortController instance. Because our example assumes a Cancel button that users click to abort the Get/Employee/{Employee_Id} request on a page, we define the abort action chain also at the page level (but you can also define it at the app level).
1. Click Action Chains to open the Action Chains editor.
2. Click + Action Chain and create a new action chain with abortRequestsChain as its ID.
3. From the Actions palette, drag a Call Function action onto the canvas.
4. In the action's Function Name property, select abortRequests to specify the JS function that calls the abort method on the AbortController instance for the specific REST request.
5. To pass your abortController variable as an input parameter to the abortRequests function, locate the abortController under Parameters, hover over the parameter to open the variable picker, then select abortController under Application.
  
  Description of the illustration abortcontroller-mapinputparam.jpg
6. Calling the abort method on an AbortController instance permanently aborts any future requests, so you need to create a new AbortController instance and assign it to the abortController variable. To do this, drag and drop a Call Action Chain action and select the vbEnterChangeListener action chain (which was created for you in step 3 to do both) in the Action Chain ID list.
  
  Description of the illustration abortcontroller-callactionchain.jpg
7. Add other actions as needed to handle the Cancel operation. For example, you might want to add actions to notify the user and reset anything that's required for your app's typical flow.