Add a Get Dirty Data Status Action

You use a Get Dirty Data Status action to check if any of the values have changed for the tracked variables within a particular scope (application, page, fragment, layout, flow), within any contained pages, fragments, layouts, or flows, or within any extensions of them. For example, in this image, both variables defined at the page level (their scope), have their Dirty Data Behavior property set to Track:
Description of jsac-variable-dirty-data.png follows
Description of the illustration jsac-variable-dirty-data.png

Whenever the value for any of these tracked variables changes, the Dirty Data status for their scope (referred to as context in code) is automatically changed from 'notDirty' to 'dirty'. And, if any tracked variables are defined for a layout, fragment or extension of this page and one of those variables changes, the page's Dirty Data status would also be automatically set to 'dirty'. To reset the scope's Dirty Data status back to 'notDirty', use the Reset Dirty Status action.

This functionality works with all data types, except Service Data Providers (SDPs). Currently, for SDPs, you'll have to handle the tracking of their value changes yourself.

Example Use of the Get Dirty Data Status Action

A typical use for the Get Dirty Data Status action is to check if any of the field values on a page have changed, so that you can warn a user of unsaved changes before navigating away from the page.

In this example, a page has two fields, one for a name and one for a birthdate. It also has a Save, Cancel and Go to Home Page button. The Go to Home Page button navigates to a page that has a single button to return to this page:
Description of jsac-personal-info-form.png follows
Description of the illustration jsac-personal-info-form.png

If you want to work through this example yourself:

Create a page as shown above (main-info-change-form in this example), using:
1. Input Text component for the name field.
2. Input Date component for the birthdate field.
3. Save, Cancel and Go to Home Page buttons.
Create a page to serve as the home page (main-home in this example) that the Go to Home Page button navigates to, and on that page add a button that navigates to the page with the fields. In this case, the button's name is "Change Info":

Description of the illustration jsac-dirty-data-app-pages.png

Now we want to track changes to the name and birthdate fields, and to warn users of unsaved changes if they try to navigate away from the page. To do this:
Open the flow that contains the pages, and on the Variables tab, create variables to store a name (String type) and a birthdate (Any type). These variables in the flow are set to the field values when the Save button is clicked, so that when a user navigates away from and back to the page with the fields, the field values get restored using the flow's variables. These variables are just for storing the field values during the application's lifecycle, so they don't need to be tracked:

Description of the illustration jsac-flow-variables.png
Open the page with the name and birthdate fields (main-info-change-form) and open the Variables tab. Create a variable to store a name (String type) and one to store a birthdate (Any type).
Set their default values to the corresponding variables that you created in the flow, so that when you navigate to the home page and back, these page variable values get restored using the flow's variables.
Set their Dirty Data Behavior property to 'Track' to track changes to their values:

Description of the illustration jsac-dirty-data-info-change-variables.png
On the page with the fields, select the Page Designer tab and bind the name and birthdate components to their corresponding page variables, which you defined on this page's Variables tab:

Description of the illustration jsac-dirty-data-bind-component.png
Next, we need to create an event listener to listen for when a user tries to navigate away from the page, which includes clicking the browser's Back and Forward buttons. This event will start an action chain that checks the Dirt Data status for the page. If there are unsaved changes, a notification will warn the user of the unsaved changes. To begin:
1. Open the page that has the fields, then select the Event Listeners tab and click the + Event Listener button to create a new event listener.
2. Select the vbBeforeExit event, which starts its associated action chain whenever a user tries to navigate away from the page. Click Next:
  
  Description of the illustration jsac-dirty-data-exit-event.png
  
  To create a new action chain that will be triggered by this event listener:
3. On the Select Action Chain step of the Create Event Listener wizard, select the Create Page Action Chain option, under Page Action Chains, and click Finish:
  
  Description of the illustration jsac-dirty-data-exit-listener-action.png
4. Back on the Event Listeners tab, hover over the new event that you just created and click the Go to Action Chain link that appears:
  
  Description of the illustration jsac-dirty-data-exit-event-action-link.png
  
  To create the action chain that checks the Dirt Data status for the page with the fields and warns the user of any unsaved changes:
