Sunday, November 6, 2016

Oracle Apex Custom Popup LOV

Hi Folks,
This is my first blog and very much intended to share some knowledge on oracle apex. Well, I am just new to blogging and stuff and still in learning process to give clear and better explanation of the concepts which might be useful in your apex development.

Let me start with creating custom super LOV in Oracle Apex 5.0. 

As we all know skill builders super LOV is available to achieve this objective but due to license and compatibility issues with apex 5.0 and later versions , it’s always better to create your own custom LOV and use it to have a better hold on the way you want the LOV to be displayed.

The basic idea is to make popup LOV appear similar to inbuilt apex popup LOV with multiple columns.

Version: Apex 5.0

  • Firstly, Create the modal popup page with interactive report having specific LOV query 
  • In primary key column attributes, Specify the code as below in HTML expression section.
#EMPNO#
<input class="return-val" style="display:none;" value="#EMPNO#">

In my case EMPNO is the primary key as I am using EMP table.
·         Apply the css code to make the row pointer as cursor in inline section of the template.
.t-fht-tbody tr{
  cursor: pointer;
}

           Well, simple isn't it :)
  • Now, Create dynamic action to have an event for row click and passing the corresponding row key value to the popup text field in the parent page.
         Event : Click
         Selection type :jquery selector
         Action : Execute Javacript code 
        code : var columnStaticId = 'EMPNO';
                  var displayTd = $(this.triggeringElement).closest('tr')
                 .find('td[headers=' + columnStaticId + ']');
                  var returnVal = displayTd.find('.return-val').val();
                  $s('P4_LOV',returnVal);
                  apex.submit('EMP_DISPLAY');

1.      EMPNO is the static ID of the empno (primary key) column which can be specified in column attributes.
2.      P4_LOV is the hidden item which is used to store the clicked row primary key value.
3.      apex.submit is used to have a dialog close process to close the dialog on click of report row.
  • Create dialog close after submit process with condition as "request = expression1"  and request is "EMP_DISPLAY"
  • Specify item P4_LOV in page items to return section of dialog close.
             Easy peasy !!!!

Now that we are done with popup lov window changes, let’s work on parent page from where popup LOV is initiated.
  • Create popup LOV button like appearance by applying code below in post element text section in page item(textfield).
 <a class="a-Button a-Button--popupLOV lov-open" onclick="openPopupLOV('ITEM_LIST')"  aria-label="Open List of Values" title="Open List of Values" href="javascript:void(0);" target="_blank">
  <span class="a-Icon icon-popup-lov"></span>
</a>
  • Copy this function in page template js section (basically used to call the popup window which we created) . You can set the dynamic request so that it can be used to call in multiple places with different set of LOV's based on request.(currently i've used static request).
function openPopupLOV(pReq)
{
    apex.navigation.redirect("f?p=&APP_ID.:4:&APP_SESSION.:EMP_LIST::4:");
}

  • Create dynamic action for setting selected value to text field on dialog close.
       Event : Dialog close
       Selection type : Javacript expression
       Javascript expression : window

      Action : Execute PL/SQL code
      Code:   :P2_LOV := :P4_LOV;

1.      Here P2_LOV is the textfield(Popup LOV).
2.   Specify P4_LOV in page items to submit and P2_LOV in page items to return section.


                             
Done!!

Here we go!! .You have just created custom super LOV.

Hope it helped :)

Cheers.