How to Open New Tabs in a Pane using a Grid Action Column

How to Open New Tabs in a Pane using a Grid Action Column

While working on our internal CRM system I noticed a couple of interesting use cases based on the team’s requirements. One such request was to have the ability to open new tabs in the parent center pane using a grid action column. In this article I want to show how you can achieve this easily.

The requirement:

We have a page with a center pane that shows regions inside separate tabs. A grid is loaded into the first tab. By clicking on the edit icon of a row, a new tab should be opened and load a form to edit the data (in our case the contact’s information). The tab’s name needs to be created from the contacts first and last name.

The Solution:

To identify the center pane by the content loader we’ll set up a Static ID for it (in our example this is FXCS_CENTER)

FOEX Center Pane Static ID setup

For the Edit Icon we’ll use a FOEX Action Column inside the grid, as the grid is located on its own page and loaded by a content loader into the Center Pane. A similar approach is used for the form, having its own page and being loaded by a content loader.

For the tab naming we’ll use a hidden item. To load the form out of the grid and set the tab name we’ll use a dynamic action with two actions: the first is Row/Cell Select set Item Value(s) and the second is Content Loader

Modifying the SQL Statement of the FOEX Grid

Note: ‘EDIT’ will be used by the FOEX Settings of the COLUMN_LINK and the condition of the dynamic action. Change the Type of the Column NAME_FOR_TAB to Hidden Field if it shouldn’t be shown in the grid.

Create a HTML Region “Hidden Items” and add two items

P230_OID_SEL -> Tab ID & URL Parameter for the Form Load
P230_NAME_FOR_TAB -> Value is used as Name for the tab

FOEX HTML Region – Hidden Items setup

Set Value Protected to No for both items.

Create a Dynamic Action for the click on the EDIT Action Column

With this dynamic action we store first the ame for the tab in a hidden item, then we load the form into a new tab on the Parent/Top Page.

FOEX Action Column Additional Config

To identify the click on the Action Column we use a conditional dynamic action:

FOEX Action Column Additional Config

Then we set the values of the hidden items with the one of the row where the Edit Action was clicked. Set session state to No to save unnecessary AJAX Calls.

FOEX Set Value to Hidden Items

Next, we’ll load the edit form into a new tab using a content loader. Define the URL that loads the page with the form and set Load into Region Context to Parent or Top Page depending where your Center Pane is.

The new Content Title and Unique ID are set using hashtag placeholders for page items (e.g. #P230_NAME_FOR_TAB#). It allows us to have variable tab names and unique tab IDs allowing us to open the same page in multiple different tabs.

FOEX Tab Name and ID hashtag placeholders

If you followed the steps detailed above, the result should look like this:

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!