User Profile

Learn how the Jigx user profile screen works, how to update profile details with action.update-profile, and how to customize the Profile screen using index.jigx and components.

The Jigx User Profile is the in-app Profile screen for each logged-in user. It includes menu items like Personal information, Notifications, and Settings. You can customize what users see and add your own profile content.

Default Profile screen

On this page

• Default Profile screen menu options
• Update profile details with action.update-profile
• Customize the Profile screen using index.jigx (profile property)

Default Jigx Profile screen menu options

Personal information	Includes the logged-in user's name, email, avatar, and the option to delete the user account.
Notifications	Displays all notifications sent to the user, with options to mark all as read and filter by All, Read, or Unread.
Secondary identities	Refers to additional authentication methods required beyond primary login credentials, such as OAuth. Users can connect, refresh, or remove an identity.
Settings	Includes app settings such as color theme (light/dark mode), language selection, and region changes, if applicable.
Troubleshooting	Provides logging settings to help debug and troubleshoot app issues.
Support	Lets users contact support with a question. This setting can be hidden via a flag in the build configuration.
Logout	Allows the currently logged-in user to log out of the app.

Update profile details with action.update-profile

You can allow users to update specific profile information using action.update-profile.

You can configure this action in a jig in a few ways:

• An action button
• A header action link or icon
• An event handler, for example onPress

The following information can be updated when using the action:

• firstName
• lastName
• displayName
• avatarUrl

action-update-profile (button)

# Add an action to a jig to create a button that updates the user's profile.
actions:
  - children:
      # Select the update-profile action and set the properties to update. 
      - type: action.update-profile
        options: 
          firstName: =@ctx.components.firstName.state.value
          lastName: =@ctx.components.lastName.state.value
          displayName: =@ctx.components.displayName.state.value
          avatarUrl: =@ctx.components.userAvatar.state.value
          style:
            # Style the button color to the defined branded secondary color. 
           isSecondary: true
           # Give the button a name.
          title: Update

action-jig-header

action-onpress

Customize and extend the Jigx Profile screen

You can extend the Profile screen by adding components that display additional user information.

You do this by referencing one or more jigs in index.jigx under the profile property:

1. Define a jig containing the components you want to display on the Profile screen.
2. Set the jigId in the profile property within the index.jigx file.

You can create a jig as the first screen a new user sees when they log in to the app. Use it to capture their details. This updates the Profile screen. You can then add conditions so it does not appear again.

This is especially useful in scenarios where devices are shared among multiple employees, such as contractors or engineers.

Properties	Description
Profile	Adding this property (and its values) to the index.jigx file inserts the referenced jigs into the header section of the Profile screen.
isPersonalInfoMenuItemVisible	Determines whether the Personal Information menu is hidden (false) or visible (true). The default is true. This menu opens a screen showing the user's name, email, and avatar. It also provides an option to delete the account. When you customize the Profile screen, you can integrate this information directly. This removes the need for a separate menu option.
jigId	Provides the jigId for the jigs displayed on the Profile screen.

Considerations

• No additional padding is added to the jigs. This may affect the screen UI. Use properties like background or padding to keep content aligned. This is most noticeable with list-item components versus custom components.
• When combining custom and standard components, add padding and margins manually for consistent spacing and layout.

Examples and code snippets

Extended Profile screen with hidden personal information menu

Extended Profile

In this example, the Profile screen is extended to display the user's avatar along with their details in an expander component. Additionally, the personal information menu option is hidden from the list.

user-detail.jigx

title: profile
type: jig.default
# Add the components to display in the profile screen.
children:
  # Configure the components in a card to create a container for the information.
  - type: component.card
    options:
      children:
        # Add the user's avatar.
        - type: component.avatar
          options:
            align: center
            size: large
            title: =@ctx.user.avatarUrl
            uri: https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fG1hbiUyMGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D
        # Add the user's details in the expander component. 
        - type: component.expander
          options:
            header:
              centerElement: 
                type: component.titles
                options:
                  title: Rob Wentworth
                  subtitle: Washington DC
                  icon: person
                  iconColor: color7
                  align: left
            children:
              - type: component.entity
                options:
                  children:
                    - type: component.field-row
                      options:
                        children:
                          - type: component.entity-field
                            options:
                              label: Phone
                              value: "3249432812"
                          - type: component.entity-field
                            options:
                              label: Email
                              value: [e-mail]
                    - type: component.entity-field
                      options:
                        label: Address
                        value: 141 Harbor Dr Claymont, Delaware(DE), 19703

index.jigx

Extended Profile screen with list

This example demonstrates how to add a list of emergency contacts to a jig, which is referenced in the index.jigx file to extend the Profile screen.

Profile extended with list

emergency-list.jigx

title: Emergency contact list
type: jig.default
# Create a list of emergency contacts to show in the profile screen.         
children:
  - type: component.list
    options:
      data: =@ctx.datasources.emergency 
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.category
          subtitle: =@ctx.current.item.name
          leftElement: 
            element: icon
            icon: =@ctx.current.item.icon
            isContained: true
            color: =@ctx.current.item.color
          rightElement: 
            element: value
            text: =@ctx.current.item.contact

index.jigx

datasource

Extended Profile screen using custom components (alpha)

Custom Profile

In this example, the Profile screen has been extended to display the user's avatar, name, and email address using a custom component to create the required UI layout. This custom component is placed within a card in the user-profile jig. A standard list component is configured to display the region and department.

The list component allows users to update their department and region by configuring a rightElement with an onPress event.

user-data.jigx

# Configure a custom component to control the layout for the avatar and text.
# Add padding and alignment of item.
type: component.default
children:
  - type: component.view
    options:
      style:
        background:
          color: color14
        alignItems: center 
        padding: medium
      children:
        - type: component.avatar
          options:
            size: large
            title: Avatar
            uri: =@ctx.user.avatarUrl
        - type: component.text
          options:
            value: =@ctx.user.displayName
        - type: component.text
          options:
            value: =@ctx.user.email

user-profile.jigx

index.jigx

datasource