5. In the Action Chain editor, add the Get Dirty Data Status action.
  Next, we need to check the page's Dirty Data status and, if it's 'dirty', use the Fire Notification action to notify the user of unsaved changes.
  
  To cancel the navigation away from the page, return an object with the cancelled property set to true, and to allow the navigation away from the page, return an object with the cancelled property set to false.
  
  Here's the completed action chain:
  
  Description of the illustration jsac-dirty-data-exit-event-action-chain.png
  
  And here's the code for this action chain:
```
    /**
     * @param {Object} context
     * @return {{cancelled:boolean}}
     */
    async run(context) {
      const { $page, $flow, $application } = context;
      
      const getDirtyDataStatusResult = await Actions.getDirtyDataStatus(context, {
      });

      if (getDirtyDataStatusResult.status === 'dirty') {
        // Warn the user if there are unsaved changes
        await Actions.fireNotificationEvent(context, {
          summary: 'You have unsaved changed. Please Save or Cancel',
          displayMode: 'transient',
          type: 'error',
        });

        // Stay on the page
        return { cancelled: true };
      }

      /* Navigation from this page can be canceled by returning an object with the property cancelled set to true. 
        This is useful when the page state is dirty and navigation should not be allowed before saving.*/
        return { cancelled: false };
    }
```
To implement the Save button, which saves the field values to the flow's variables and navigates to the home page:
1. Select the Save button, and in the Properties pane, click the Events tab.
2. Click the New Event button and select On 'ojAction' to trigger an action chain when a user clicks the button:
  
  Description of the illustration jsac-dirty-data-button-event.png
  
  You are taken to the Action Chain editor where you can create an action chain for the Save button, to save the field values and to navigate back to the home page.
3. To create the action chain, add the Assign Variable action to the canvas to assign the variables bound to the name and birthdate fields to their corresponding variables in the flow.
4. Add a Reset Dirty Data Status action to reset the Dirty Data status back to 'notDirty'.
5. To finish, add a Navigate To Page action to navigate back to the home page.
  
  Description of the illustration jsac-dirty-data-button-action.png
  
  Here's the code for this action chain:
```
    async run(context) {
      const { $page, $flow, $application } = context;

      await Actions.assignVariable(context, {
        variable: '$flow.variables.name',
        value: $page.variables.nameInput,
      });

      await Actions.assignVariable(context, {
        variable: '$flow.variables.birthdate',
        value: $page.variables.birthdateInput,
      });

      await Actions.resetDirtyDataStatus(context, {
      });

      const navigateToPageMainStartResult = await Actions.navigateToPage(context, {
        page: 'main-home',
      });
    }
```
To implement the Cancel button, which is used to ignore any value changes and to navigate back to the home page:
1. Select the Cancel button, and in the Properties pane, click the Events tab.
2. Click the New Event button and select On 'ojAction'.
  You are taken to the Action Chain editor. To create the action chain:
3. Add a Reset Dirty Data Status action to reset the Dirty Data status back to 'notDirty'. You need to rest the Dirty Data status because, when the Navigate to Page action is invoked to navigate away from the page, the vbBeforeExit event listener is invoked and its action chain won't allow navigation away from the page if the Dirty Data status is 'dirty'.
4. Add a Navigate To Page action to navigate back to the home page.
  Here's the code for this action chain:
```
    async run(context) {
      const { $page, $flow, $application } = context;

      await Actions.resetDirtyDataStatus(context, {
      });

      const navigateToPageMainStartResult = await Actions.navigateToPage(context, {
        page: 'main-home',
      });
    }
```
To implement the Go to Home Page button, which is used to navigate back to the home page:
1. Select the Go to Home Page button, and in the Properties pane, click the Events tab.
2. Click the New Event button and select On 'ojAction'.
  You are taken to the Action Chain editor.
3. To create the action chain, add a Navigate To Page action to navigate back to the home page.
  Here's the code for this action chain:
```
    async run(context) {
      const { $page, $flow, $application } = context;

      const navigateToPageMainStartResult = await Actions.navigateToPage(context, {
        page: 'main-home',
      });
    }
```

Finished! You can now click the Preview button at the top-right of the window to try out the application.

Go here to see the Get Dirty Data Status action's documentation in the Oracle Visual Builder Page Model Reference.