Open a Pop-up Ajax Window/Overlay

IN THIS PAGE

Window Properties
Window Buttons Properties
Optional Window Parts Properties
Window Animation Properties
Window Javascript Events Properties
Drag Scrolling of Window Contents Properties
How to Remove the Close Icon

Description

Open a generic, pop-up window (often called an overlay). The window can be modal, or modeless, and can be populated by making an Ajax callback.

Used with the Grid and UX components

Window Properties

Window name

Set to <Default> to give the window a default name. If you give the window an explicit name (which must be unique), then you can easily get a pointer to the window to execute methods of the window object. Click the smart field for tips on how to name your window and for information on how to get a pointer to the window object.

Help ID

Specify the help ID of the help record to display in the window.

Window type

Specify the window type. Popup windows will show in a moveable window on the page. Dropdown windows have no title bar and cannot be moved. By default, Dropdown windows open directly below the control that you click to open the window. Note: An Ajax window will NOT be blocked by a browser's internal protection against popup windows.

Lock overlay CSS class name

Specify the CSS class name to use for the overlay that is displayed behind the window. The overlay prevents the user from clicking on controls that are outside the window. Leave blank, or specify <Default> to use the default style. Specify <Invisible> to create an invisible overlay (has no color, but user is still prevented from clicking on controls off the window). By specifying a class that has a 'background' attribute, you can control the color of the overlay. For example: background: rgba(0,0,0,0) to create a transparent overlay.

Sub-theme

(Optional) Specify a sub-theme for the window. The sub-theme can select a different pre-defined window 'look'. If you leave this property blank the 'base' sub-theme is automatically selected.

Dock window

Docked windows 'stick' to an edge of the screen and remain in place even when the page is scrolled.

Dock location

Specify which edge of the screen the window is docked to. Choices include Left, Right, Top, Bottom.

Unique window for each row

(Applies only when window opened from a button in a Grid row) Specify if each row should use a uniquely named window, or if all rows should share the same window.

How is window contents set

Specify how the contents of the window will be set. Ajax callback - an Ajax callback is made to the server and the server generates the HTML to shown in the window. Javascript Function - a Javascript function computes the HTML to show in the window. Local - the HTML for the window is defined here DIV - the contents of a div (which is normally hidden with a style='display:none;' attribute) is shown in the window. This hidden div could be placed in one of the free-form areas that surround the Grid. Choices include.

Window HTML

Specify the HTML to display in the window.

Ajax callback function

Specify the name of the Xbasic function that will handle the Ajax callback. This function will generate the HTML to display in the window.

Javascript function call

Specify the name of the Javascript function call to make. This function should return the HTML to show in the window. You can optionally pass in rowNum and objEle (a pointer to the object that invoked the function) to your function.

Examples:

myfunc - will call the function without passing in any arguments e.g. myfunc()

myfunc(rowNum) - will call the function and pass in rowNum.

DIV id

Specify the ID of a DIV (which is typically hidden) on the component. The contents of this DIV will be shown in the window. It is common to include the Grid alias in the DIV Id to ensure that the Id is unique, even when a page contains multiple instances of the same Grid. e.g. {grid.componentname}_WINDOW1

Container id

Specify the ID of the container

Window position

Specify where the window will be shown.

Dropdown Window position

Specify where the window will be shown.

Window title show

Specify if the window title should be shown or hidden.

Window title

Specify the window title. The window title can contain data from fields in the current record. Enclose field values in curly parens. e.g. Customer - {lastname}. To reference values from a column in a List control use this syntax: {LIST::ListName::ColumnName} (e.g. {LIST::MYLIST1::LASTNAME} )

Window title position

Specify if the window title should appear at the top or bottom of the window. Choices include Top, Bottom.

Window title direction

Specify if the direction is 'ltr' (left-to-right) (title on left, close button on right) or 'rtl' (right-to-left) (close button on left and title on right). Choices include ltr, rtl.

Window title has close button

Specify if the window title has a Close button.

Close when click on background

Automatically close the window when user clicks on background.

Disable window move

Specify if the window cannot be moved by the user.

Window height

