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 components, see Common component properties for a list 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-avatar.jigx

title: info-modal - avatar
description: Tap the button to view the info-modal
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=1129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Name
            value: Jane Smith
              
actions:
  - children:
      - type: action.info-modal
        options:
          title: avatar
          modal:
            title: Avatar
            buttonText: Close
            description: This info-modal contains an avatar with avatar image and text
            element: 
              type: avatar
              text: AV
              uri: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80

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-icon.jigx

title: info-modal with icon
description: Tap the button to view the info-modal
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1619468129361-605ebea04b44?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D


children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Address
            value: 24 West Street, Houston, Texas
              
actions:
  - children:
      - type: action.info-modal
        options:
          title: icon
          modal:
            title: Location
            buttonText: Close
            description: This info-modal contains a location icon with color
            element: 
              type: icon
              icon: maps-pin
              color: primary

info-modal with 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-image.jigx

title: info-modal with image
description: Tap the button to view the info-modal
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1508615121316-fe792af62a63?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Holiday destination
            value: Thailand
              
actions:
  - children:
      - type: action.info-modal
        options:
          title: Image
          modal:
            title: Thailand
            buttonText: Close
            description: Welcome to your holiday destination!
            element: 
              type: image
              resizeMode: contain
              uri: https://images.unsplash.com/photo-1502085671122-2d218cd434e6?q=80&w=1226&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

info-modal in 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-calendar.jigx

title: Info Modal in a Calendar
type: jig.calendar
icon: calendar

onFocus: 
  type: action.info-modal
  options:
    modal:
      element: 
        type: image
        uri: https://i.ytimg.com/vi/aU5emeJgi88/maxresdefault.jpg
      title: Global team calendar
      buttonText: View 
    
onRefresh: 
  type: action.info-modal
  options:
    modal:
      title: Calendar is refreshing
      buttonText: Close
            
actions:
  - children:
      - type: action.info-modal
        options:
          title: Events Warning
          modal:
            title: Events listed here are subject to change
            description: Events listed here rely on the input from others and may not have been updated reliably. We are notto be held liable for any changes or inconvenience caused.  
            buttonText: OK
            element: 
              type: icon
              icon: calendar
              color: negative
               
data: [email protected]
item:
  type: component.event
  options:
    title: [email protected]
    description: [email protected]
    from: [email protected]
    to: [email protected]
    onPress: 
      type: action.info-modal
      options:
          modal:
            title: Events and times can change 
            description: Events listed here rely on the input from others and may not have been updated reliably.   
            buttonText: OK
            element: 
              type: avatar
              text: CD
              uri: https://cdn1.iconfinder.com/data/icons/managers-15/488/Untitled-5-512.png

datasource

info-modal in 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-default.jigx

title: Info modal on a default jig
type: jig.default

onFocus: 
  type: action.reset-state
  options:
    state: [email protected]
    
actions:
  - children: 
      - type: action.info-modal
        options:
          title: Sumbit
          modal:
            title: Verification
            buttonText: Submit
            description: Once you submit this form, your details are verifed with a third-party. A progress mail is sent within a week of submision.
            element: 
              type: icon
              icon: double-exclamation-mark-1-formatting
              color: warning
          onConfirmed: 
            type: action.execute-entity
            options:
              provider: DATA_PROVIDER_DYNAMIC
              entity: default/employees
              method: create
              data:
                employee-photo: [email protected]
                employee-first-name: [email protected]
                employee-surname: [email protected]
                employee-date-of-birth: [email protected]
                employee-email: [email protected]
                employee-phone-number: [email protected]
                employee-position: [email protected]
                employee-startWork: [email protected]
          
children:
  - type: component.form
    instanceId: default-form
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.avatar-field
          instanceId: employee-photo
          options:
            initialValue: [email protected][0].photo
            label: Photo
        - type: component.section
          options:
            title: Personal information
            children:
              - type: component.text-field
                instanceId: employee-first-name
                options:
                  initialValue: [email protected][0].firstname
                  label: First name
              - type: component.text-field
                instanceId: employee-surname
                options:
                  initialValue: [email protected][0].lastname
                  label: Surname
              - type: component.date-picker
                instanceId: employee-date-of-birth
                options:
                  initialValue: [email protected][0].birthdate
                  label: Date of birth
              - type: component.email-field
                instanceId: employee-email
                options:
                  initialValue: [email protected][0].email
                  label: Email
                  icon: email
              - type: component.number-field
                instanceId: employee-phone-number
                options:
                  initialValue: [email protected][0].phone
                  label: Phone number
                  icon: phone
        - type: component.section
          options:
            title: Business information
            children:
              - type: component.text-field
                instanceId: employee-position
                options:
                  initialValue: [email protected][0].position
                  label: Position
              - type: component.date-picker
                instanceId: employee-startWork
                options:
                  initialValue: [email protected][0].employee-startWork
                  label: Date of starting work

employee-detail-dynamic.jigx

info-modal in 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-list.jigx

