Panel Actions

Description

Perform some action on a Panel (e.g. setting focus to the next or previous Panel, or to a particular named panel).

Discussion

The Panel Actions Action Javascript performs a Panel Action, such as navigating a Panel Navigator, getting the name of the active panel, hiding a panel's footer, or creating a dynamic panel.

The action to perform is defined by the Action name property. The available actions include:

Action name: Description
Navigate: Navigate to another panel in a Panel Navigator.
Set Active Panel: Set the current displayed panel.
Get Active Panel: Get the current displayed panel.
Get Active Dock Panel in a Panel Layout: Get the current docked panel in a Panel Layout.
Get Panel Id: Get the ID of the active panel.
Get Panel Size: Get the dimensions of the active panel.
Hide Layout Panel Docks: Hide all docked panels.
Set URL of a Panel Card IFrame: Set the URL containing the content to display in a Panel Card configured as an iframe.
Scroll Panel Card: Scroll the Panel Card.
Show/hide Panel Header/Footer: Show or hide a panel header or footer.
Resize/refresh Panels: Refresh panels, causing them to redraw their contents.
Remove Panel from Panel Navigator: Remove a panel from a Panel Navigator.
Add Dynamic Panel Card to Panel Navigator: Add a panel to a Panel Navigator.

Each of these actions is described in further detail below.

Navigate Action

The Navigate action is used to navigate to another panel in a Panel Navigator. The navigation is relative to the current active panel in the Panel Navigator. You can choose to navigate in a direction relative to the current panel (first, last, previous, next) or using the navigation history for the Panel Navigator (HistoryFirst, HistoryLast, HistoryBack, HistoryForward.)

Action Properties
Property
Description
Panel Navigator name
The Panel Navigator in which the target panel exists.
Direction
The direction in which you want to navigate. Option with the 'History' prefix navigate within the context of the Navigator's history of prior navigation. Choices include:
Direction
Description
First
Navigate to the first panel in the Panel Navigator.
Previous
Navigate to the previous panel relative to the current panel.
Next
Navigate to the next panel relative to the current panel.
Last
Navigate to the last panel in the Panel Navigator.
HistoryFirst
Navigate to the first panel that was active when the Panel Navigator was shown.
HistoryLast
Navigate to the most recent panel that was active in the Panel Navigator.
HistoryBack
Navigate to the previously active panel in the Panel Navigator.
HistoryForward
Navigate to the panel that was activated after the current panel in the Panel Navigator's history.

Set Active Panel Action

The Set Active Panel action is used to set the active panel. When the action executes, the specified panel is shown. An optional animation can be used.

Action Properties
Property
Description
Target Panel name
The name (Id) of the panel that you want to set focus to.
Animate
Whether or not a panel should be animated into view.

Get Active Panel Action

The Get Active Panel action gets the name of the active panel and stores in a JavaScript variable.

Action Properties
Property
Description
Javascript variable name
The name of the JavaScript variable to set.
Container id
The Panel Navigator or Panel Layout for which you want to get the active panel. If you leave this blank, the top level panel is returned.

Get Active Dock Panel in a Panel Layout Action

The Get Active Dock Panel in a Panel Layout action gets the name of the active docked panel and stores in a JavaScript variable.

Action Properties
Property
Description
Javascript variable name
The name of the JavaScript variable to set.
Panel Layout Name
(Optional) The Panel Layout for which you want to get the active docked panel.

Get Panel Id Action

The Get Panel Id action gets the ID for a panel or panel part and stores it in a JavaScript variable. The ID can be retrieved for the panel header, panel footer, panel body, or entire panel object.

Action Properties
Property
Description
Panel Name
The name of the panel for which you want to get the Id of. You can specify which part of the panel you want the Id for (e.g. Body, Header, Footer).
Panel Part
The Panel part that you want the Id of. You can use this id to set the InnerHTML property of the panel part (does not apply if part is 'Panel'). Choices include:
Panel Part
Description
Panel
The panel itself.
Header
The panel's header.
Footer
The panel's footer.
Body
The panel's body.
Javascript variable name
The name of the JavaScript variable to set.

Get Panel Size Action

The Get Panel Size action gets the width and height for a panel or panel's header, footer, or body and stores the values in JavaScript variables.

