# share

{% columns %}
{% column %}
Easily share your files directly from the app with just a tap. Whether it's a document, image, or report, the share action lets you quickly send files via apps on the device, such as email, messaging apps, or AirDrop.
{% endcolumn %}

{% column %}

<figure><img src="/files/hiDheb4mjhwRvKdQjuLv" alt="Share images"><figcaption><p>Share images</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Configuration options

Some properties are common to all components, see [Common component properties](/examples/readme/actions/share.md) for a list and their configuration options.

<table><thead><tr><th width="151.31640625">Core structure</th><th></th></tr></thead><tbody><tr><td><code>email</code></td><td>Provide an email address, this optional property allows a string or expression. It is used to set the To address if sharing with email. If an email is supplied the share action will automatically open up the default email app on the phone to compose and fill in the supplied details. If email is not supplied, you will be able to share via other methods or apps. For iOS you can only supply a single email address. If you supply more, the To field will be left blank. This is not an issue on Android but for consistency it is best to keep to one email address.</td></tr><tr><td><code>fileUri</code></td><td>Provide the uri for the file you want to share, either from a datasource, in an expression, or from an action, such as the <code>action.generate-pdf</code>. You can reference the PDF or the local uri of the PDF document using the action's output uri <code>=@ctx.actions.generatePDF.outputs.uri</code>. The <code>fileUri</code> needs to be the full uri of the local file.</td></tr><tr><td><code>message</code></td><td>Add a text message to send with the shared file.</td></tr><tr><td><code>subject</code></td><td>Add a subject when sharing the file. The subject will only appear in apps that support a subject property, such as email.</td></tr><tr><td><code>title</code></td><td>Provide the action button with a title, for example, Share file.</td></tr></tbody></table>

## Considerations

* All properties are optional but you need to at least supply a `message` or `fileUri`.
* You can select from the apps or methods available on your device for sharing.
* This means you can share a piece of text without a file.
* You can also share one or more files. If there is more than one file it needs to evaluate to a string array.
* For best results, share files that are stored locally (e.g., images or PDFs). Files stored in a datasource as base64, data URI, or buffers will be returned as unreadable binary (.bin) files.

## Examples and code snippets

### Share images

{% columns %}
{% column %}

<figure><img src="/files/hiDheb4mjhwRvKdQjuLv" alt="Share images"><figcaption><p>Share images</p></figcaption></figure>
{% endcolumn %}

{% column %}
In this example, a foreman takes multiple images of the job and saves the images to Dynamic Data. When the images are successfully saved the images are shared via the devices message sharing apps.

**Example:** See the full code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-actions/share/action-share-images.jigx).
{% endcolumn %}
{% endcolumns %}

{% code title="action-share-images.jigx" %}

```yaml
title: Site Inspection
type: jig.default
icon: building-1-building

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

children:
  - type: component.form
    instanceId: site-multiple
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.media-field
          instanceId: site-photos
          options:
           # Set media field to allow multiple image uploads         
            isMultiple: true
            label: Capture images from the site
            mediaType: image
# Include the save method and share actions in the action list.        
actions:
  - children:
      - type: action.action-list
        options:
          title: Save & Share photos
          isSequential: true
          actions:
          # Configure the action to save the images to the database.
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/site
                method: create
                data:
                 # Provide the metadata and image files to be saved.
                  site-photos: =@ctx.components.site-photos.state.value
                  createdBy: =@ctx.user.email
                  createdDate: =$now()
                # Provide the image to be stored in Dynamic files 
                file:
                  localPath: =@ctx.components.site-photos.state.value  
                onSuccess: 
                  # Once saved, the device's apps modal opens to send the images. 
                  type: action.share
                  options:
                    message: =$fromMillis($toMillis($now()), '[M]/[D]/[Y]') & 'Site photos'
                    fileUri: =@ctx.components.site-photos.state.value     

```

{% endcode %}

### Generate a pdf, save and share

{% columns %}
{% column %}
In this example, an action list contains three actions: the first generates a PDF for an invoice, the second saves it to the database, and the third shares the PDF via a messaging app on the device. The file is saved to dynamic files.

**Example:** See the full code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-actions/share/action-share-pdf.jigx).
{% endcolumn %}

{% column %}

<figure><img src="/files/MXRIq5bIvMyd3hs2hKZ3" alt="" width="170"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="action-share-pdf.jigx" %}

