How to Perform Cross Page Dynamic Actions in a FOEX Application

One of our users had recently asked us about how to perform cross page dynamic actions with FOEX. Before providing the answer I’d like to emphasize the fact that an application’s design in FOEX is slightly different than how you’d normally build it using plain APEX. To be more specific, while APEX follows a page design style allowing you to reload/redirect to other pages within your app, in FOEX we use the application’s main page to load all other pages into this page. This means that we stay on the one page without navigating away.

When developing applications using the FOEX Plugin Framework, in many cases you will have multiple pages open at the same time, so you’ll encounter the need to perform cross page dynamic actions (i.e. when something happens on page A you want to do something on page B).

The challenge with this cross page requirement is that when creating dynamic actions and selecting the regions / affected elements only the regions present on the current page are listed. Therefore it is not obvious how to perform cross page dynamic actions.

In this article I will show you a simple approach to how you can perform cross page dynamic actions within your FOEX application:

 

The Requirement

In the example below we have a grid with a column link which uses the “FOEX Window Open” dynamic action to open another page with a form plugin defined on it. We want to check that the form does not have any pending/unsaved changes prior to the window being closed. If there are any outstanding changes, we want to alert the user and cancel the close window action. Our window is on Page A and our Form is on Page B so we need to perform a cross page action for this requirement.

FOEX-Cross-Page-Dynamic-Action-Demo

FOEX Cross Page Dynamic Actions demo

 

The Pre-requisites

Create 2 pages, with the first page having a grid with column links. In the example above we used page 9000 from our documentation application which opens page 25 (that has a form) within a window on column link click. On your grid page you should have a “FOEX Window Open” dynamic action that will be responsible for opening the grid column links.

 

The Design

To perform cross page dynamic actions we will use hidden items to perform the messaging between pages. We’ll define a hidden item on the page that we load into our current page, to hold the action that we wish to perform e.g.

foex-cross-page-action-1

 

foex-cross-page-action-2

 

Next we’ll create a dynamic action that listens to the change event, has a condition which checks the current value of the page item and matches the action that we wish to perform. In this case it’s named PENDING_CHANGES_CHECK

foex-cross-page-action-3

 

The action performed on this event is to set a hidden page item on our parent page with the result. I’ll use the FOEX Actions plugin which allows us to set the value of page items on parent or child pages. A parent page is defined as a page that loads other pages into it (in our example the parent is page 9000), while a child page represents a page that is loaded into another page (in our case, page 25).

An important point to note in our design is that the pending changes check action will not continue proceeding TRUE actions if there are pending changes.

First, I’ll set the hidden page item on our parent page with the failure result (i.e. there are pending changes). We do this because if there are pending changes then the proceeding TRUE actions are not continued. The result is that our hidden item tells us the action to perform is HAS_PENDING_CHANGES e.g.

foex-cross-page-action-4

 

The next TRUE action is the pending changes check. We will provide the discard changes option to allow the user to easily discard their changes:

foex-cross-page-action-5

 

The final TRUE action for this event is setting the hidden page item on our parent page with a result that there are no pending changes (remember that this action will not fire if there are pending changes in the form). This completes the setup on the page opened in the window.

foex-cross-page-action-6

 

The next step is to edit the parent page which has the window defined on it. First we need to create a hidden page item that will hold the action result e.g.

foex-cross-page-action-12

foex-cross-page-action-13

 

Next, we’ll create a dynamic action that listens to the “FOEX Window – Before Close” event. This will prevent the window from being closed if there are pending changes in our form.

Note: in the “FOEX Window Open” dynamic action you should have defined a static ID for the window of “WINDOW”, so you can easily locate it using a jQuery selector. This is because the window is not an actual region on the page.

foex-cross-page-action-7

foex-cross-page-action-8

 

Our first TRUE action is that we need to set the hidden page item on our (child) window page with a non-action value (e.g. NULL). This is because we need to trigger the change event on our hidden page item each time the window is closed.

foex-cross-page-action-9

 

Next, we need to set the same page item with the action we wish to perform PENDING_CHANGES_CHECK. Remember that in an earlier step on our (child) window page we did set up a dynamic action to listen to the change event on P25_ACTION with the “equal to” condition of PENDING_CHANGES_CHECK. When we set the page item it will trigger the pending changes check on our child page before our next TRUE action starts which means it will set our page item P9000_ACTION_RESULT with the result.

foex-cross-page-action-10

 

The last TRUE action is that we need to cancel the window close event if our P9000_ACTION_RESULT hidden item has a value of HAS_PENDING_CHANGES.

To achieve this I’ll use a JavaScript snippet to check the hidden page item value and stop the window from being closed if there are pending changes:
if ($v('P9000_ACTION_RESULT') === 'HAS_PENDING_CHANGES') {
this.data.fxEvent.stopProcessing = true;
}

Note: In our documentation application search for the “FOEX Window – Before Close” event to see how to do this. 

 

foex-cross-page-action-15

 

Lastly, here’s the “Execute JavaScript Code” action:

foex-cross-page-action-11

 

The Result

The end result is that we can now stop the window from being closed if there are pending changes in our form. Some points to take away from this example is that the design can be reused (i.e. we can use the same 2 page items in other cross page dynamic actions using a condition for the action we wish to perform).

This means that you can have as many cross page dynamic actions as needed, using just a single hidden item on each page to control the action and result.

Cross-Page-Action-Demo

FOEX Cross Page Dynamic Actions demo

 

 

Do you have a technical question about FOEX or want good tips for improving your application? We’ve launched this series of How To articles to help improve your FOEX applications even more.

Use #askFOEX on Twitter and we’ll get back to you as soon as possible or sign up for a free trial and see why it is a great tool for developing large-scale web applications!

Categories FOEX How To
Add your comment

Your email address will not be published. Required fields are marked *