Action Properties
Property
Description
Panel Name
The name of the panel for which you want to get the size. You can specify which part of the panel you want the size for (e.g. Body, Header, Footer).
Panel Part
The panel part that you want the Id of. You can use this id to set the InnerHTML property of the panel part. Choices include:
Panel Part
Description
Header
The panel's header.
Footer
The panel's footer.
Body
The panel's body.
Javascript variable for height
The name of the JavaScript variable to set with the height value.
Javascript variable for width
The name of the JavaScript variable to set with the width value.

Hide Layout Panel Docks Action

The Hide Layout Panel Docks action hides docked panels for a Panel Layout.

Action Properties
Property
Description
Panel Layout Name
The Panel Layout for which you want to hide the active docked panel.

Set URL of a Panel Card IFrame Action

The Set URL of a Panel Card IFrame action is used to set the URL for a Panel Card configured to render as an iframe.

Action Properties
Property
Description
Panel Name (IFrame)
The name of the Panel Card that you want to set the URL. The Panel Card must be configured to render as an iframe.
IFrame URL
The URL.

Scroll Panel Card Action

The Scroll Panel Card action is used to scroll to a specific location in a Panel Card. This action can be used to reset the panel's scrolled state to the top of the panel.

Action Properties
Property
Description
Panel to scroll
The name (Id) of the panel that you want to scroll.
Scroll - x position
The scroll position in pixels.
Scroll - y position
The scroll position in pixels.

Show/hide Panel Header/Footer Action

The Show/hide Panel Header/Footer action can be used to show or hide a panel's header or footer. This action only applies to a panel that has a header or footer. It cannot be used to dynamically add a header or footer at runtime.

Action Properties
Property
Description
Panel Name
The name of the panel.
Panel Part
The panel part that you want to show or hide. The panel must have the specified part in order to show or hide it. Choices include:
Panel Part
Description
Header
The panel's header.
Footer
The panel's footer.
Action
The action:
Action
Description
Show
Shows the panel part.
Hide
Hides the panel part.

Resize/refresh Panels Action

The Resize/refresh Panels action refreshes all panels in a UX component.

Remove Panel from Panel Navigator Action

The Remove Panel from Panel Navigator action removes a panel from a Panel Navigator. You can use either the panel's name or title to specify which panel should be removed. If removing a dynamic panel, the panel's title can be used if you do not know the dynamic panel's name.

Action Properties
Property
Description
Panel Navigator name
The Panel Navigator in which the target panel exists.
Panel
The panel to remove. This can be either the panel's Name or panel's Title.
Type
Specifies whether you've specified the Name or Title for the panel to remove. There are two options:
Type
Description
Name
Panel property contains the name of the panel to remove. E.g. PANELCARD_1
Title
Panel property contains the title of the panel to remove. Use this option if you're removing a dynamic panel and do not know the dynamic panel's.

Add Dynamic Panel Card to Panel Navigator Action

The Add Dynamic Panel Card to Panel Navigator action adds a panel to a Panel Navigator at runtime. The contents of the panel can be defined at design time as static HTML or computed at runtime by calling a JavaScript (client-side) or Xbasic (server-side) function. The function must return the HTML to show in the Panel Card.

Action Properties
Property
Description
Panel Navigator name
The Panel Navigator in which the target panel exists.
Panel name
(Optional) The name of the Panel Card. If you leave this property blank, Alpha Anywhere will automatically generate a name for you.
Panel title
The title of the new Panel Card. The title is shown if the parent Panel Navigator is configured to display panels as tabs.
Can close panel
If checked, the Panel Card will have a close button. This only applies if the Panel Navigator displays panels as tabs.
Set focus to panel
If checked, the new Panel Card will be displayed after it is created.
Method for setting contents of new Panel Card
Specifies how the content of the Panel Card will be defined. Options include:
Content Option
Description
StaticHTML
The Panel Card's contents are defined as HTML in the Static HTML property.
Xbasic
The Panel Card's contents are defined by making an Ajax Callback to execute the function defined in the Xbasic function property.
Javascript
The Panel Card's contents are defined by executing the function defined in the Javascript function property.
Static HTML
The HTML to display in the Panel Card.
This property is only available if Method for setting contents of new Panel Card is set to StaticHTML
Xbasic function
The Xbasic function to call. This Xbasic function should return the HTML to display in the Panel Card.
This property is only available if Method for setting contents of new Panel Card is set to Xbasic
Javascript function
The JavaScript function to call. This JavaScript function should return the HTML to display in the Panel Card.
This property is only available if Method for setting contents of new Panel Card is set to Javascript