Open a Help Window
Description
Open a window to display a help topic from the Help Table.
Used with the Grid and UX components.
{grid.componentName}_G__1(this);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.
See Also