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

See Also