title: Info Modal in a list jig
type: jig.list

header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=1129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
      
onRefresh: 
  type: action.info-modal
  options:
    modal:
      title: Refreshing
      buttonText: Close
      description: Refreshing the customer list
      element: 
        type: icon
        icon: hourglass
        color: warning

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    color:
      - when: =(@ctx.current.item.result= 'Success' ? true :false)
        color: color2
    progress: [email protected]
    leftElement: 
      element: checkbox
      value: =(@ctx.current.item.status= 'Finished' ? true :false)
    style:
      isError: =(@ctx.current.item.result= 'Unsuccess' ? true :false)
      isStrikeThrough: =(@ctx.current.item.status= 'Finished' ? true :false)
    rightElement: 
      element: value      
      text: ="$ " & @ctx.current.item.value
    
    swipeable:
      left:
        - label: Details
          icon: people-man-8
          color: primary
          onPress: 
            type: action.info-modal
            options:
              modal:
                title: Customer Details
                buttonText: Close
                description: =(@ctx.current.item.name & '\n' & @ctx.current.item.subtitle & '\n' & '\n$' & @ctx.current.item.value)
                element:
                  type: avatar
                  text: [email protected]
                  
actions:
  - children:
      - type: action.info-modal
        options:
          title: Sales information
          icon: chart
          modal:
            title: Sales information 
            description: Customer and sales information is subject to change frequently  
            buttonText: Go back

datasource

info-modal in onPress action on a 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.

info-modal-widget.jigx

# Main wellness week landing screen configuration.
title: Wellness Week
type: jig.default

children:
  # Hero image section - calming/wellness themed background.
  - type: component.image
    options:
      # Fixed height for hero image.
      height: 300  
      # Scale image to cover entire area.                  
      resizeMode: cover              
      source:
        uri: https://images.unsplash.com/photo-1524901548305-08eeddc35080?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FsbXxlbnwwfHwwfHx8MA%3D%3D

  # Grid layout containing 4 interactive widgets
  - type: component.grid
    options:
      children:
        # Widget 1: Yoga/Wellness Week Information
        - type: component.grid-item
          options:
            # Single grid cell size
            size: 1x1                
            children:
              type: component.jig-widget
              options:
                jigId: info-modal-placeholder
                icon: yoga           
                onPress:
                  type: action.info-modal
                  options:
                    modal:
                      element:
                        type: icon
                        icon: yoga
                        color: warning    
                      title: Wellness Week
                      buttonText: Join
                      description: Center your wellbeing and come join is for a week of yoga
                    # Action when user taps the join button.
                    onConfirmed:
                      type: action.go-to
                      options:
                        linkTo: info-modal-placeholder

        # Widget 2: Venue Information
        - type: component.grid-item
          options:
            size: 1x1
            children:
              type: component.jig-widget
              options:
                jigId: info-modal-placeholder
                icon: people-man-1-geometric    
                onPress:
                  type: action.info-modal
                  options:
                    modal:
                      element:
                        type: avatar
                        text: JS      
                      title: Venue
                      buttonText: Directions
                      description: Wellness week will take place at Jodi's studio in Western Avenue, Seattle
                    # Action when user taps the venue button.
                    onConfirmed:
                      type: action.go-to
                      options:
                        linkTo: info-modal-placeholder

        # Widget 3: Healthy Products Shop
        - type: component.grid-item
          options:
            size: 1x1
            children:
              type: component.jig-widget
              options:
                jigId: info-modal-placeholder
                icon: shop          
                onPress:
                  type: action.info-modal
                  options:
                    modal:
                      element:
                        type: image
                        # Fit image within bounds
                        resizeMode: contain    
                        uri: https://images.unsplash.com/31/RpgvvtYAQeqAIs1knERU_vegetables.jpg?q=80&w=1175&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
                      title: Healthy Products
                      buttonText: Shop
                      description: Enhance your lifestyle with our premium selection of healthy products, now available at our store
                    # Action opens external shopping website
                    onConfirmed:
                      type: action.open-url
                      options:
                        url: https://thrivemarket.com/?utm_source=google&utm_medium=cpc&utm_campaign=Non-Brand_SEM_Diet_Healthy&utm_content=151719993106&utm_term=healthy%20food&device=c&ccode=acq60fogwp&ccode_force=1&gad_source=1&gclid=Cj0KCQjwpNuyBhCuARIsANJqL9ODbLM28MMxGvxJ9gK9ohdecVeLkrldAriwFwYg91JDLUEBMfwvK74aAsv6EALw_wcB

        # Widget 4: About Us Information
        - type: component.grid-item
          options:
            size: 1x1
            children:
              type: component.jig-widget
              options:
                jigId: info-modal-placeholder
                icon: content-browser-edit  
                onPress:
                  type: action.info-modal
                  options:
                    modal:
                      title: About us
                      buttonText: Go Back    
                      description: At our wellness center, we are dedicated to nurturing your mind, body, and spirit through holistic and personalized care

info-modal-placeholder.jigx