```yaml
title: Monthly invoices
description: Provide you 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: John Smith
                  label: First name
                  isRequired: false
              - type: component.email-field
                instanceId: email
                options:
                  initialValue: john.smith@global.com
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  initialValue: 23445634556
                  label: Mobile number
# Create an action list that will first create the PDF from the HTML,
# secondly save the PDF file to the dynamic database,
# thirdly share the pdf file via one of the devices apps.                  
actions:
  - children:
      - type: action.action-list
        options:
          title: Send Invoice
          isSequential: true
          actions:
          # First action to generate the pdf.
            - type: action.generate-pdf
              instanceId: generate-pdf-id
              options:
                # Provide the HTML for the PDF file.
                html: =@ctx.datasources.invoice-html.invoice 
                # Give the pdf a name that is used when saved or shared.  
                fileName: invoice-1
           # Second action to save the file to the Dynamic database.   
            - type: action.execute-entity
              options: 
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/documents
                method: create
                data:
                  # Enter the file name for database storage.
                  fileName: invoice-1
                  date: =$now()
                  # Use the action instance output to reference the file
                  # that is saved in Dynamic files
                file: 
                  localPath: =@ctx.actions.generate-pdf-id.outputs.uri
            # Third action to share the file via the device's apps.        
            - type: action.share
              options:
                # Use the action instance output to reference the file.
                fileUri: =@ctx.actions.generate-pdf-id.outputs.uri
                # Provide a message and subject to accompany the share.
                message: Global Invoice
                # Subject appears only in apps that support it (e.g., email). 
                subject: Invoice for January
```

{% endtab %}

{% tab title="invoice-HTML datasource" %}

```yaml
type: datasource.static
options:
  data: 
    - id: 1
      invoice: |
        <!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<br>
                          Created: January 1, 2025<br>
                          Due: January 31, 2025
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <!-- Company & Customer Information -->
                <tr class="information">
                  <td colspan="2">
                    <table>
                      <tr>
                        <td>
                          Company Name, Inc.<br>
                          12345 Street Address<br>
                          City, State, Zip
                        </td>
                        <td>
                          Customer Name<br>
                          Customer Company<br>
                          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 %}

### Share by email

{% columns %}
{% column %}

<figure><img src="/files/POA0m2jkyTJTKO2kyYBT" alt="Share by email"><figcaption><p>Share by email</p></figcaption></figure>
{% endcolumn %}

{% column %}
In this example, we demonstrate using the `action.share` to send an `email` to a customer with an attachment. The `message`, `subject` and `email` (To) properties are configured as part of the action.

**Example:** See the full code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-actions/share/action-share-email.jigx).
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
For best results, share files that are stored locally (e.g., images or PDFs). Files stored in a datasource as base64, data URI, or buffers will be returned as unreadable binary (.bin) files.
{% endhint %}

{% tabs %}
{% tab title="action-share-email.jigx" %}

```yaml
title: Global Invoice 
type: jig.document
icon: accounting-invoice
# The datasource returns the pdf file that will be sent
datasources:
  storage: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/documents
      query: |
       SELECT id,
        '$.fileName',
        '$.date', 
        '$.html',
        '$.file' 
        FROM [default/documents] 
        WHERE '$.fileName' = "purchase-order"
      
source:
  documentType: HTML
  content: =@ctx.datasources.purchase-order-html.order
actions:
  - children:
      # Add the share action, and configure the email details.
      - type: action.share
        options:
          # The title will display on the action button.  
          title: Send order
          # Add the email address which populates the To field in an email.
          # For iOS you can only supply a single email address. 
          # If you supply more, the To field will be left blank.
          # This is not an issue on Android,
          # but for consistency it is best to keep to one email address.
          email: john@gobal.com
          # Specify the file that will be shared as an attachment to the email
          fileUri: =@ctx.datasources.storage.file
          # Provide a message which populates the body of the email.
          message: Hi John, attached is your purchase order.
          # Provide a subject for the email's subject line.
          subject: Purchase order March 2025 
```

{% endtab %}

{% tab title="purchase-order-HTML datasource" %}

```yaml
type: datasource.static
options:
  data:
    - id: 1
      order: |
        <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Purchase Order</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        margin: 20px;
                        padding: 20px;
                        background-color: #f4f4f4;
                    }
                    .purchase-order {
                        background: #fff;
                        padding: 20px;
                        border-radius: 5px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        max-width: 600px;
                        margin: auto;
                    }
                    h2 {
                        text-align: center;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        margin-top: 10px;
                    }
                    table, th, td {
                        border: 1px solid #000;
                    }
                    th, td {
                        padding: 8px;
                        text-align: left;
                    }
                    .footer {
                        margin-top: 20px;
                        text-align: center;
                    }
                </style>
            </head>
            <body>
                <div class="purchase-order">
                    <h2>Purchase Order</h2>
                    <p><strong>Order Number:</strong> PO12345</p>
                    <p><strong>Date:</strong> February 13, 2025</p>
                    <p><strong>Supplier:</strong> ABC Supplies Ltd.</p>
                    <table>
                        <tr>
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                        </tr>
                        <tr>
                            <td>Concrete Blocks</td>
                            <td>100</td>
                            <td>$500</td>
                        </tr>
                        <tr>
                            <td>Steel Rods</td>
                            <td>50</td>
                            <td>$750</td>
                        </tr>
                        <tr>
                            <td>Cement Bags</td>
                            <td>20</td>
                            <td>$200</td>
                        </tr>
                    </table>
                    <p><strong>Total Amount:</strong> $1450</p>
                    <div class="footer">
                        <p>Authorized by: ______________</p>
                    </div>
                </div>
            </body>
            </html>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jigx.com/examples/readme/actions/share.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.