Web Applications - Generic User-Defined Pop-up Window

To purchase this Feature Pack, please click here.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

 

The 'Generic User-Defined Pop-up Window' Feature Pack allows you to open pop-up windows on your Grid component. This is extremely useful in creating highly customized user interfaces in your Grid.

There are four different ways to populate the contents of the window. These are:

The pop-up window you create be:

In the case of modal and modeless windows, you have a great deal of control over where the window is actually displayed. See 'Positioning the Window' below.

How to Add User Defined Windows to Your Grid Component

To add a User-Defined Pop-up Window to a Grid, create a new button by placing a button object in the list of Grid or Detail View controls, or by using the Action Buttons Feature Pack. Then define the action for the button. You will see that the list of available actions in Action Javascript will include a new action: Open a Pop-up Ajax Window

 

 

When you select this action, the builder appears:

 

Method for Populating the Window

There are several different ways to populate the window. Depending on your particular application one of the approaches will be the most suitable. Each method is discussed below.

Ajax Callback

This method makes an callback to the server. The server calls an Xbasic function that you define. The Xbasic function computes the HTML that you want to display in the window and then computes a Javascript command to send back to the browser to populate the window with the computed HTML. The Xbasic function that is called gets passed an object called 'e'. This is the standard 'e' object that is passed to the user-defined Ajax Callback action in Action Javascript, except that it contains one additional property - e.windowDiv - this ID of the DIV to populate with the window contents.

To generate a sample Xbasic function prototype, click the 'Create function prototype' hyperlink.

Here is a sample Xbasic function that computes some HTML. Also shown is the pop-up window created by this function.

 

function generateWindow as c (e as p)
dim moreStuff as c
moreStuff = word(sortsubstr(a5.Color_Enum(),crlf()),1,crlf(),20)
moreStuff = stritran(morestuff,crlf(),"<br>")
moreStuff = "<p><b>Here is a list of the first 20 built in Alpha Five system colors:</b><br>" + moreStuff

dim msg as c
msg = "Hello: " + e._currentRowDataNew.CONTACTNAME + " The local date and time is: " + now()
msg = msg + "<br><br><span style=\"color: blue;\">This content was generated in an Ajax callback</span>.<br><br>" + moreStuff
msg = js_escape(msg)

dim jscmd as c
jscmd = "$('" + e.windowDiv + "').innerHTML = '" + msg + "';"

generateWindow = jscmd
end function
 

Notice that the id of the DIV to populate is passed in in the e.windowDIV property and the function returns the Javascript to set the innerHTML property of this DIV.

Here is the resulting window:

 

 

Every time the button that opens the window is pressed, the callback is made and the window contents is computed. Contrast this with the 'Contents of a DIV' window population method (discussed below), when the window contents is computed when the Grid is initially rendered, not when the window is actually shown.

Javascript Function

This method calls a Javascript function to populate the window. The Javascript function computes a string of HTML and returns the string.

Here is a sample Javascript function and a screenshot of the resulting window. Note that the Javascript function can call methods of the Grid object to display information about the Grid in the window.

 

function jsGenerateContent() {
    var row = {grid.object}._selectedRow;
    var txt = 'This is some content to show in the window. The content is generated by a Javascript function.<br><br>';
    txt = txt + 'Current row with focus is: ' + {Grid.object}._selectedRow + '<br><br>';
    txt = txt + 'Hello: ' + {grid.Object}.getValue('G','CONTACTNAME',row);
    return txt;
}

 

 

Local

This method displays some HTML that was specified at the time the Action was defined. The HTML is defined in the Window HTML property. This is the least flexible of the various options and is really only suitable for windows with static content.

 

 

 

Contents of a DIV

This method displays the contents of a hidden DIV in the popup window. The hidden DIV can be anywhere - in one of the freeform edit regions that surrounds the various parts of the grid, or in the Master Template.

When you specify the Grid ID is is recommended that you define a DIV ID that includes the Grid alias placeholder ({grid.componentname}) in the name. That way you are guaranteed a unique DIV ID, even if you place two instances of the same Grid on a page.

For example, if you specify the DIV ID as: {grid.componentname}_WINDOW1, then at run-time, if the Grid alias is 'GRID1', the ID will be 'GRID1_WINDOW1'. If you put another instance of the same Grid on a page, the second instance might have an alias of 'GRID2' and so the DIV ID for the second instance would be GRID2_WINDOW1.

 

 

Here is an example of some HTML content that is defined in the free-form edit region above the Grid.

Notice:

a) the DIV ID matches the value set in the Action Javascript builder

b) the DIV is hidden (by setting the style to 'display:none;'

 

A key benefit of this method of populating the window is that you can easily include buttons that were defined using Action Buttons in the window body. Notice how the DIV contains a placeholder for an action button ({ActionButton:OPENGRID}.

Notice also that the DIV can include Alpha Five code blocks (in the <%a5.....%> regions).

 

 

 

 

There is a significant difference between this method of populating a window and the other methods. In this method, the window contents is computed at the time the Grid is rendered, but the window is not shown. The window contents is in the hidden DIV on the Grid. Only when the user clicks a button to open the window is the window actually shown.

Contrast this, for example, with the first method - the Ajax Callback - where the window contents is dynamically computed every time the window is opened.

As mentioned earlier, a significant advantage of this method is the ease with with Action Buttons can be placed in the window.

 

Positioning the Window

Regardless of how the window was populated, you have a substantial amount of control over where the window will be opened. To define the window position, click the smart field for the Window position prompt. A builder will open: