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