Panel Card Properties


A Panel Card can be added to component through the 'Panels' menu. Panel cards are useful for defining the different screens, or panels, that a user will see as they navigate through an application on a mobile device. If panel cards are being used inside a component, then every control in that component must be inside a specified panel card. Panel card's come with their own set of properties, listed here:

Panel card type

The panel card type. The type can be either Default or IFrame:


The contents of the Panel Card are defined as controls placed within the Panel Card begin and end controls.


The contents of the Panel Card are loaded from a URL and embedded in an <iframe> HTML element.

IFrame URL

If the Panel card type is IFrame, the URL to load.


The ID of the panel card.


A sub-theme (display variant) to use for the Panel Card. Choose from sub-themes included in the web theme or a sub-theme you created.

Display name

The display name to be used instead of the Id when the panel name is displayed, such as in a header, footer, or tab in a Panel Navigator.

Panel Class name

One or more classes applied to the entire Panel Card.

Panel body class name

One or more classes applied to the body section of the Panel card.

Panel body style

Set the in-line style for the Panel Card body. Typically you can leave this blank, except for the situation where you display an embedded Component in the Card. In this case, you will typically set the style to

padding: 0px;

Center panel contents

If enabled, centers the contents of the Panel Card in the middle of the panel. Contents will be centered horizontally and vertically.

Has background image

An image used as the background of the Panel Card.

Image name

The background image name. Shown when Has background image is enabled.

Pinch to zoom

Pinch to zoom enables the ability for the user to "pinch zoom" the contents of the Panel card. Pinch zooming is useful for manually magnifying content, such as images or text that may be too small to read on the user's device.


Resetting the Zoom Level

To programmatically reset the zoom level, use the {dialog.object}.unZoomPanelCard() method:

// Reset the zoom level for PANEL_1:

See Also