# jig-header

The `jig-header` component can be used in any type of jig. It serves as a container for specifying headers. It cannot be used without a component [image](https://docs.jigx.com/examples/readme/widgets/image), [location](https://docs.jigx.com/examples/readme/components/location), or [video-player](https://docs.jigx.com/examples/readme/components/video-player) inside the component.

{% hint style="info" %}
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](https://docs.jigx.com/building-apps-with-jigx/ui/assets).
{% endhint %}

## Configuration options

Some properties are common to all components, see [Common component properties](https://docs.jigx.com/examples/readme/components/jig-header) for a list and their configuration options.

<table><thead><tr><th width="154.484375">Core structure</th><th></th></tr></thead><tbody><tr><td><code>children</code></td><td><p>Specifies which component will be used inside the jig-header. There are three options:</p><ul><li><a href="location">component.location</a></li><li><a href="video-player">component.video player</a></li></ul></td></tr><tr><td><code>height</code></td><td><p>Specifies the height of the header.</p><ul><li><code>small</code></li><li><code>medium</code></li></ul></td></tr><tr><td><code>actions</code></td><td>Choose an action from the available list, such as <code>go-to</code> to open a different jig or <code>open-url</code> to navigate to a website. The selected action appears as a link in the top right corner of the header. Set the <code>icon</code> 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 jig title and overall screen design. To prevent the jig <code>title</code> and header action links from overlapping while scrolling, use either one text action or up to three icon actions.</td></tr></tbody></table>

{% hint style="warning" %}
Jigx does not recommend storing images in Dynamic Data (via any conversion), as the max file size per record is 350K.
{% endhint %}

## Examples and code snippets

### Jig-header with image

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FBQILSWjN6WMaWtoJ76Fw%2Fjig-header-small.png?alt=media&#x26;token=fc46450a-cb05-477a-8978-8c37235dda45" alt="Header with image - small" width="178"><figcaption><p>Header with image - small</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2F6TIxVAM335lTEOxk9jcO%2Fjig-header-medium.png?alt=media&#x26;token=067525c0-626a-49e7-b40d-f185442169f3" alt="Header with image - medium" width="180"><figcaption><p>Header with image - medium</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

This example shows a `component.jig-header` with property `children: component.image` and the difference between the set heights.

**Examples**:\
See the code samples using static data in GitHub for [small](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/jig-header/static-data/jig-header-image/jig-header-image-small.jigx) and [medium](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/jig-header/static-data/jig-header-image/jig-header-image-medium.jigx) headers.

{% tabs %}
{% tab title="small" %}

```yaml
header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg
```

{% endtab %}

{% tab title="medium" %}

```yaml
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg
```

{% endtab %}
{% endtabs %}

### Jig-header with location

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FQ4ge9ZjEA4Dzv3OrlrfR%2Flocation-header.png?alt=media&#x26;token=92322bec-8e8b-4149-9368-c02d8e690cf2" alt="Location in header"><figcaption><p>Location in header</p></figcaption></figure>
{% endcolumn %}

{% column %}
This example shows a `component.jig-header` with property `children: component.location` and the difference between the set heights. Refer to the [location](https://docs.jigx.com/examples/readme/components/location) component for additional location setup options.

**Examples**:\
See the code samples using static data in GitHub for [small](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/components/jig-header/static-data/jig-header-location/jig-header-location-small.jigx) and [medium](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/jig-header/static-data/jig-header-location/jig-header-location-medium.jigx) headers.
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="location-as-header(small)" %}

```yaml
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
```

{% endtab %}

{% tab title="location-as-header(medium)" %}

```yaml
header: 
  type: component.jig-header
  options:
    height: medium
    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
```

{% endtab %}

{% tab title="datasource" %}

```yaml
datasources:
  sites:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Empire State Building
          latitude: 40.748676182418976
          longitude: -73.98567513213604
          address: 20 W 34th St., New York, NY 10001, United States
          icon: landmark-empire-state
        - id: 2
          name: Great Lawn Softball Field 6
          latitude: 40.782091612607864 
          longitude: -73.9655512166898
          address: 86th St Transverse, New York, NY 10024, United States
          icon: stadium-1-building 
```

{% endtab %}
{% endtabs %}

### Jig-header with video-player

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FoA0VhaGIE43iCv8zRBT5%2FCC-header-small.png?alt=media&#x26;token=85e1d278-7950-488a-8426-edc5a6de6c1c" alt="Small - header with video player" width="188"><figcaption><p>Small - header with video player</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FD00QIZ8HwMIS8KUEJQY1%2FCC-header-medium.png?alt=media&#x26;token=3d174b47-8530-4af3-9767-dbec93518db1" alt="Medium - header with video player" width="188"><figcaption><p>Medium - header with video player</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/jig-header/static-data/jig-header-video-player/jig-header-videoplayer-small.jigx) and [medium](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-components/jig-header/static-data/jig-header-video-player/jig-header-videoplayer-medium.jigx) headers.

{% tabs %}
{% tab title=" small" %}

```yaml
header: 
  type: component.jig-header
  options:
    height: small
    children:
      type: component.video-player
      options:
        url: https://cdn.pixabay.com/video/2023/10/01/183108-870151713_small.mp4
        title: video-player
        autoplay: false
```

{% endtab %}

{% tab title="medium" %}

```yaml
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
```

{% endtab %}
{% endtabs %}

### Jig-header with an action (text link)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FtsacQd5CkAzmZzQvUAr1%2FCC-jigheader-action-link.png?alt=media&#x26;token=914086c2-c5fa-44f3-8bd5-553e78519891" alt="Jig header with an action" width="188"><figcaption><p>Jig header with an action</p></figcaption></figure>
{% endcolumn %}

{% column %}
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 Jigx website.
{% endcolumn %}
{% endcolumns %}

{% code title="small" %}

```yaml
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            
```

{% endcode %}

### Jig-header with multiple actions (icons)

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2F5NsvqjeiEIIf9oIal3fF%2FCC-jigheader-IconAction.png?alt=media&#x26;token=eca86688-1a13-47af-a239-ecba06bf8a8c" alt="Jig header with icon actions" width="188"><figcaption><p>Jig header with icon actions</p></figcaption></figure>
{% endcolumn %}

{% column %}
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 jig `title` when scrolling. The `open-url` actions open various Jigx websites.
{% endcolumn %}
{% endcolumns %}

{% code title="small" %}

```yaml
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            
```

{% endcode %}

### Jig-header actions without header children

{% columns %}
{% column %}
In this example, we use the `jig-header` action to create two actions with icons: one to open an `info-modal` and another to `go-to` a different jig.

The `jig-header` has no children (such as an image, location, or video player), which allows for greater flexibility in the header.
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FMz3trg6YtiuaKMGqXLin%2FCC-headerAction-noChildren.PNG?alt=media&#x26;token=7621c953-d94f-4c34-b677-ca0088c2ddc2" alt="Jig-header action"><figcaption><p>Jig-header action</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="jig-header-action-without-children.jigx" %}

```yaml
title: Header with no children
type: jig.default
# Add the header and only specify actions.
header:
  type: component.jig-header
  options:
    height: medium
    actions:
      # First action to go to a jig. The jig is opened as a modal. 
      - type: action.go-to
        options:
          title: Invoice
          icon: accounting-invoice
          linkTo: monthly-invoice
          isModal: true
      # Second action opens an info-modal showing an avatar.     
      - type: action.info-modal
        options:
          title: ""
          icon: person
          modal:
            title: This is you
            description: =@ctx.user.displayName
            buttonText: Close
            element: 
              type: avatar
              text: Your self
              uri: =@ctx.user.avatarUrl
            
children:
  - type: component.entity
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Entity field
                  value: Text
```

{% endtab %}

{% tab title="monthly-invoice.jigx" %}

```yaml
title: Monthly invoicing
description: Provide your details
type: jig.default

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

children:
  - type: component.section
    options:
      title: Details
      children: 
        - type: component.form
          instanceId: inputValues
          options:
            children:
              - type: component.text-field
                instanceId: firstName
                options:
                  initialValue: =@ctx.user.displayName
                  label: First name
                  isRequired: false
              - type: component.email-field
                instanceId: email
                options:
                  initialValue: =@ctx.user.email
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  initialValue: =@ctx.user.phone
                  label: Phone number

actions:
  - children:
      - type: action.action-list
        options:
          title: Send Invoice
          isSequential: true
          actions:
            - type: action.generate-pdf
              instanceId: generate-pdf-id
              options:
                # Provide the HTML for the PDF file.
                html: =@ctx.datasources.monthly-invoice-HTML.invoice-html
                fileName: invoice-1  
            - type: action.execute-entity
              options: 
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/documents
                method: create
                data:
                  fileName: invoice-1
                  date: =$now()
                  file: =@ctx.actions.generate-pdf-id.outputs.uri
                conversions:
                  - property: file
                    from: local-uri
                    to: data-uri      
            - type: action.share
              options:
                fileUri: =@ctx.actions.generate-pdf-id.outputs.uri
                message: Global Invoice 
                subject: Invoice for January
 
```

{% endtab %}

{% tab title="monthly-invoice-HTML.jigx" %}

```yaml
type: datasource.static
options:
  data:     
    - id: 1
      invoice-html: |
       <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Invoice</title>
            <style>
              body {
                font-family: 'Arial', sans-serif;
                margin: 0;
                padding: 20px;
                background-color: #f6f6f6;
              }
              .invoice-box {
                max-width: 800px;
                margin: auto;
                padding: 30px;
                border: 1px solid #eee;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
                background-color: #fff;
                color: #555;
              }
              .invoice-box table {
                width: 100%;
                line-height: 1.6;
                text-align: left;
                border-collapse: collapse;
              }
              .invoice-box table td {
                padding: 5px;
                vertical-align: top;
              }
              .invoice-box table tr td:nth-child(2) {
                text-align: right;
              }
              .invoice-box table tr.top table td {
                padding-bottom: 20px;
              }
              .invoice-box table tr.information table td {
                padding-bottom: 40px;
              }
              .invoice-box table tr.heading td {
                background: #eee;
                border-bottom: 1px solid #ddd;
                font-weight: bold;
              }
              .invoice-box table tr.details td {
                padding-bottom: 20px;
              }
              .invoice-box table tr.item td {
                border-bottom: 1px solid #eee;
              }
              .invoice-box table tr.item.last td {
                border-bottom: none;
              }
              .invoice-box table tr.total td:nth-child(2) {
                border-top: 2px solid #eee;
                font-weight: bold;
              }
              h2, h3 {
                margin: 0;
              }
            </style>
          </head>
          <body>
            <div class="invoice-box">
              <table cellpadding="0" cellspacing="0">
                <!-- Invoice Header -->
                <tr class="top">
                  <td colspan="2">
                    <table>
                      <tr>
                        <td class="title">
                          <h2>Company Name</h2>
                        </td>
                        <td>
                          Invoice #: 12345
                          Created: January 1, 2025
                          Due: January 31, 2025
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <!-- Company & Customer Information -->
                <tr class="information">
                  <td colspan="2">
                    <table>
                      <tr>
                        <td>
                          Company Name, Inc.
                          12345 Street Address
                          City, State, Zip
                        </td>
                        <td>
                          Customer Name
                          Customer Company
                          67890 Customer Address
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <!-- Payment Method Details -->
                <tr class="heading">
                  <td>Payment Method</td>
                  <td>Check #</td>
                </tr>
                <tr class="details">
                  <td>Check</td>
                  <td>1001</td>
                </tr>
                <!-- Itemized List of Services/Products -->
                <tr class="heading">
                  <td>Item</td>
                  <td>Price</td>
                </tr>
                <tr class="item">
                  <td>Website Design</td>
                  <td>$300.00</td>
                </tr>
                <tr class="item">
                  <td>Hosting (3 months)</td>
                  <td>$75.00</td>
                </tr>
                <tr class="item last">
                  <td>Domain Registration (1 year)</td>
                  <td>$10.00</td>
                </tr>
                <!-- Total -->
                <tr class="total">
                  <td></td>
                  <td>Total: $385.00</td>
                </tr>
              </table>
            </div>
          </body>
          </html>
```

{% endtab %}
{% endtabs %}