Modal Lov in Tabular

Last year I have created a Modal Lov and also this used in tabular ,for that return items from dialog page to parent page I used apex.server.process for saving items in Lov page.
Thanks to the awesome blog post from Dan McGhan when I have looked that blog I decided to change the method which I had used.

Demo application: Modal Lov Tabular

Now, I would like to show you how to create a Modal Lov in Tabular.

Create a Tabular page and setting rendering tab

1. Create a tabular form through wizard, e.g. : page 7 that name is EMP_TABULAR

2. Add a link column to query e.g. : null as "MODAL_LINK"

3. Set a static ID tabularempregion

4. Add a hidden item P7_DIALOG_URL

5. Create a process Prepare Modal Url in Before Header point

6. Set PL/SQL Code for Prepare Modal Url process. This code makes a Dialog URL for navigate to modal lov therefore assign to P7_DIALOG_URL item.

DECLARE
   v_url   VARCHAR2 (1000);
BEGIN
   v_url := apex_util.prepare_url(p_url => 'f?p='||:app_id||':8:'||:app_session||'::NO::', p_checksum_type => 'SESSION', p_triggering_element  => 'apex.jQuery(''#tabularempregion'')');
   :P7_DIALOG_URL := v_url;
   APEX_UTIL.SET_SESSION_STATE('P7_DIALOG_URL',v_url);
END;

7.Set CSS Classes => tabularlov for ENAME column in EMP_TABULAR region. You should set this class for each column that want to be readonly.

8.Set several properties for MODAL_LINK column

a. Type => LINK

b. Target =>  Type = URL , URL = #. I ‘ll set it only for enable  Link Text property

c. Link Text =>

d. Link Attributes => class="linklov"

8. Set Function and Global Variable Declaration on EMP_TABULAR page. it has four parts, first set a variable that I ‘ll use later in Dynamic Action for getting current row number, second remove (a tag) because I don’t need it, third set readonly attribute for each item that is necessary, forth disable input text selection when we have readonly item so it’s optional.

//rownumber clicked
var tabularRecid = 0;
//remove a tag
$( ".linklov" ).remove();
//readonly input lov
$(".tabularlov" ).prop( 'readOnly', 'readonly');
//disable input text selection
$(".tabularlov").attr('unselectable', 'on');
$(".tabularlov").css('user-select', 'none');
$(".tabularlov").css('-moz-user-select', 'none');
$(".tabularlov").css('-khtml-user-select', 'none');
$(".tabularlov").css('-webkit-user-select', 'none');
$(".tabularlov").on('selectstart', false);

9. Set CSS Inline on EMP_TABULAR page

.btn-dialog-lov {
    color: #fff;
    background-color: #e0e0e0;
}
.icon-dialog-lov {
    vertical-align: top;
    width: 16px;
    height: 16px;
    font-size: 1.7rem;
}    
//remove space between button and item
td[headers="MODAL_LINK"], th#MODAL_LINK {
    border-left: 0px;     
    padding-left: 0px;
    padding-right: 2px;
}
td[headers="ENAME"]{
    padding: 2px 2px;
}  

Create a Modal Dialog Page

It’s better to look more information on blog post from Dan McGhan. So I’ll explain quickly

1. Create an Interactive Report on emp table and set page mode to Modal Dialog 

2. Set CSS Inline

3. Create three hidden items P8_RETURN_ENAME, P8_RETURN_JOB, P8_RETURN_MGR

4. Set HTML Expression and Static ID for ENAME column

5. Create a Dynamic Action Row Clicked with two true actions and setting like this images

Back to Tabular page  and setting Dynamic Action

1.Create a Dynamic Action getRecID in order to set current row number clicked on tabular region

a. Name => getRecID

b. Event => Click

c. Selection Type => jQuery Selector

d. jQuery Selector => a.tabularDialog

e. Event Scope => Dynamic

f. create a true action Execute JavaScript Code

g. code:

//set rownumber clicked
var itemTd = $(this.triggeringElement).closest('tr').find('td[headers="CHECK$01"]');
tabularRecid = itemTd.find('input[name="f01"]').attr('id').slice(4);

h. Fire On Page Load set NO

2.Create a Dynamic Action Dialog closed

a. Name => Dialog closed

b. Event => Dialog closed

c. Selection Type => Region

d. Region => EMP_TABULAR

e. Event Scope => Dynamic

f. create a true action Execute JavaScript Code

g. code: look at the below images that how to find the columns id

$x_Value('f03_'+ tabularRecid,this.data.P8_RETURN_ENAME);
$x_Value('f04_'+ tabularRecid,this.data.P8_RETURN_JOB);
$x_Value('f05_'+ tabularRecid,this.data.P8_RETURN_MGR);

h. Fire On Page Load set NO

In this way you able to find the columns id

Finish this task and enjoy it.