Customise the Printable Pick List with GraphQL
How-to Guide
Author:
Randy Chan
Changed on:
17 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 "data": "waveById",
7 "behavior": "preview"
8 }
9}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<head>
2 <link rel="preconnect" href="https://fonts.googleapis.com">
3 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4 <link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap" rel="stylesheet">
5</head>
6<style>
7 @media print {
8 #pagebreak {
9 float: none;
10 break-after: page;
11 }
12 }
13
14 .CustomLabel .items th {
15 padding: 0 3px 2px 3px;
16 text-align: left;
17 vertical-align: bottom;
18 }
19
20 .CustomLabel .items td {
21 padding: 5px 4px;
22 font-size: 12px;
23 width: 32px;
24 }
25
26 .CustomLabel .items div.qty {
27 text-align: center;
28 border-radius: 50%;
29 font-size: 16px;
30 font-weight: bold;
31 border: 1px solid black;
32 width: 26px;
33 height: 26px;
34 line-height: 24px;
35 }
36
37 .CustomLabel .items div.qty.qty-1 {
38 text-align: center;
39 font-size: 16px;
40 padding: 0;
41 font-size: inherit;
42 font-weight: normal;
43 border: 0;
44 }
45
46 .CustomLabel .items td.product-image {
47 width: 80px
48 }
49
50 .CustomLabel .items div.product-barcode {
51 font-family: 'Libre Barcode 39 Text', cursive;
52 font-size: 40px;
53 }
54
55 .CustomLabel .items div.soh {
56 text-align: center;
57 border-radius: 50%;
58 font-size: 13px;
59 font-weight: bold;
60 border: 1px solid black;
61 width: 30px;
62 height: 30px;
63 line-height: 27px;
64 }
65</style>
66<div style="font-size:16px; padding:10px; text-align:end">{{dateStringFormatter (dateAdd)}}</div>
67<div style="text-align:center; font-size:20px; font-weight:bold">Pick List - Wave: {{waveById.id}}</div>
68<div style="margin-top:50px">
69 {{#each waveById.items.edges}}
70 <table class="items">
71 <tr style="font-size:15px">
72 <th>Qty</th>
73 <th>Size</th>
74 <th>Description</th>
75 <th>Item Code</th>
76 <th>Image</th>
77 <th>Barcode</th>
78 </tr>
79 <tr style="border-top: 1px solid silver">
80 <td>
81 <div class="qty qty- {{node.quantity}} ">{{node.quantity}} </div>
82 </td>
83 <td>{{node.product.attributes.byName.size}}</td>
84 <td>{{node.product.name}}</td>
85 <td>{{node.product.ref}}</td>
86 <td>
87 <img width="80" height="80" src="{{node.product.attributes.byName.imageUrl}}">
88 </td>
89 <td>
90 <div class="product-barcode">{{node.product.gtin}}</div>
91 </td>
92 </tr>
93 </table>
94</div>
95{{/each}}Language: html
Name: HTML template lob value
Description:
HTML template which get values from "data" query
Test the change
