Customise the Printable Pick List with GraphQL
How-to Guide
Author:
Randy Chan
Changed on:
22 Jan 2025
Key Points
- This feature gives the client greater flexibility in customising the pick list by extracting values via GraphQL.
- The feature is not limited to a pick list but can be used on any entity as long as the data can be extracted by GraphQL.
- This feature utilises the new print component
Steps
Content
This example is updating a fluent STORE pick list by using graphQL.
Here are the steps:
- Form the GraphQL query and add it to the manifest page query
- Configure the print download in the manifest
- Add internationalisation values to the LANGUAGE_EN-AU setting
- Create a new setting to store the new HTML template
- Test the change
Form the GraphQL query and add it to the manifest page query
Test out the query in Postman and ensure the query is valid:
1{ waveById(id: 5002857) { id ref status
2items{ edges{ node{ product{name ref ... on VariantProduct{gtin} attributes{ name type value } } quantity } } }
3 location { id ref } fulfilments { edges { node { id ref status attributes{name value type} fromAddress { id ref } toAddress { id ref } items { edges { node { ref rejectedQuantity requestedQuantity filledQuantity orderItem{product{... on VariantProduct{gtin Product:product{ ... on StandardProduct{ __typename ref attributes{ name value } } }}}} } } } order { id ref type status attributes{name value type} fulfilmentChoice { deliveryType } customer { firstName lastName primaryEmail primaryPhone } } articles { edges { node { ref consignmentArticles(first: 1) { edges { node { consignment { id ref carrier { name } trackingLabel status updatedOn } } } } } } } } } } }}Language: json
Name: waveById sample
Description:
[Warning: empty required content area]Add the query to Page Manifest. In this example, we are adding it to
`fc.mystique.manifest.store.fragment.waves `
Configure the print download in the manifest
In this example, we will add it to Pick Screen.
1{
2 "component": "fc.button.print",
3 "props": {
4 "label": "i18n:fc.sf.ui.waves.wizard.pick.customisePicklist",
5 "setting": "fc.store.print.picklist2",
6 "behavior": "preview"
7 }
8}Language: json
Name: fc.button.print example
Description:
note that the value of "data" is the query identifier in the page manifest.
Add internationalisation values to the LANGUAGE_EN-AU setting
In this example, we will be adding to the LANGUAGE_EN-AU setting:
` "fc.sf.ui.waves.wizard.pick.customisePicklist":"Customise Pick List",`Create a new setting to store the new HTML template
Create a new setting:
Name: fc.store.print.picklist2
Context: ACCOUNT (can be RETAILER)
Context ID: 0 (can be RetailerID)
Value Type: LOB
Value:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Click & Collect</title>
7 <style type="text/css">
8 * {
9 margin: 0;
10 padding: 0;
11 text-indent: 0;
12 }
13 body {
14 padding: 41px 44px 41px 44px;
15 font-family: "Lato", sans-serif;
16 }
17 hr {
18 border-top: 1px solid black;
19 }
20 h1 {
21 font-size: 42px;
22 line-height: 50.4px;
23 margin-bottom: 36px;
24 }
25 h2 {
26 font-size: 20px;
27 font-weight: 700;
28 line-height: 24px;
29 margin-top: 24px;
30 margin-bottom: 24px;
31 }
32 span.deliver-to {
33 display: block;
34 font-size: 16px;
35 line-height: 19.2px;
36 margin-bottom: 16px;
37 }
38 span.deliver-to:last-of-type {
39 margin-bottom: 24px;
40 }
41
42 table {
43 width: 100%;
44 border-collapse: collapse;
45 text-align: left;
46 margin-top: 24px;
47 margin-bottom: 24px;
48 }
49 th {
50 font-size: 16px;
51 font-weight: 700;
52 line-height: 26px;
53 padding-bottom: 16px;
54 }
55 td {
56 padding-bottom: 8px;
57 }
58 .article-ref {
59 font-size: 16px;
60 line-height: 26px;
61 text-align: center;
62 margin-bottom: 4px;
63 }
64 .barcode-ref {
65 text-align: center;
66 margin-bottom: -30px;
67 }
68 .barcode-ref-title {
69 font-weight: 700;
70 }
71 .article-ref > span:first-of-type {
72 font-weight: 700;
73 }
74.barcode svg {
75 max-height: 110px
76}
77
78 .page-break {
79 display: block;
80 page-break-before: always;
81 }
82 .barcodek:last-child {
83 page-break-after: auto;
84 }
85 th {
86 padding-right: 10px;
87 }
88 .nowrap {
89 white-space: nowrap;
90 }
91 th,
92 td {
93 padding-right: 10px;
94 }
95 td {
96 vertical-align: top;
97 }
98 @media print {
99 #pagebreak {
100 float: none;
101 break-after: page;
102 }
103 }
104
105 .CustomLabel .items th {
106 padding: 0 3px 2px 3px;
107 text-align: left;
108 vertical-align: bottom;
109 }
110
111 .CustomLabel .items td {
112 padding: 5px 4px;
113 font-size: 12px;
114 width: 32px;
115 }
116
117 .CustomLabel .items div.qty {
118 text-align: center;
119 border-radius: 50%;
120 font-size: 16px;
121 font-weight: bold;
122 border: 1px solid black;
123 width: 26px;
124 height: 26px;
125 line-height: 24px;
126 }
127
128 .CustomLabel .items div.qty.qty-1 {
129 text-align: center;
130 font-size: 16px;
131 padding: 0;
132 font-size: inherit;
133 font-weight: normal;
134 border: 0;
135 }
136
137 .CustomLabel .items td.product-image {
138 width: 80px
139 }
140
141 .CustomLabel .items div.product-barcode {
142 font-family: 'Libre Barcode 20 Text', cursive;
143 font-size: 20px;
144 }
145
146 .CustomLabel .items div.soh {
147 text-align: center;
148 border-radius: 50%;
149 font-size: 13px;
150 font-weight: bold;
151 border: 1px solid black;
152 width: 30px;
153 height: 30px;
154 line-height: 27px;
155 }
156 </style>
157 </head>
158 <body>
159<div style="font-size:16px; padding:10px; text-align:end">{{dateStringFormatter (dateAdd)}}</div>
160<div style="text-align:center; font-size:20px; font-weight:bold">Pick List - Wave: {{waveById.id}}</div>
161<div style="margin-top:50px">
162 {{#each waveById.items.edges}}
163 <table class="items">
164 <tr style="font-size:15px">
165 <th>Qty</th>
166 <th>Size</th>
167 <th>Description</th>
168 <th>Item Code</th>
169 <th>Image</th>
170 <th>Barcode</th>
171 </tr>
172 <tr style="border-top: 1px solid silver">
173 <td>
174 <div class="qty qty- {{node.quantity}} ">{{node.quantity}} </div>
175 </td>
176 <td>{{node.product.attributes.byName.size}}</td>
177 <td>{{node.product.name}}</td>
178 <td>{{node.product.ref}}</td>
179 <td>
180 <img width="80" height="80" src="{{node.product.attributes.byName.imageUrl}}">
181 </td>
182 <td>
183 <div class="barcode">{{{barcode node.product.gtin null true}}}</div>
184 </td>
185 </tr>
186 </table>
187 {{/each}}
188</div>
189
190 </body>
191</html>Language: html
Name: HTML template lob value
Description:
HTML template which get values from "data" query
Test the change
