How to Open the FOEX Window Region Plugin on Grid Cell Click

A popular design approach for managing form data is to have a grid/report with edit links that open a dialog window to manage the CRUD operations e.g.

foex-grid-window-example2

Editing a grid record in a window

 

In the FOEX Plugin Framework we have two approaches for this.

  1. Use the Window Open dynamic action which will open a separate page within the dialog/window
  2. Use the FOEX Window Region plugin which will open the window defined on the current page

We normally recommend using the first option when you are designing a complex page with many components. By separating components that are displayed in dialogs/windows into their own page improves maintenance and lowers page rendering time. You can see an example of this in our documentation application under the Window demos.

However if your page only consists of a small number of components e.g. one or two grids and you only plan to have one or two forms on the page to manage the grid data then we would recommend using the window region plugin to present the form.

The benefits of using the window region plugin is that all your components are on the same page and can be easily referenceable in dynamic actions.

 

The Prerequisites

Create a FOEX Page and perform the following:

  1. Create a grid on the page as a child region of the Center Pane
  2. Create a Window Region Plugin (No Parent Region)
  3. Create a Form with the Parent region set to the Window Region Plugin

 

The Setup

Edit one of your grid columns (normally your primary key column) and make it a link column where the link itself is just the hash symbol “#”e.g.

foex-grid-link-column

 

Create a new Dynamic Action as seen below:

foex-dynamic-action-step1

Note: change the condition to match your grid column name.

Next, we’ll create 3 TRUE actions:

  • the first action to show our window region,
  • the second action to set our form primary key item with the grid row primary key value,
  • the third action to load the form.

foex-dynamic-action-step2

The Show action will look like this:

foex-dynamic-action-step3

The FOEX Grid Row/Cell Select Set Item Values, which is responsible for transferring the grid column value to the form page item, will look like this:

foex-dynamic-action-step4

The Form Load which will load the record based on the form primary key page item(s) value will look like this:

foex-dynamic-action-step5

 

The Result

The end result is that we can easily open our window and form on grid cell click and manage all the data via AJAX:

FOEX Window Region Plugin Grid Cell Click demo

Opening a FOEX Window Region Plugin on Grid Cell Click 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!

Add your comment

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