Combine custom & standard components (Alpha)

This feature is currently in its Alpha stage of development.

• As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.

• In this phase, the feature may contain bugs or behave unpredictably.

• Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.

• We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.

Combining Custom components (Alpha) with Standard components enables the creation of advanced functionality and rich user interfaces. Standard components, such as stepper , progress-bar , and countdown , provide a reliable foundation for common interactions, ensuring consistency and usability. By integrating custom components and tailored elements designed to meet specific requirements, you can extend this functionality to create dynamic features like interactive menus, tabbed navigation, and toggles with unique behaviors. This blend allows for a balance between efficiency and creativity, enabling apps to stand out with innovative designs while maintaining intuitive user experiences.

This approach encourages modular development, fostering scalability and adaptability, whether for small projects or enterprise-grade applications.

Here are code examples to illustrate combining custom and standard components to build advanced features.

Considerations

• When using component.image in a custom component, the height property must be specified as part of the size property. Otherwise, validation errors occur, see below:

Correct YAML

# Correct YAML snippet for using the height property in the image component,
# when used in a custom component.
- type: component.image
          options:
            size: 
              height: 196
            source:
              uri: https://images

Incorrect YAML

Example and code samples

The examples use a set of custom components called sections. The sections are for titles, spacing, and context. The sections code is available on GitHub.

Countdown

Countdown

In this example, the first component.countdown is a standard component and the following four are custom components. Here, the component.countdown is configured in a component.card with color.

Example:

1. See the section component example in GitHub.

2. See the custom component example in GitHub.

3. See the jig example in GitHub.

countdown.jigx

# jigs/countdown.jigx 
title: Countdown
type: jig.default
icon: time-reverse

children:
  - type: component.custom-component
    componentId: section2
    inputs:
      title: STANDARD COMPONENTS
  # Standard countdown component.      
  - type: component.countdown
    options:
      expiresAt: =$fromMillis($toMillis($now()) + (14 * 24 * 60 * 60 * 1000))
      labels:
        position: top
        isVisible: true
      align: stretch
  - type: component.custom-component
    componentId: section2
    inputs:
      title: CUSTOM COMPONENTS
  - type: component.custom-component
    componentId: section2
    inputs:
      title: Small
  # Custom countdown component contained in a card, aligned left, & size set
  #  to small.      
  - type: component.custom-component
    componentId: countdown
  - type: component.custom-component
    componentId: section2
    inputs:
      title: Medium
  # Custom countdown component contained in a card with a color & size set to
  #  medium.         
  - type: component.custom-component
    componentId: countdown2
  - type: component.custom-component
    componentId: section2
    inputs:
      title: Large   
  # Custom countdown component contained in a card with color & size set to large.      
  - type: component.custom-component
    componentId: countdown3
  - type: component.custom-component
    componentId: section2
    inputs:
      title: Extra Large   
  # Custom countdown component contained in a card with color & size set to 
  # X-large.        
  - type: component.custom-component
    componentId: countdown4

countdown.jigx

countdown2.jigx

countdown3.jigx

countdown4.jigx

Progress Bar

In this example, the component.progress-bar, is customized by adding a component.card, component.icon, and component.text to achieve the required appearance.

Example:

1. See the section component example in GitHub.

2. See the custom component example in GitHub.

3. See the jig example in GitHub.

Progress-bar

progressbar-basic.jigx

# jigs/progressbar-basic.jigx
title: Progress Bars - Basic
type: jig.default
icon: loading-half

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1607434472257-d9f8e57a643d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzh8fGNvbWluZyUyMHNvb24lMjBsb2FkaW5nfGVufDB8fDB8fHww

children:
  # Three progress bars customized by placing them in cards, using views to
  # create the correct layout using gaps.
  - type: component.custom-component
    componentId: progress-sample-1
  # Icons create the stars and text.    
  - type: component.custom-component
    componentId: progress-sample-2

progress-sample-1.jigx

progress-sample-2.jigx

More examples of customized progress bars are available on GitHub:

Examples
Progress-bar with details	Progress-bar with top labels
Progress-bar sizes (Dynamic)	Progress-bar with bottom labels
Progress-bar steps(Dynamic)

Ratings

Ratings

This example demonstrates how you can create your own component using the custom components. Here various rating components are created by configuring the component.view and component.text.

Example:

1. See the section component example in GitHub.

2. See the custom component example in GitHub.

3. See the jig example in GitHub.

rating.jigx

# jigs/rating.jigx
title: Ratings
type: jig.default
icon: star-half

children:
  - type: component.section
    options:
      title: stars
      children:
        # Custom component created using view & text components.     
        - type: component.custom-component
          componentId: rating-1

  - type: component.section
    options:
      title: stars with statistics
      children:
        # Custom component created using view & text components.          
        - type: component.custom-component
          componentId: rating-2
          inputs: 
            rating: 4.5
            rating-number: 6.4

  - type: component.section
    options:
      title: Statistics
      children:
        # Custom component created using view & text components.          
        - type: component.custom-component
          componentId: rating-3
          inputs: 
            rating: 4.5
            rating-number: 6.4   

  - type: component.section
    options:
      title: Emoji rating - emphasis
      children:
        # Custom component created using view & text components.          
        - type: component.custom-component
          componentId: rating-4

  - type: component.section
    options:
      title: Emoji rating - background
      children:
        # Custom component created using view & text components.          
        - type: component.custom-component
          componentId: rating-5

rating-1.jigx

rating-2.jigx

rating-3.jigx

rating-4.jigx

rating-5.jigx

# components/rating-5.jigx 
type: component.default
children:
  # View component determines the layout of the custom component. 
  - type: component.view
    options:
      style:
        flex: 
          grow: 1
          shrink: 1
          basis: 1
          direction: row
        justifyContent: space-evenly
      children:
        - type: component.view
          options:
            style:
              justifyContent: center
              alignItems: center
              height: 60
              width: 60
              radius: large
              # When the rating icon is pressed the background is highlighted
              # in a color.               
              background:
                color: =$number(@ctx.solution.state.rating) = 1 ? 'color3':''
            # Adding an onPress event sets the state when pressed.                 
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: 1
            children:
              # The rating value is set to use an emoji instead of an icon.          
              - type: component.text
                options:
                  align: center
                  size: extra-large
                  value: 😭
        - type: component.view
          options:
            style:
              justifyContent: center
              alignItems: center
              height: 60
              width: 60
              radius: large
              background:
                color: =$number(@ctx.solution.state.rating) = 2 ? 'color3':''
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: 2
            children:
              - type: component.text
                options:
                  align: center
                  size: extra-large
                  value: ☹️
        - type: component.view
          options:
            style:
              justifyContent: center
              alignItems: center
              height: 60
              width: 60
              radius: large
              background:
                color: =$number(@ctx.solution.state.rating) = 3 ? 'color3':''
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: 3
            children:
              - type: component.text
                options:
                  align: center
                  size: extra-large
                  value: 😐
        - type: component.view
          options:
            style:
              justifyContent: center
              alignItems: center
              height: 60
              width: 60
              radius: large
              background:
                color: =$number(@ctx.solution.state.rating) = 4 ? 'color3':''
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: 4
            children:
              - type: component.text
                options:
                  align: center
                  size: extra-large
                  value: 🙂
        - type: component.view
          options:
            style:
              justifyContent: center
              alignItems: center
              height: 60
              width: 60
              radius: large
              background:
                color: =$number(@ctx.solution.state.rating) = 5 ? 'color3':''
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: 5
            children:
              - type: component.text
                options:
                  align: center
                  size: extra-large
                  value: 😍 

Sections

This example demonstrates how you can create one custom component and reuse it multiple times, in this instance, in the same jig. We use inputs to show different data and elements in each reuse of the custom component. Here a standard component.avatar is combined with component.view, component.text and component.icon.

Example:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

Sections

section-header-greetings.jigx

# jigs/section-header-greetings.jigx
title: Greetings
type: jig.default
icon: wave-hand

children:
  - type: component.section
    options:
      title: Greeting 1
      children:
        # Custom component created using view, icon & text components. 
        # Inputs are used to add the required data in the custom component.          
        - type: component.custom-component
          componentId: greetings
          inputs:
            avatar: https://t14345253.p.clickup-attachments.com/t14345253/34139efb-6a96-468d-9604-cb1b9484e2ff/avarat10.png?view=open
            avatar-size: regular
            name: John
            welcome-message: Hello
            linkTo: link-here
  - type: component.section
    options:
      title: Greeting with date
      children:
        # Custom component created using view, icon & text components. 
        # Inputs are used to add the required data in the custom component.          
        - type: component.custom-component
          componentId: greetings
          inputs:
            avatar: https://t14345253.p.clickup-attachments.com/t14345253/34139efb-6a96-468d-9604-cb1b9484e2ff/avarat10.png?view=open
            avatar-size: regular
            date: =$fromMillis($toMillis($now()), '[FNn], [D]. [M]. [Y]')
            name: John
            welcome-message: Hello
            linkTo: link-here
  - type: component.section
    options:
      title: Greeting with date and large avatar
      children:
        # Custom component created using view, icon & text components. 
        # Inputs are used to add the required data in the custom component.         
        - type: component.custom-component
          componentId: greetings
          inputs:
            avatar: https://t14345253.p.clickup-attachments.com/t14345253/34139efb-6a96-468d-9604-cb1b9484e2ff/avarat10.png?view=open
            avatar-size: large
            date: =$fromMillis($toMillis($now()), '[FNn], [D]. [M]. [Y]')
            name: John
            welcome-message: Hello
            linkTo: link-here
  - type: component.section
    options:
      title: Greeting with date and icon
      children:
        # Custom component created using view, icon & text components. 
        # Inputs are used to add the required data in the custom component.          
        - type: component.custom-component
          componentId: greetings
          inputs:
            avatar: https://t14345253.p.clickup-attachments.com/t14345253/34139efb-6a96-468d-9604-cb1b9484e2ff/avarat10.png?view=open
            avatar-size: regular
            date: =$fromMillis($toMillis($now()), '[FNn], [D]. [M]. [Y]')
            linkTo: link-here
            name: John
            # The configuration of the right-icon inputs displays the right
            # blue pencil icon.             
            right-icon: pencil
            right-icon-color: color9
            right-icon-link: link-here
            welcome-message: Hello
  - type: component.section
    options:
      title: Greeting with date and icon and large avatar
      children:
        # Custom component created using view, icon & text components. 
        # Inputs are used to add the required data in the custom component.         
        - type: component.custom-component
          componentId: greetings
          inputs:
            avatar: https://t14345253.p.clickup-attachments.com/t14345253/34139efb-6a96-468d-9604-cb1b9484e2ff/avarat10.png?view=open
            avatar-size: large
            date: =$fromMillis($toMillis($now()), '[FNn], [D]. [M]. [Y]')
            name: John
            # The configuration of the right-icon inputs displays the right
            # blue pencil icon.             
            right-icon: pencil
            right-icon-color: color9
            welcome-message: Hello
            right-icon-link: link-here
            linkTo: link-here

greetings.jigx

More examples of customized sections are available on GitHub:

Examples
Section header samples	Section sizes - medium (extra-bold)
Section sizes - regular	Section sizes - large
Section sizes - medium	Section sizes - extra large
Section header with subtitle

Stepper

Steppers

This example demonstrates how you can create one custom component and reuse it multiple times, in this instance in the two different jigs. We use inputs to show the number of steps and current steps in each reuse of the custom component. Here a stepper component is created by configuring the component.view.

Example:

1. See the section component example in GitHub.

2. See the custom component example in GitHub.

3. See the jig example in <GitHub.

stepper-style1.jigx

# jigs/stepper-style1.jigx 
title: Stepper Style 1
type: jig.default
icon: phone-swap

children:
  - type: component.custom-component
    componentId: headline
    inputs:
      headline2: Stepper 1
      subtitle: |
        - numberOfSteps: 1-6 
        - currentStep: 1-6
      linkTo: stepper-style1-variations
      link: variations
  # Custom component created using the view component. 
  # Inputs are used to determine the number of steps and current step,
  # in the custom component.      
  - type: component.custom-component
    componentId: stepper1
    inputs:
      numberOfSteps: 5
      currentStep: 3

stepper-style1-variations.jigx

stepper1.jigx

More examples of customized sections are available on GitHub:

Examples
Stepper style 2	Stepper style 6
Stepper style 3	Stepper style 7
Stepper style 4	Stepper style 8
Stepper style 5

Tabs

This example demonstrates how you can create custom components and reuse them multiple times. We use inputs to show the tab value, name, indicator and alignment in each reuse of the custom component. Here tab components are created by configuring the component.view. Additionally, we show how to reference a custom component inside a standard component.list-item.

Example:

1. See the section component example in GitHub.

2. See the custom component example in GitHub.

3. See the jig example in GitHub.

Tabs

tabs.jigx

# jigs/tabs.jigx
title: Tabs
type: jig.default
icon: app-window-four

onFocus:
  type: action.action-list
  options:
    isSequential: false
    actions:
      - type: action.set-state
        when: =$not($exists(@ctx.solution.state.tab))
        options:
          state: [email protected]
          value: tab2

datasources:
  store-feed-tabs:
    type: datasource.static
    options:
      data:
        - tabName: Tab 1
          tabValue: tab1
        - tabName: Tab 2
          tabValue: tab2
        - tabIndicator: true
          tabName: Tab 3
          tabValue: tab3
        - tabIndicator: true
          tabName: Tab 4
          tabValue: tab4
        - tabName: Tab 5
          tabValue: tab5
        - tabName: Tab 6
          tabValue: tab6
    
children:
  - type: component.section
    options:
      title: Static tabs - Center Align
      children:
        # Custom component created using the view component. 
        # Inputs are used to determine tab name, value, alignment and indicator.
        - type: component.custom-component
          componentId: tabs
          inputs:
            tabIndicator1: false
            tabIndicator2: true
            tabIndicator3: true
            tabIndicator4: true
            tabName1: Tab 1
            tabName2: Tab 2
            tabName3: Tab 3
            tabName4: Tab 4
            tabValue1: tab1
            tabValue2: tab2
            tabValue3: tab3
            tabValue4: tab4
            tabsAlignment: center
             
  - type: component.section
    options:
      title: Static tabs - Left Align
      children:
        # Same custom component reused as above using the view component. 
        # Using inputs you can change the appearance of the same custom
        # component.
        - type: component.custom-component
          componentId: tabs
          inputs:
            tabIndicator1: false
            tabIndicator2: true
            tabIndicator3: true
            tabIndicator4: true
            tabName1: Tab 1
            tabName2: Tab 2
            tabName3: Tab 3
            tabName4: Tab 4
            tabValue1: tab1
            tabValue2: tab2
            tabValue3: tab3
            tabValue4: tab4
              
  - type: component.section
    options:
      title: Stretched static tabs
      children:
        # Custom component created using the view component. 
        # Inputs are used to determine tab name, value, and indicator.   
        - type: component.custom-component
          componentId: tabs-stretched
          inputs:
            tabIndicator1: false
            tabIndicator2: true
            tabIndicator3: true
            tabIndicator4: true
            tabName1: Tab 1
            tabName2: Tab 2
            tabName3: Tab 3
            tabName4: Tab 4
            tabValue1: tab1
            tabValue2: tab2
            tabValue3: tab3
            tabValue4: tab4
          
        - type: component.custom-component
          componentId: tabs-stretched
          inputs:
            tabIndicator1: false
            tabIndicator2: true
            tabName1: Tab 1
            tabName2: Tab 2
            tabValue1: tab1
            tabValue2: tab2
          
  - type: component.section
    options:
      title: List item tabs
      children:
        - type: component.list
          options:
            maximumItemsToRender: 8
            data: [email protected]
            isHorizontal: true
            isHorizontalScrollIndicatorHidden: true
            item:
              # Custom component created using the view component.
              # Custom component added inside a standard list-item component. 
              # Inputs are used to determine tab name, and value in th custom 
              # component.            
              type: component.custom-component
              componentId: list-item-tabs
              inputs:
                tabIndicator: [email protected]
                tabName: [email protected]
                tabValue: [email protected]

tabs.jigx

tabs-stretched.jigx

list-item-tabs.jigx

Tags

Tags

This example demonstrates how you can create tags in a custom component. We use inputs in the custom component to show the tag color and title. Here a tab component is created by configuring the component.view and component.text. Additionally, we show you how to reference a custom component inside a standard component.list, and use a second custom component to create an action allowing you to tap a link at the top to add new tag.

Example:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

tags.jigx

#jigs/tags.jigx
title: Tags
type: jig.default
icon: tags-double-1

header:
  type: component.jig-header
  options:
    height: small
    children:
      options:
        source:
          uri: https://images.unsplash.com/photo-1578575737601-bd8f2557550c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHJlbGF4aW5nJTIwbmF0dXJlfGVufDB8MHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
      type: component.image

datasources:
  mydata:
    type: datasource.static
    options:
      data:
        - id: 1
          tags:
            - color: color1
              title: tag_1
            - color: color2
              title: tag_2
            - color: color3
              title: tag_3
            - color: color4
              title: tag_4
    
children:
  - type: component.custom-component
    componentId: header-2
    inputs:
      link: Add Tags
      title: ""
    
  - type: component.list
    when: [email protected] != null
    options:
      maximumItemsToRender: 10
      data: [email protected]
      isHorizontal: true
      isHorizontalScrollIndicatorHidden: true
      item:
        # Custom component created using the view and text components.
        # Custom component added inside a standard list-item component. 
        # Inputs are used to determine tag color and text value.       
        type: component.custom-component
        componentId: view-todo-tags
        inputs:
          info: [email protected]
  # Custom component created using the view and card components.
  # Inputs are used to determine the onPress action's title.
  - type: component.custom-component
    when: [email protected] = null
    componentId: add-button
    inputs:
      title: Add Tags

view-todo-tags.jigx

add-button.jigx

Toggles

This example demonstrates how you can create a custom component providing the functionality to toggle. We use inputs to determine the toggle name, highlighting and value. Here a toggle component is created by configuring the component.view and component.text. Additionally, we show you how to reference a custom component inside a standard component.list. The custom component is configured with the onPress event to trigger an action when the toggle is pressed.

Example:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

Toggles

toggles.jigx

#jigs/toggles.jigx
title: Toggles
type: jig.default
icon: toggle-setting-off

onFocus:
  type: action.action-list
  options:
    isSequential: true
    actions:
      - type: action.set-state
        when: =$not($exists(@ctx.solution.state.list-item-switch))
        options:
          state: [email protected]
          value: ""

      - type: action.set-state
        when: =$not($exists(@ctx.solution.state.switch))
        options:
          state: [email protected]
          value: switch-item1

datasources:
  categories:
    type: datasource.static
    options:
      data:
        - category-name: All
          state-value: ""
        - category-name: Completed
          state-value: completed
        - category-name: In Progress
          state-value: in-progress
        - category-name: Closed
          state-value: closed

children:
  - type: component.section
    options:
      title: List item categories
      children:
        - type: component.list
          options:
            maximumItemsToRender: 8
            data: [email protected]
            isHorizontal: true
            item:
              # Custom component created using the view and text components.
              # Custom component added inside a standard list component. 
              # Inputs are used to determine toggle name and text value.            
              type: component.custom-component
              componentId: list-item-switch
              inputs:
                switchName: [email protected]
                switchValue: [email protected]

  - type: component.section
    options:
      title: Switch
      children:
        - type: component.custom-component
          componentId: switch
          inputs:
            extraSpace: false
            switchName1: Item 1
            switchName2: Item 2
            switchName3: Item 3
            switchValue1: switch-item1
            switchValue2: switch-item2
            switchValue3: switch-item3
            
  - type: component.section
    options:
      title: Switch - Highlighted
      children:
            item:
        # Custom component created using the view and text components.
        # Inputs are used to determine toggle name, and text value and
        # highlighting.
        - type: component.custom-component
          componentId: switch
          inputs:
            extraSpace: false
            highlighted: true
            switchName1: Item 1
            switchName2: Item 2
            switchName3: Item 3
            switchValue1: switch-item1
            switchValue2: switch-item2
            switchValue3: switch-item3
            
  - type: component.section
    options:
      title: Switch with counters
      children:
        - type: component.custom-component
          componentId: switch
          inputs:
            extraSpace: false
            switchCount1: 3
            switchCount2: 1
            switchName1: Projects
            switchName2: Tasks
            switchValue1: switch-item1
            switchValue2: switch-item2
            
  - type: component.section
    options:
      title: Switch with counters - Highlighted
      children:
        # Custom component created using the view and text components.
        # Inputs are used to determine toggle name, and text value and 
        # highlighting.
        - type: component.custom-component
          componentId: switch
          inputs:
            extraSpace: false
            highlighted: true
            switchCount1: 3
            switchCount2: 1
            switchName1: Projects
            switchName2: Tasks
            switchValue1: switch-item1
            switchValue2: switch-item2

switch.jigx

list-item-switch.jigx