Customise the Printable Pick List with GraphQL

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

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 } } } } } } } } } } }}

Add the query to Page Manifest. In this example, we are adding it to `fc.mystique.manifest.store.fragment.waves ` No alt provided

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}

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.picklist2Context: ACCOUNT (can be RETAILER)Context ID: 0 (can be RetailerID)Value Type: LOBValue:

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>

Test the change

Related content

Randy Chan

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>

Customise the Printable Pick List with GraphQL

Key Points

Steps

Content

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

Related content

Download Print Button

Customise the Printable Pick List Setting

Migrate to the New Print Component

Randy Chan

Building Blocks

By Type

Helpful Resources

Quick Links