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

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 intially 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 dynmically 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 moded. 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 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 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 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 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
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.
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.

 Videos

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.

See Also