System StatusSamples on GitHub

print

This feature enables you to generate hard copies of invoices, receipts, articles, or any rendered content in raw HTML, providing a smooth, native experience that works across different devices and printers.

Print HTML action
Print HTML action

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure

title

Provide the action button with a title, for example, Print.

html

Use standard HTML elements to ensure optimal formatting and compatibility when rendering content for printing, for example, <html><body>Invoices are provided monthly.</body</html>. The HTML can be built up using JSONata or JavaScript.

Other options

icon

Select an to display when the action is configured as the secondary button or in a header action.

isHidden

true hides the action button, false shows the action button. Default setting is false.

styles

  • isDanger - Styles the action button in red or your brand's designated danger color.

  • isDisabled - Displays the action button as greyed out.

  • isPrimary - Styles the action button in blue or your brand's designated primary color.

  • isSecondary - Sets the action as a secondary button, accessible via the ellipsis. The icon property can be used when the action button is displayed as a secondary button.

Considerations

  • The action.print requires raw HTML. This can be configured in the action, in an expression, or in JavaScript.

Examples and code snippets

Basic print action

Print HTML
Print HTML

This example demonstrates configuring action.print to display a button for printing HTML content.

action-print-basic.jigx
title: Welcome
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-1584931423298-c576fda54bd2?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGdsb2JhbHxlbnwwfHwwfHx8MA%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: [email protected]
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  initialValue: 23445634556
                  label: Mobile number

actions:
  - children:
      # Add the print action.
      - type: action.print
        options:
          # Give the action button a title.
          title: Print Form
          # Provide the HTML content to be printed.
          html: <html>
            <body>
            <header>
            <h1>Global Inc Portal</h1>
            <p>Your mobile hub for work on the go</p>
            </header>
            <main>
            <div class="container">
            <div class="card">
            <h2>Welcome, Global Worker!</h2>
            <p>This portal is designed just for you—the modern worker who needs access to resources and updates anytime, anywhere.</p>
            <a href="https://jigx.com/" class="cta-button">Learn More</a>
            </div>
            <div class="card" id="features">
            <h2>Features</h2>
            <ul>
            <li>Real-time schedule updates</li>
            <li>Access to company resources on the go</li>
            <li>Easy team communication</li>
            <li>Mobile-friendly tools and dashboards</li>
            </ul>
            </div>
            <div class="card">
            <h2>Get Started</h2>
            <p>If you're new here, simply sign in to access your personalized dashboard and start exploring our tools designed to support your work on the move.</p>
            </div>
            </div>
            </main>
            <footer>
            <p>&copy; 2025 Global Worker Portal. All rights reserved.</p>
            </footer>
            </body>
            </html>

Print with web-view component

This example demonstrates configuring action.print to display a button for printing HTML content shown in the component.web-view. The state of the component is used to reference the raw HTML used in the component.

Document jig with print action

Print from a document jig
Print from a document jig

This example demonstrates configuring action.print to display a button for printing raw HTML content from a jig.document type.

Print action in a jig header

Print from the header
Print from the header

This example demonstrates configuring action.print in the jig.header. A print icon is used to trigger the action. The raw HTML content is configured in the action.print.

Previousopen-urlNextreset-state

Last updated

Was this helpful?