🚀 JigxForms is now live! Use AI to build and share mobile-friendly forms with your field team.
Try it free.
Ctrlk
System StatusSamples on GitHub
For the complete documentation index, see llms.txt. This page is also available as Markdown.

info-modal

The info-modal is a pop-up window that provides additional information or context without navigating away from the current screen. It is used to display additional information and offer guidance or instructions. The modal appears as a temporary overlay on top of the current screen, dimming the background to focus your attention on the modal content. The Info-modal includes interactive elements like buttons, images, icons, or links.

Configuration options

Some properties are common to all actions, see Common action properties for the list of actions and their configuration options.

Core structure

modal

Modal contains the properties that will determine the button and content in the modal.

instanceId

The unique identifier for the info-modal that can be referenced in other jigs.

title

Provide a short title for display at the top of the info-modal. You can use text, an expression or a datasource to set the title.

Other options

buttonText

Give the button a label by providing short text. The button displays as a link. If an action like onConfirm is configured the button displays as a button.

description

Provide the text description or instructions for the user to follow. This creates the content in the info-modal. You can use text, an expression or a datasource. This can have multiple lines.

element

The following elements can be added to the modal: - type - Specify either an icon, image, avatar. - When image is specified a uri is required. - Use color to change the icon color, available colors are positive, negative, primary, warning. The default color is primary if no color is specificed. - When using an avatar you can specifiy text or use a uri to show in the avatar.

icon

Add an icon to the info-modal, for example a dollar icon. The icon apprears on the center of the modal. A list of icons are available. See for more information. This property relates to the action button at the bottom of the screen.

isHidden

When set to true the info-modal (button at the bottom of the screen) is hidden on a jig.

Actions

onConfirmed

The action is triggered when the button is pressed. Use IntelliSense to see the list of available actions. Action to execute when the info-modal button is pressed.

  • If the action is not defined, the info-modal will be closed.

  • If defined, the info-modal closes after the action is executed.

  • The button will have primary action style.

Considerations

  • The info-modal only has one action (button).

  • If the action on the button is not defined, the info-modal closes automatically and no action is performed.

  • Expressions can be used in the info-modal properties to provide the required values.

  • The info-modal can be used in the onFocus, onRefresh, and onPress events.

  • The info-modal is available in the default, composite, list and document jigs.

  • An info-modal action can be used in an action-list.

  • A jig can have multiple info-modals configured.

  • In the info-modal the buttonText displays as a link, if the onConfirmed event is added the link visually changes to a button.

  • Consider the confirm action, which also provides a modal with two buttons, allowing you to cancel or proceed.

Examples and code snippets

info-modal with avatar

In this example, the info-modal is configured on an action. When the button is pressed the info-modal opens and displays an avatar. The avatar uri property is used to set the avatar image. The buttonText is configured to close the info-modal.

Example: See the example in GitHub.

Info-modal with avatar
Info-modal with avatar

info-modal with icon

Info-modal with icon
Info-modal with icon

In this example, the info-modal is configured on an action. When the button is pressed the info-modal opens and displays a location icon. The color property is set to use the primary color. The buttonText is configured to close the info-modal.

Example: See the example in GitHub.

info-modal with image

Info-modal with an image
Info-modal with an image

Tapping on the action button opens the info-modal showing an image of Thailand. The image property uses resizeMode ensuring it is contained in the modal. The buttonText allows you to close the modal.

Example: See the example in GitHub.

info-modal in calendar jig

Info-modal in a calendar jig
Info-modal in a calendar jig

In this example the info-modal is used four places in the jig:

  1. In the onFocus event to show what type of calendar it is. The info-modal uses the element type image. The buttonText closes the info-modal.

  2. In the onRefresh event to notify the user that the calendar is refreshing. The info-modal uses the title, and the buttonText closes the info-modal.

  3. In the action to allow the info-modal to inform users that events are subject to change, the element uses type icon with a color: negative.

  4. In the onPress event to show informaton about the event that has been pressed. The info-modal's description property provides a text message to users, the avatar: uri provides an image and the buttonText allows you close the info-modal.

Example: See the example in GitHub.

info-modal in default jig

Info-modal on a default jig
Info-modal on a default jig

This example shows the info-modal when the Submit action button is pressed. The icon element property is used with color: warning. The description property provides the text content, and the buttonText is used for the text on the button. An onConfirm event is used to add a go-back action to the button. Notice how the button has visually changed from a link to a button. You can add an action-list to the onConfirm and add an execute-entity to submit the data from the form to the data store.

Example: See the example in GitHub.

info-modal in list jig

Info-modal in a list jig
Info-modal in a list jig

In this example the info-modal is used three places in the jig:

  1. In the onRefresh event to notify the user that the list is refreshing. The info-modal use the title, description and buttonText to closes the info-modal. An element type icon with color: warning shows an icon in the center of the info-modal.

  2. In the action to allow the info-modal to show a message regarding sales information with an element type of image, the buttonText allows you to go back to the list.

  3. In a swipeable: left event to show the customer's details. The info-modal's description property provides a text message to users, the avatar: uri provides an avatar with text and the buttonText allows you close the info-modal. The description containing the info-modal content uses an expression to add content from a datasource.

Example: See the example in GitHub.

info-modal in onPress action on a widget

Info-modal on widget
Info-modal on widget

In this example the info-modal is added to the onPress event of the widgets.

  1. First widget uses an icon with color, title, buttonText, description and onConfirm event to navigate to another jig.

  2. Second widget uses avatar,title, buttonText, description and and onConfirm event to navigate to another jig.

  3. Third widget uses an image, title, buttonText and onConfirmed event to open a url.

  4. The fourth widget uses a title, buttonText and description. The buttonText closes the modal.

Example: See the example in GitHub.

Previousgo-toNextopen-app-settings

Last updated

Was this helpful?