Actions
10min
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
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 icon to display when the action is configured as the secondary button or in a header action. |
isHidden | false hides the action button, true shows the action button. Default setting is true. |
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. |
- The action.print requires raw HTML. This can be configured in the action, in an expression, or in JavaScript.
Print HTML
This example demonstrates configuring action.print to display a button for printing HTML content.
action-print-basic.jigx
1title: Welcome
2description: Provide you details
3type: jig.default
4
5header:
6 type: component.jig-header
7 options:
8 height: small
9 children:
10 type: component.image
11 options:
12 source:
13 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
14
15children:
16 - type: component.section
17 options:
18 title: Details
19 children:
20 - type: component.form
21 instanceId: inputValues
22 options:
23 children:
24 - type: component.text-field
25 instanceId: firstName
26 options:
27 initialValue: John Smith
28 label: First name
29 isRequired: false
30 - type: component.email-field
31 instanceId: email
32 options:
33 initialValue: john.smith@global.com
34 label: Email address
35 - type: component.number-field
36 instanceId: phoneNumber
37 options:
38 initialValue: 23445634556
39 label: Mobile number
40
41actions:
42 - children:
43 # Add the print action.
44 - type: action.print
45 options:
46 # Give the action button a title.
47 title: Print Form
48 # Provide the HTML content to be printed.
49 html:
50 <html>
51 <body>
52 <header>
53 <h1>Global Inc Portal</h1>
54 <p>Your mobile hub for work on the go</p>
55 </header>
56 <main>
57 <div class="container">
58 <div class="card">
59 <h2>Welcome, Global Worker!</h2>
60 <p>This portal is designed just for you—the modern worker who needs access to resources and updates anytime, anywhere.</p>
61 <a href="https://jigx.com/" class="cta-button">Learn More</a>
62 </div>
63 <div class="card" id="features">
64 <h2>Features</h2>
65 <ul>
66 <li>Real-time schedule updates</li>
67 <li>Access to company resources on the go</li>
68 <li>Easy team communication</li>
69 <li>Mobile-friendly tools and dashboards</li>
70 </ul>
71 </div>
72 <div class="card">
73 <h2>Get Started</h2>
74 <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>
75 </div>
76 </div>
77 </main>
78 <footer>
79 <p>© 2025 Global Worker Portal. All rights reserved.</p>
80 </footer>
81 </body>
82 </html>
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.
action-print-web-view.jigx
1title: Jigx Frontline
2type: jig.default
3
4children:
5 - type: component.web-view
6 instanceId: demo
7 options:
8 height: 1000
9 content: |
10 <!DOCTYPE html>
11 <html lang="en">
12 <head>
13 <meta charset="UTF-8">
14 <meta name="viewport" content="width=device-width, initial-scale=1.0">
15 <title>Mobile App Company</title>
16 <style>
17 * {
18 margin: 0;
19 padding: 0;
20 box-sizing: border-box;
21 font-family: 'Arial', sans-serif;
22 }
23 body {
24 background: linear-gradient(135deg, #001a33, #66b3ff, #99ccff, #cce6ff);
25 color: #fff;
26 text-align: center;
27 }
28 .container {
29 padding: 50px 20px;
30 }
31 .logo {
32 font-size: 2.5em;
33 font-weight: bold;
34 background: linear-gradient(45deg, #ff6a00, #ffa366);
35 -webkit-background-clip: text;
36 -webkit-text-fill-color: transparent;
37 }
38 .hero {
39 margin-top: 20px;
40 font-size: 1.5em;
41 }
42 .features {
43 display: flex;
44 justify-content: center;
45 flex-wrap: wrap;
46 margin-top: 30px;
47 }
48 .feature-box {
49 background: rgba(255, 255, 255, 0.2);
50 backdrop-filter: blur(10px);
51 padding: 20px;
52 border-radius: 12px;
53 margin: 10px;
54 width: 250px;
55 transition: transform 0.3s ease-in-out;
56 }
57 .feature-box:hover {
58 transform: translateY(-5px);
59 }
60 .cta-button {
61 display: inline-block;
62 background: #ff6a00;
63 color: #fff;
64 padding: 12px 24px;
65 margin-top: 20px;
66 text-decoration: none;
67 font-weight: bold;
68 border-radius: 8px;
69 transition: background 0.3s;
70 }
71 .cta-button:hover {
72 background: #ee0979;
73 }
74 </style>
75 </head>
76 <body>
77
78 <div class="container">
79 <div class="logo">Frontline</div>
80 <p class="hero">Innovative Mobile Solutions for a Connected World</p>
81
82 <div class="features">
83 <div class="feature-box">
84 <h3>🚀 Fast Performance</h3>
85 <p>Optimized for speed and efficiency.</p>
86 </div>
87 <div class="feature-box">
88 <h3>🎨 Stunning UI</h3>
89 <p>Beautiful and user-friendly interfaces.</p>
90 </div>
91 <div class="feature-box">
92 <h3>🔒 Secure</h3>
93 <p>Built with industry-leading security standards.</p>
94 </div>
95 </div>
96
97 <a href="https://jigx.com/" class="cta-button">Get Started</a>
98 </div>
99 </body>
100 </html>
101# Add the print action that uses the raw HTML from the web-view component,
102# by referencing the state of the component.
103actions:
104 - children:
105 - type: action.print
106 options:
107 title: Print demo form
108 html: =@ctx.components.demo.state.content
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.
action.print-document-jig.jigx
1title: HTML Document Type (Content)
2type: jig.document
3# Display an HTML page as the document in the jig.
4source:
5 documentType: HTML
6 # Add the raw HTML to the content property.
7 content: |
8 <!DOCTYPE html>
9 <html lang="en">
10 <head>
11 <meta charset="UTF-8">
12 <meta name="viewport" content="width=device-width, initial-scale=1.0">
13 <title>Invoice</title>
14 <style>
15 body {
16 font-family: 'Arial', sans-serif;
17 margin: 0;
18 padding: 20px;
19 background-color: #f6f6f6;
20 }
21 .invoice-box {
22 max-width: 800px;
23 margin: auto;
24 padding: 30px;
25 border: 1px solid #eee;
26 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
27 background-color: #fff;
28 color: #555;
29 }
30 .invoice-box table {
31 width: 100%;
32 line-height: 1.6;
33 text-align: left;
34 border-collapse: collapse;
35 }
36 .invoice-box table td {
37 padding: 5px;
38 vertical-align: top;
39 }
40 .invoice-box table tr td:nth-child(2) {
41 text-align: right;
42 }
43 .invoice-box table tr.top table td {
44 padding-bottom: 20px;
45 }
46 .invoice-box table tr.information table td {
47 padding-bottom: 40px;
48 }
49 .invoice-box table tr.heading td {
50 background: #eee;
51 border-bottom: 1px solid #ddd;
52 font-weight: bold;
53 }
54 .invoice-box table tr.details td {
55 padding-bottom: 20px;
56 }
57 .invoice-box table tr.item td {
58 border-bottom: 1px solid #eee;
59 }
60 .invoice-box table tr.item.last td {
61 border-bottom: none;
62 }
63 .invoice-box table tr.total td:nth-child(2) {
64 border-top: 2px solid #eee;
65 font-weight: bold;
66 }
67 h2, h3 {
68 margin: 0;
69 }
70 </style>
71 </head>
72 <body>
73 <div class="invoice-box">
74 <table cellpadding="0" cellspacing="0">
75 <!-- Invoice Header -->
76 <tr class="top">
77 <td colspan="2">
78 <table>
79 <tr>
80 <td class="title">
81 <h2>Company Name</h2>
82 </td>
83 <td>
84 Invoice #: 12345<br>
85 Created: January 1, 2025<br>
86 Due: January 31, 2025
87 </td>
88 </tr>
89 </table>
90 </td>
91 </tr>
92 <!-- Company & Customer Information -->
93 <tr class="information">
94 <td colspan="2">
95 <table>
96 <tr>
97 <td>
98 Company Name, Inc.<br>
99 12345 Street Address<br>
100 City, State, Zip
101 </td>
102 <td>
103 Customer Name<br>
104 Customer Company<br>
105 67890 Customer Address
106 </td>
107 </tr>
108 </table>
109 </td>
110 </tr>
111 <!-- Payment Method Details -->
112 <tr class="heading">
113 <td>Payment Method</td>
114 <td>Check #</td>
115 </tr>
116 <tr class="details">
117 <td>Check</td>
118 <td>1001</td>
119 </tr>
120 <!-- Itemized List of Services/Products -->
121 <tr class="heading">
122 <td>Item</td>
123 <td>Price</td>
124 </tr>
125 <tr class="item">
126 <td>Website Design</td>
127 <td>$300.00</td>
128 </tr>
129 <tr class="item">
130 <td>Hosting (3 months)</td>
131 <td>$75.00</td>
132 </tr>
133 <tr class="item last">
134 <td>Domain Registration (1 year)</td>
135 <td>$10.00</td>
136 </tr>
137 <!-- Total -->
138 <tr class="total">
139 <td></td>
140 <td>Total: $385.00</td>
141 </tr>
142 </table>
143 </div>
144 </body>
145 </html>
146
147actions:
148 - children:
149 # Add an action button to print the document
150 - type: action.print
151 options:
152 title: Print
153 # Add the same raw HTML as provided in the content property above.
154 html: |
155 <!DOCTYPE html>
156 <html lang="en">
157 <head>
158 <meta charset="UTF-8">
159 <meta name="viewport" content="width=device-width, initial-scale=1.0">
160 <title>Invoice</title>
161 <style>
162 body {
163 font-family: 'Arial', sans-serif;
164 margin: 0;
165 padding: 20px;
166 background-color: #f6f6f6;
167 }
168 .invoice-box {
169 max-width: 800px;
170 margin: auto;
171 padding: 30px;
172 border: 1px solid #eee;
173 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
174 background-color: #fff;
175 color: #555;
176 }
177 .invoice-box table {
178 width: 100%;
179 line-height: 1.6;
180 text-align: left;
181 border-collapse: collapse;
182 }
183 .invoice-box table td {
184 padding: 5px;
185 vertical-align: top;
186 }
187 .invoice-box table tr td:nth-child(2) {
188 text-align: right;
189 }
190 .invoice-box table tr.top table td {
191 padding-bottom: 20px;
192 }
193 .invoice-box table tr.information table td {
194 padding-bottom: 40px;
195 }
196 .invoice-box table tr.heading td {
197 background: #eee;
198 border-bottom: 1px solid #ddd;
199 font-weight: bold;
200 }
201 .invoice-box table tr.details td {
202 padding-bottom: 20px;
203 }
204 .invoice-box table tr.item td {
205 border-bottom: 1px solid #eee;
206 }
207 .invoice-box table tr.item.last td {
208 border-bottom: none;
209 }
210 .invoice-box table tr.total td:nth-child(2) {
211 border-top: 2px solid #eee;
212 font-weight: bold;
213 }
214 h2, h3 {
215 margin: 0;
216 }
217 </style>
218 </head>
219 <body>
220 <div class="invoice-box">
221 <table cellpadding="0" cellspacing="0">
222 <!-- Invoice Header -->
223 <tr class="top">
224 <td colspan="2">
225 <table>
226 <tr>
227 <td class="title">
228 <h2>Company Name</h2>
229 </td>
230 <td>
231 Invoice #: 12345<br>
232 Created: January 1, 2025<br>
233 Due: January 31, 2025
234 </td>
235 </tr>
236 </table>
237 </td>
238 </tr>
239 <!-- Company & Customer Information -->
240 <tr class="information">
241 <td colspan="2">
242 <table>
243 <tr>
244 <td>
245 Company Name, Inc.<br>
246 12345 Street Address<br>
247 City, State, Zip
248 </td>
249 <td>
250 Customer Name<br>
251 Customer Company<br>
252 67890 Customer Address
253 </td>
254 </tr>
255 </table>
256 </td>
257 </tr>
258 <!-- Payment Method Details -->
259 <tr class="heading">
260 <td>Payment Method</td>
261 <td>Check #</td>
262 </tr>
263 <tr class="details">
264 <td>Check</td>
265 <td>1001</td>
266 </tr>
267 <!-- Itemized List of Services/Products -->
268 <tr class="heading">
269 <td>Item</td>
270 <td>Price</td>
271 </tr>
272 <tr class="item">
273 <td>Website Design</td>
274 <td>$300.00</td>
275 </tr>
276 <tr class="item">
277 <td>Hosting (3 months)</td>
278 <td>$75.00</td>
279 </tr>
280 <tr class="item last">
281 <td>Domain Registration (1 year)</td>
282 <td>$10.00</td>
283 </tr>
284 <!-- Total -->
285 <tr class="total">
286 <td></td>
287 <td>Total: $385.00</td>
288 </tr>
289 </table>
290 </div>
291 </body>
292 </html>
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.
action.print-jig-header.jigx
datasource (static)
1title: Company Event Details
2type: jig.default
3
4header:
5 type: component.jig-header
6 options:
7 height: medium
8 children:
9 type: component.image
10 options:
11 source:
12 uri: https://images.unsplash.com/photo-1531736275454-adc48d079ce9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGxpZ2h0JTIwY29sb3IlMjBiYWNrZ3JvdW5kfGVufDB8fDB8fHww
13 # Add the print action in the header, this displays at the top right of the screen.
14 # Add a print icon to the action rather than a link.
15 actions:
16 - type: action.print
17 options:
18 icon: printer-computers
19 style:
20 isSecondary: true
21 title: Print Event
22 # Configure the raw HTML to print when the action is triggered.
23 html: |
24 <!DOCTYPE html>
25 <html lang="en">
26 <head>
27 <meta charset="UTF-8">
28 <meta name="viewport" content="width=device-width, initial-scale=1.0">
29 <title>Community Event</title>
30 <style>
31 body {
32 font-family: Arial, sans-serif;
33 margin: 0;
34 padding: 0;
35 background-color: #f4f4f4;
36 text-align: center;
37 }
38 .container {
39 width: 80%;
40 margin: 20px auto;
41 background: white;
42 padding: 20px;
43 border-radius: 10px;
44 box-shadow: 0 0 10px rgba(0,0,0,0.1);
45 }
46 h1 {
47 color: #333;
48 }
49 .event-details {
50 margin: 20px 0;
51 }
52 .cta {
53 display: inline-block;
54 padding: 10px 20px;
55 background: #28a745;
56 color: white;
57 text-decoration: none;
58 border-radius: 5px;
59 font-size: 18px;
60 }
61 </style>
62 </head>
63 <body>
64 <div class="container">
65 <h1>Join Us for the Community Gathering!</h1>
66 <p class="event-details">📅 Date: Saturday, March 23, 2025<br>
67 ⏰ Time: 2:00 PM - 6:00 PM<br>
68 📍 Location: Central Park, Main Pavilion</p>
69 <p>Come together with your neighbors for a day of fun, food, and community spirit. Enjoy live music, games, and delicious local food.</p>
70 <a href="#" class="cta">RSVP Now</a>
71 </div>
72 </body>
73 </html>
74
75children:
76 - type: component.form
77 instanceId: company-event
78 options:
79 isDiscardChangesAlertEnabled: false
80 children:
81 - type: component.text-field
82 instanceId: event-label
83 options:
84 label: |
85 Join Us for the Company Gathering! Saturday, March 23, 2025
86 Time 2:00 PM - 6:00 PM
87 Location Central Park, Main Pavilion
88 Come together with your family for a day of fun, food, and good spirit. Enjoy live music, games, and delicious local food.
89 - type: component.choice-field
90 instanceId: event
91 options:
92 itemsPerRow: 3
93 label: Select the activity
94 data: =@ctx.datasources.community-event
95 item:
96 type: component.choice-field-item
97 options:
98 title: =@ctx.current.item.option
99 value: =@ctx.current.item.option
100
