Panel Card Properties

Description

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:

Type
Description
Default

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

IFrame

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.

Id 

The ID of the panel card.

Sub-theme 

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.

images/pinchtozoom.jpg

Resetting the Zoom Level 

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

// Reset the zoom level for PANEL_1:
{dialog.object}.unZoomPanelCard('PANEL_1');

See Also