User Profile

By default, the user profile in Jigx includes various menu options, such as Personal Information, Notifications, Settings, and more. Certain user information and UI elements can be customized to fit specific needs.

Default Profile screen

Default profile setup

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	Allows users to ask support 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.

Allowing users to update their profile

You can allow users to update specific information in their profile using the action.update-profile. This action can be configured within a jig in various ways, such as: An action button A header action link or icon In an event, e.g., 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: [email protected]
          lastName: [email protected]
          displayName: [email protected]
          avatarUrl: [email protected]
          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 or extend the Profile screen

The Profile screen can be extended by adding Components that allow additional user information to be displayed. This can be achieved through the following steps:

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 into the app to capture their details. This updates the Profile screen. Once updated, the screen can be configured with conditions to prevent it from appearing again.

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

Properties	Description
Profile	Adding the property with it's values to the index.jigx file will insert the referenced jigs into the header section of the Profile screen.
isPersonalInfoMenuItemVisible	Determine whether the Personal Information menu should be hidden (false) or visible (true). The default setting is true. This menu opens a screen displaying the user's name, email, and avatar, and provides an option to delete the account. Customizing the Profile screen allows this information to be integrated directly, eliminating the need for a menu option.
jigId	Provide the jigId for the jigs that will be displayed in the Profile screen.

Considerations

• No additional padding is added to the jigs, which may affect the screen's UI. You can use properties such as background or padding to ensure proper content alignment. This issue is particularly noticeable when using list-items versus custom components or other components.

• When combining or using custom components, it is recommended to manually add padding and margins 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: [email protected]
            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: [email protected]
                    - 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: [email protected] 
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          leftElement: 
            element: icon
            icon: [email protected]
            isContained: true
            color: [email protected]
          rightElement: 
            element: value
            text: [email protected]

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: [email protected]
        - type: component.text
          options:
            value: [email protected]
        - type: component.text
          options:
            value: [email protected]

user-profile.jigx

index.jigx

datasource