Thursday, February 19, 2015

PeopleCode: Creating a Hyperlinked Image in a Grid to Open a Non-Modal Pop-Up Window

There's a really simple way in PeopleCode to display a page in pop-up window--IF you want it to be modal.  But if you don't want to require the pop-up window to be closed before you can continue on with your work in the parent window, it's not so easy.

Here's an example of a solution I came up with.

In this example, I am filling a grid whose main record is called MY_GRID_RECORD.  Based on an SQL query, it will display one icon or another as illustrated in Figure 1 below.  Each icon is also a hyperlink that will pop up a Notes page for the corresponding student in the grid (student-identifying information is intentionally not shown in Figure 1)  The field in the grid that displays the icon is an HTMLAREA.
Figure 1

In the RowInit PeopleCode event for MY_GRID_RECORD, I've created a search record variable, provided it the appropriate EMPLID key based on the component that my hyperlinked image will access, and generated the appropriate URL based on the search record.

&rec_Search_Rec = CreateRecord(Record.MY_SEARCH_RECORD);
&rec_Search_Rec.emplid.value = MY_GRID_RECORD.EMPLID.Value;
&strPopupPageURL = GenerateComponentContentURL(%Portal, %Node, @("Menuname." |      %Menu), "GBL", Component.MY_COMPONENT, Page.MY_PAGE, %Action_UpdateDisplay,      &rec_Search_Rec);

Once the URL is established, I do a simple SQL select to determine which image to display on the page.  I have placed an HTMLAREA object in my grid, whose record field will contain the HTML for the hyperlinked image that I generate in the PeopleCode below.

sqlexec("select 'Y' from SOME_TABLE where SOME_FIELD = :1",&someInputVariable,      &myResultVariable);
if &myResultVariable = 'Y' then
   MY_WORK_REC.HTMLAREA.Value = "onClick=window.open('" |                   &strPopupPageURL |"','_blank','width=600,height=500,left=200,top=100,             location=no'); return false;'>
      MY_IMAGE) | ">
";else
   MY_WORK_REC.HTMLAREA.Value = "onClick
=window.open('" |                   &strPopupPageURL |"','_blank','width=600,height=500,left=200,top=100,             location=no'); return false;'>      MY_OTHER_IMAGE) | ">
";end-if;

Instead of the HREF portion of the tag having a value, it's seeded with "#" and an onClick JavaScript event is provided instead. The onClick event allows for my pop-up window to be opened, passing it the URL that I generated in the first set of PeopleCode above. It also tells that window how wide and how high (in pixels) to draw itself, as well as where its top left corner should be placed on the screen.

NOTE: Please research the Javascript onClick method in order to better understand how it works.

Below is a working example of that pop-up window, from a project that I am currently working on (with identifying information blanked out).

Figure 2
I can leave the window open for as long as I want, while continuing to work in the window that opened this pop-up window.

No comments: