Components

jig-header

6min

The jig-header component can be used in any type of . It serves as a container for specifying headers. It cannot be used without a component image﻿, location﻿, or video-player﻿ inside the component.
The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline.  For more details, refer to Assets﻿.
﻿Configuration options﻿
﻿
Core structure
﻿
children
Specifies which component will be used inside the jig-header. There are three options:
﻿component.image﻿﻿
﻿component.location﻿﻿
﻿component.video player﻿﻿
height
Specifies the height of the header.
small
medium
actions
Choose an action from the available list, such as go-to to open a different  or open-url to navigate to a website. The selected action appears as a link in the top right corner of the header.
Set the icon property in the action to display the action link as an icon instead of text.
Styles of actions are inherited, for example, disabling the link.
You can add multiple action links in the header, but ensure they accommodate the  title and overall screen design.
To prevent the  title and header action links from overlapping while scrolling, use either one text action or up to three icon actions.
﻿
﻿
﻿Examples and code snippets ﻿
Header with image
﻿
Header with image
﻿
This example shows a component.jig-header with property children: component.imageand the difference between the set heights.
Examples:
See the code samples using static data in GitHub for small and medium headers.
small
medium
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg
﻿
Location in header
﻿
This example shows a component.jig-header with property children: component.location and the difference between the set heights.
Refer to the location﻿ component for additional location setup options.
Examples:
See the code samples using static data in GitHub for small and medium headers.

location-as-header(small)
location-as-header(medium)
datasource
header: 
  type: component.jig-header
  options:
    height: small
    children:
      type: component.location
      options:
        viewPoint:
          # Center the address in the middle of the screen.
          centerPosition: middle
          # Sepcify the address using a datasource.
          address: =@ctx.datasources.sites[0].address
          # Zoom in for map clearly.
          zoomLevel: 8
        # Add endpoint marker icon for the address.  
        markers:
          data: =@ctx.datasources.sites[0].address
          item:
            type: component.marker-item
            options:
              address: =@ctx.datasources.sites[0].address
              children:
                type: component.icon
                options:
                  # Determine the color of the marker icon.
                  color: negative
                  # Define the icon in the datasource.
                  icon: =@ctx.datasources.sites[0].icon
header: 
  type: component.jig-header
  options:
    height: small
    children:
      type: component.location
      options:
        viewPoint:
          # Center the address in the middle of the screen.
          centerPosition: middle
          # Sepcify the address using a datasource.
          address: =@ctx.datasources.sites[0].address
          # Zoom in for map clearly.
          zoomLevel: 8
        # Add endpoint marker icon for the address.  
        markers:
          data: =@ctx.datasources.sites[0].address
          item:
            type: component.marker-item
            options:
              address: =@ctx.datasources.sites[0].address
              children:
                type: component.icon
                options:
                  # Determine the color of the marker icon.
                  color: negative
                  # Define the icon in the datasource.
                  icon: =@ctx.datasources.sites[0].icon
﻿
Small - header with video player
﻿
Medium - header with video player
﻿
This example shows a component.jig-header with property children: component.video-player. and the difference between the set heights.
Examples:
See the code samples using static data in GitHub for small and medium headers.
small
medium
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: https://cdn.pixabay.com/video/2023/10/01/183108-870151713_small.mp4
        title: video-player
        autoplay: false
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: https://cdn.pixabay.com/video/2023/10/01/183108-870151713_small.mp4
        title: video-player
        autoplay: false
﻿
Jig header with an action
﻿
This example shows a component.jig-header  configured with an action. The action displays as a link in the top right corner of the header. Ensure the action is visible and not obscured by the header image or video. The open-url action is configured to open the  website.
﻿
small
title: Jig- header with action
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1605712916066-e143c317df72?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHByb2JsZW18ZW58MHx8MHx8fDA%3D
# Configure the action applicable to the header.
# The action displays as a link in the top right corner of the header.            
    actions:
      - type: action.go-to
        options:
          title: Ask a question
          linkTo: ai-chat

children:
  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Helpful Resources
            children:
              - type: component.entity-field
                options:
                  label: Documentation
                  value: https://docs.jigx.com/
              - type: component.entity-field
                options:
                  label: Community
                  value: https://community.jigx.com/
              - type: component.entity-field
                options:
                  contentType: email
                  label: Support
                  value: support@jigx.com            
title: Jig- header with action
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1605712916066-e143c317df72?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHByb2JsZW18ZW58MHx8MHx8fDA%3D
# Configure the action applicable to the header.
# The action displays as a link in the top right corner of the header.            
    actions:
      - type: action.go-to
        options:
          title: Ask a question
          linkTo: ai-chat

children:
  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Helpful Resources
            children:
              - type: component.entity-field
                options:
                  label: Documentation
                  value: https://docs.jigx.com/
              - type: component.entity-field
                options:
                  label: Community
                  value: https://community.jigx.com/
              - type: component.entity-field
                options:
                  contentType: email
                  label: Support
                  value: support@jigx.com            
﻿
Jig header with icon actions
﻿
This example demonstrates a component.jig-header configured with three open-url actions, displayed as icons in the top right corner of the header. Styling is applied to two of the icons to ensure visibility. Make sure the actions are not obscured by the header image/video or the  title when scrolling. The open-url actions open various  websites.
﻿
small
title: Jig- header (icon actions)
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: 
            https://images.unsplash.com/photo-1475965894430-b05c9d13568a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdoaXRlJTIwcGF0dGVybmVkJTIwY29sb3IlMjBiYWNrZ3JvdW5kc3xlbnwwfHwwfHx8MA%3D%3D
# Configure multiple actions applicable to the header.
# Add icons for each action link. 
# Set the style for two of the action icons.
# The actions display the icons (not the text) in the top right corner of the header.          
     actions:
      - type: action.open-url
        options:
          icon: contact-us-customer-support-chat
          style:
          # Displays the icon in red or the brand's designated danger color.
            isDanger: true
          title: Ask a question
          url: https://jigx.com/
      - type: action.open-url
        options:
          # Icon displays in the primary color when no styling is configured.
          icon: document
          title: Documentation
          url: https://docs.jigx.com/
      - type: action.open-url
        options:
          style:
          # Displays the icon in yellow or the brand's designated secodary color.
            isSecondary: true
          icon: people-protester
          title: Community
          url: https://community.jigx.com/       
      
children:
  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Helpful Resources
            children:
              - type: component.entity-field
                options:
                  label: Documentation
                  value: https://docs.jigx.com/
              - type: component.entity-field
                options:
                  label: Community
                  value: https://community.jigx.com/
              - type: component.entity-field
                options:
                  contentType: email
                  label: Support
                  value: support@jigx.com            
title: Jig- header (icon actions)
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: 
            https://images.unsplash.com/photo-1475965894430-b05c9d13568a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdoaXRlJTIwcGF0dGVybmVkJTIwY29sb3IlMjBiYWNrZ3JvdW5kc3xlbnwwfHwwfHx8MA%3D%3D
# Configure multiple actions applicable to the header.
# Add icons for each action link. 
# Set the style for two of the action icons.
# The actions display the icons (not the text) in the top right corner of the header.          
     actions:
      - type: action.open-url
        options:
          icon: contact-us-customer-support-chat
          style:
          # Displays the icon in red or the brand's designated danger color.
            isDanger: true
          title: Ask a question
          url: https://jigx.com/
      - type: action.open-url
        options:
          # Icon displays in the primary color when no styling is configured.
          icon: document
          title: Documentation
          url: https://docs.jigx.com/
      - type: action.open-url
        options:
          style:
          # Displays the icon in yellow or the brand's designated secodary color.
            isSecondary: true
          icon: people-protester
          title: Community
          url: https://community.jigx.com/       
      
children:
  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Helpful Resources
            children:
              - type: component.entity-field
                options:
                  label: Documentation
                  value: https://docs.jigx.com/
              - type: component.entity-field
                options:
                  label: Community
                  value: https://community.jigx.com/
              - type: component.entity-field
                options:
                  contentType: email
                  label: Support
                  value: support@jigx.com            
﻿
﻿

Core structure
children	Specifies which component will be used inside the jig-header. There are three options: component.image component.location component.video player
height	Specifies the height of the header. small medium
actions	Choose an action from the available list, such as go-to to open a different or open-url to navigate to a website. The selected action appears as a link in the top right corner of the header. Set the icon property in the action to display the action link as an icon instead of text. Styles of actions are inherited, for example, disabling the link. You can add multiple action links in the header, but ensure they accommodate the title and overall screen design. To prevent the title and header action links from overlapping while scrolling, use either one text action or up to three icon actions.