Specify the window height. Use CSS syntax. For example: 3in, 10cm, 200px. If you do not set the height, the window will resize automatically to accommodate the window contents. To set the window size so that it sizes automatically to accomodate the window contents, but does NOT EXCEED a certain height if the contents is large, specify the window height as: max: size. For example: max: 300px

Window width

Specify the window height. Use CSS syntax. For example: 3in, 10cm, 200px. If you do not set the width, the window will resize automatically to accommodate the window contents.

Window is resizable

Specify if the window is resizable.

Working message

Specify the text of the message to show in the window while the window waits for its contents to be generated.

Working message icon

Specify the image to show in the window while the window waits for its contents to be generated.

Window background style

Specify the inline-style for the window background

Has pointer icon

Specify if the window has a pointer icon that points to the element that was clicked to show the window.

Pointer position

Specify the window edge that has the pointer icon. If you select 'Auto' the most appropriate edge is automatically selected. Choices include Auto, Top, Bottom, Left, Right.

Window Buttons Properties

Has custom toolbar buttons: Specify if the window has custom buttons in the window toolbar (at the bottom of the window).
Define buttons: Define the buttons that appear in the window toolbar (at the bottom of the window).
Buttons in-line style: In-line style for the buttons. TIP: To display the buttons left justified, enter an in-line style of: text-align:left;

Optional Window Parts Properties

Show top bar: Specify if a top bar should be shown. (Shows above the window body, but inside the body container).
Top bar HTML: Specify the HTML to show in the top bar.
Top bar style: Specify the in-line style for the top bar.
Show bottom bar: Specify if a top bar should be shown. (Shows below the body, inside the body container).
Bottom bar HTML: Specify the HTML to show in the top bar.
Bottom bar style: Specify the in-line style for the top bar.
Show header: Specify if a header should be shown. (Shows above the window body, but inside the body container).
Header HTML: Specify the HTML to show in the header.
Header style: Specify the in-line style for the top bar.
Show footer: Specify if a footer should be shown. (Displays below the body, the bottom bar and below any user-defined buttons).
Footer HTML: Specify the HTML to show in the footer.
Footer style: Specify the in-line style for the footer.

Window Animation Properties

Animation: Specify if the window should be animated when it is shown or hidden. Note: If the window contains an IFrame, which in turn contains a PDF viewer, animation may not work well and should not be used.
Show animation style: Select the animation method to use when the window is shown. Fade and Slide use methods in jQuery core. Other options require jQueryUI.
Show animation speed: Specify the animation speed. You can select a pre-defined option (slow = 600 milliseconds, fast = 200 milliseconds), or you can enter an explicit value in milliseconds.
Hide animation style: Select the animation method to use when the window is closed. Fade and Slide use methods in jQuery core. Other options require jQueryUI.
Hide animation speed: Specify the animation speed. You can select a pre-defined option (slow = 600 milliseconds, fast = 200 milliseconds), or you can enter an explicit value in milliseconds.

Window Javascript Events Properties

onInitialize: Specify the Javascript code to execute the first time the window is shown.
onBeforeShow: Specify the Javascript code to execute before the window is shown.
onShow: Specify the Javascript code to execute when the window is shown.
onBeforeHide: Specify the Javascript code to execute before the window is hidden.
onHide: Specify the Javascript code to execute when the window is hidden.
onFocus: Specify the Javascript code to execute when the window gets focus.
onMove: Specify the Javascript code to execute when the window is moved.
onResize: Specify the Javascript code to execute when the window is resized.

Drag Scrolling of Window Contents Properties

Body can scroll: Specify if the Body of the window can be scrolled.
Body scroll axis: Body scroll axis property. Choices include Both, Horizontal, Vertical.
Body stop drag propogation: Specify if drag events should be propogated to containing elements.
'Pull past end' settings and events: Specify if the user can drag the contents of the Window beyond any of its boundaries. If enabled, the content will snap back to its natural position when the user releases, and 'pull' events (wich you can define) are fired.
Custom scroll indicator settings: You can customize the position and appearance of the scroll indicator that is shown when the window is scrolled.

How to Remove the Close Icon

The close icon - the "x" button found in the title bar for the popup window - can be removed using JavaScript. Placing the following JavaScript in the onShow event for the window will remove the button:

//To remove the x button, but leave the title bar
this.clearTools();
 
//To remove the title bar completely:
this.setDisplay('title',true);