Docs
Author:
Fluent Commerce
Changed on:
14 Sept 2023
Current behaviourIn the current OMS Webapps framework, when the user tries to print the current page using the browser, the Browser “Print” shows a blank page.
The was due to the content is dynamically generated from the OMS framework and ensure that data is in real time basis.
So In order to print the current page, the client can configure a custom print button configuration within the OMS.
Change in manifestAdd this code snippet into the fragment that shows the order list in ordermanagement setting:
1 {
2 "component": "fc.button.print.inline",
3 "props": {
4 "label": "Print Current Page",
5 "setting": "example.orders.print"
6 }
7 },Language: plain_text
Name: Code snippet in order management manifest
Description:
[Warning: empty required content area]
Create a new setting example.orders.print Next is to create a setting: example.orders.print via Postman.
Unfortunately, OMS currently validates that anything in the
`lobValue`1{{fluentApiHost}}/graphql
2
3mutation CreateSetting {
4createSetting(input: {
5 name: "example.orders.print",
6 valueType: "LOB",
7 lobValue: "<html>head><style>li:nth-child(2) { color:red; min-width:600px; }</style></head><body><ul class=\"people_list\"> {{#each orders.edges}} <li>{{node.customer.firstName}} {{node.customer.lastName}} [{{dateRelative node.createdOn}}]</li> {{/each}} </ul><table><tr><th>Order Ref</th><th>Customer</th><th>Order Type</th><th>Status</th><th>Order Value</th><th>Creation Date</th></tr>{{#each orders.edges}}<tr><td>{{node.ref}}</td><td>{{node.customer.firstName}} {{node.customer.lastName}}</td><td>{{node.type}}</td><td>{{node.status}}</td><td>{{node.total}}</td><td>{{node.createdOn}}</td></tr>{{/each}}</table></body></html>",
8 context: "ACCOUNT",
9 contextId: 0}
10
11 ) {
12 id
13 name
14 }
15}
16Language: plain_text
Name: CreateSetting mutation
Description:
[Warning: empty required content area]1{{fluentApiHost}}/graphql
2
3mutation{
4 updateSetting(input:{
5 name:"example.orders.print"
6 context:"ACCOUNT"
7 id:"634"
8 contextId:1
9 valueType:"LOB"
10 lobValue:"<html><head><style>li:nth-child(2) { color:red; min-width:600px; }</style></head><body><table border='1' width='100%'><tr><th>Order Ref</th><th>Customer</th><th>Order Type</th><th>Status</th><th>Creation Date</th></tr>{{#each orders.edges}}<tr><td>{{node.ref}}</td><td>{{node.customer.firstName}} {{node.customer.lastName}}</td><td>{{node.type}}</td><td>{{node.status}}</td><td>{{node.createdOn}}</td></tr>{{/each}}</table></body></html>"
11})
12{
13lobValue
14}
15}
16
17
18
19
20
21Language: plain_text
Name: updateSetting
Description:
[Warning: empty required content area]But beyond that, the value can be any sizes and use:
`#each``dateRelative`Then go to Webapps OMS, refresh the order list page and you will able to see the print current page button:
Save the result in PDFAfter saving the pdf, the user can view the data in pdf format:
The result is based on the list filter on the pageThe result can be filtered by the user-entered criteria on the list page. For example, below is showing a filter of type: HD and showing 10 records within the page.
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
