Open an .a5w page, static HTML page, URL, or PDF document, in a pop-up window or a DIV

IN THIS PAGE

Object Properties Properties
Target Properties Properties
Window Animation Properties
Window Buttons Properties
Optional Window Parts Properties
Window Javascript Events Properties
Videos

Description

Open a document (including .a5w pages, static .html pages, any other web page, e.g. www.google.com, or PDF document) in a modal, or modeless pop-up window, or in a DIV on the page.

Used with the Grid and UX component

Object Properties Properties

Supercontrol?: Supercontrols include Google Maps, Yahoo Maps, MSN Maps, Google Search, Google Image and other pre-defined sites.
Supercontrol definition: Supercontrol definition property.
PDF document?: Specify if the document you want to display is a PDF document. Uncheck this property if you want to open a .a5w page, .html page, or other type of web document.
PDF filename: Specify the PDF filename. You can use field placeholders to reference a filename stored in a field in the current record. For example: {pdf_filename}.
PDF open parameters: Specify parameter to control how the PDF is displayed when it is initially rendered. You can set properties such as the zoom level. Not all PDF readers support these properties.
Page URL: Click the button to open the URL builder. TIP: The URL that you specify can use placeholders for field values. e.g. mypage.a5w?id={custId}. IMPORTANT: The data in the placeholders will be URL encoded. If you do not want to URL encode the data in a particular placeholder, enter the placeholder as {nourlencode:placeholderName}. For example: {nourlencode:field1}
Resolve field placeholders in URL from which part: (Applies only when your URL contains field name placeholders) Specify if the placedholders in the URL should be resolved by getting values from fields in the Grid part or the Detail View part. Choices include.

Target Properties Properties

Target: Specify if the page should be opened in a pop-up window, a DIV on the page, or (if the Grid is running in a Tabbed UI) in a new Tabbed UI pane. (If you choose the 'Tabbed UI Pane' option, and the Grid is not running inside a Tabbed UI, it will be opened in a modeless pop-up window). Choices include.
Target Panel: Specify the Panel Id.
Parent Panel Navigator: Specify the Id of the parent Panel Navigator. The dynamic Panel will be added to this Panel Navigator.
Dynamic Panel Title: Specify the title for the Dynamic Panel.
User can close dynamic panel: (Only applies if the target Panel Navigator has been configured to use a Tab Band) Specify if the label for the dynamically added Panel has a 'close' icon that allows the user to close the dynamically added Panel.
Working message placement: Specify the panel where the wait message should be shown. You should chose a Panel that is currently visible, not a Panel that will be animated into view when the component is rendered.
Working message uses CSS3 animation?: Specify if the working message should be displayed using a CSS3 animation?
Working message animation size: Specify the size of the animation in pixels.
Browser window name: (Optional) Specify the window name. You can specify any arbitrary name. Useful if you want to refer to the window in some javascript code. You can also use special 'system' names. There are: '_self' - same frame, '_top' - whole page, '_blank' - new window and '_parent' - parent frame.
Browser window attributes: Browser window attributes property.
Target DIV ID: Specify the ID of the target DIV. This DIV can be in the component (for example, in a free-form edit region), or on the .a5w page that contains the component.
Can hide target DIV?: Specify the DIV can be hidden (to remove from view the target page after it has been opened in the DIV).
DIV hide hyperlink: Specify text for the hyperlink that hides the DIV where the target page is shown.
Target IFrame style: The target page will be opened in an IFrame inside the target DIV. Specify the inline style for the IFrame. You can set the IFrame's height and width in the style.
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.
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.
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.
Window position: Specify where the window will be shown.
Re-use existing window: Specify if multiple modeless windows can be opened, or only a single modeless window.
Window title: Specify the window title. The window title can contain data from fields in the current record. Enclose field values in curly braces. 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 show: Specify if the window title should be shown or hidden.
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.
Disable window move: Specify if the window cannot be moved by the user.
Pane title: Specify the tab pane title. The pane title can contain data from fields in the current record. Enclose field values in curly braces. 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 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.
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: Defines whether or not the window can be resized. If checked, user can resize the window.
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.
Refresh Grid on window close: When the window is closed, specify if the Grid should be refreshed. You can refresh the current row, or all rows in the Grid. Choices include.
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 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. Choices include None, Fade, Slide, Blind, Clip, Drop, Explode, Fold, Puff, Scale, Size, Pulsate.
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. Choices include None, Fade, Slide, Blind, Clip, Drop, Explode, Fold, Puff, Scale, Size, Pulsate.
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 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 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.

Opening an .a5w Page in a new 'Browser Window'

When opening an .a5w page in a Browser Window, there are several options for defining how the browser window is opened: on the current page, in a new tab, or in a new window. This video explains the options available when opening an .a5w page in a Browser Window.

Watch Video