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.

Open New Tab Grid Action Column

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 Static ID setup

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

Add columns for the FOEX Action and the Name of the Tab

SELECT OID
, 'EDIT'          AS COLUMN_LINK
.
.
.
, FIRST_NAME||' '||LAST_NAME AS NAME_FOR_TAB

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.

 

Change the column properties for the Action Column

FOEX Grid Action Column properties 1

FOEX Grid Action Column step 1

 

FOEX Grid Action Column properties 2

FOEX Grid Action Column step 2

 

FOEX Grid Action Column properties 3

FOEX Grid Action Column Additional Config

 

 

"xtype": "foexactioncolumn",
"width": 30,
"maxWidth": 30,
"items": [{
   "iconCls": "fx-icon pencil",
   "action": "EDIT",
   "tooltip": "Click to edit"
}]

 

 

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

In our example:

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

HTML Region Hidden Items setup

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 Dynamic Action setup

FOEX Action Column Additional Config

 

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

Conditional Dynamic Action setup

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

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

FOEX Tab Name and ID hashtag placeholders

 

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

Open New Tab Grid Action Column

 

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 *