Storing HTTP links on Entities with Attributes (Admin Console)
How-to Guide
Author:
Holger Lierse
Changed on:
3 Oct 2024
Key Points
- This guide is about displaying HTTP(S) links in Admin Console.
- This can be achieved through a Mystique configuration.
- Store a HTTP(S) link to a document e.g. packing slip as an attribute against an entity.
- Display the attribute as a clickable link in the Admin Console.
Steps
Open Mystique config
Identify the area in your Mystique config where you want to add an HTTP link where the link is sourced from an attribute
Add your Mystique Configuration
Add the mystique configuration, for example:
1{
2 "label": "Printing Slip",
3 "dataSource":"attributes",
4 "template": "{{value}}",
5 "link_template": "{{value}}",
6 "filterFirst": {
7 "name":"printing_slip",
8 "type":"STRING"
9 }
10}Language: json
Name: Mystique Config
Description:
[Warning: empty required content area]GraphQL query to extract the attributes
Adapt the GraphQL query to extract the attributes, for example
1query ($id: ID!) {
2 orderById(id: $id) {
3 id
4 ref
5 status
6 type
7...
8 attributes {
9 name
10 type
11 value
12 }
13...
14 }
15}Language: graphqlschema
Name: Sample code
Description:
[Warning: empty required content area]Update Admin Console Manifest
Add the corresponding attribute to the entity and reload Admin Console. The attribute link will show as per the below screenshot (example):
Full Sample of the order summary sage with clickable attributes:
1{
2 "path": "orders/:id",
3 "component": "shared.components.material.DynamicPage",
4 "menuIcon": "shopping_cart",
5 "params": {
6 "title": "{{orderById.ref}} - {{orderById.status}}",
7 "showUserActions": true,
8 "backButtons": [
9 {
10 "path": "orders",
11 "menuLabel": "i18n:fc.om.orders.detail.breadcrumb.backToOrders"
12 },
13 {
14 "path": "customers/{{orderById.customer.id}}",
15 "menuLabel": "i18n:fc.om.orders.detail.breadcrumb.viewCustomer"
16 }
17 ],
18 "graphql": {
19 "query": "query ($id: ID!) { orderById(id: $id) { id ref status type createdOn retailer{id tradingName} ...Customer ...Items ...fulfilments ...fulfilmentChoice ...financialTransactions attributes { name type value } } comments(entityId: [$id], entityType: \"ORDER\"){ edges {node {id text entityId entityType, text, createdOn, updatedOn }}} } ",
20 "variables": {
21 "id": "{{params.id}}"
22 }
23 },
24 "primaryButtons": [
25 {
26 "label": "i18n:fc.om.orders.detail.userAction.editOrder",
27 "mutation": "updateOrder",
28 "arguments": {
29 "id": "{{id}}"
30 }
31 }
32 ],
33 "secondaryButtons": [
34 {
35 "label": "i18n:fc.om.orders.detail.userAction.addFulfilment",
36 "mutation": "createFulfilment"
37 },
38 {
39 "label": "i18n:fc.om.orders.detail.userAction.addComment",
40 "mutation": "createComment",
41 "defaultValues": {
42 "entityId": "{{orderById.id}}",
43 "entityType": "ORDER"
44 }
45 }
46 ],
47 "layouts": [
48 {
49 "component": "shared.components.material.MaterialTabsSet",
50 "params": {
51 "layouts": [
52 {
53 "component": "shared.components.material.SubLayoutContent",
54 "label": "i18n:fc.om.orders.detail.tab.details.label",
55 "params": {
56 "layouts": [
57 {
58 "component": "shared.components.material.DynamicCard",
59 "params": {
60 "title": "i18n:fc.om.orders.detail.card.summary.title",
61 "half": true,
62 "dataSource": "orderById",
63 "attributes": [
64 {
65 "label": "i18n:fc.om.orders.detail.card.summary.attribute.orderType.label",
66 "template": "{{type}}"
67 },
68 {
69 "label": "i18n:fc.om.orders.detail.card.summary.attribute.orderStatus.label",
70 "template": "{{status}}"
71 },
72 {
73 "label": "i18n:fc.om.orders.detail.card.summary.attribute.creationDate.label",
74 "template": "{{formatDate createdOn day='numeric' month='numeric' year='numeric'}}"
75 },
76 {
77 "label": "i18n:fc.om.orders.detail.card.summary.attribute.returns.label",
78 "template": "Search for Returns",
79 "link_template": "#/returns?ref[]={{ref}}-"
80 },
81 {
82 "label": "Printing Slip",
83 "dataSource":"attributes",
84 "template": "{{value}}",
85 "link_template": "{{value}}",
86 "filterFirst":
87 {"name":"printing_slip", "type":"STRING"}
88 },
89 {
90 "label": "Delivery Slip",
91 "dataSource":"attributes",
92 "template": "{{value}}",
93 "link_template": "{{value}}",
94 "filterFirst":
95 {"name":"delivery_slip", "type":"STRING"}
96 }
97 ]
98 }
99 },
100 {
101 "component": "shared.components.material.DynamicCard",
102 "params": {
103 "title": "i18n:fc.om.orders.detail.card.retailerInfo.title",
104 "half": true,
105 "dataSource": "orderById",
106 "attributes": [
107 {
108 "label": "i18n:fc.om.orders.detail.card.retailerInfo.attribute.retailerID.label",
109 "template": "{{retailer.id}}"
110 },
111 {
112 "label": "i18n:fc.om.orders.detail.card.retailerInfo.attribute.retailer.label",
113 "template": "{{retailer.tradingName}}"
114 }
115 ]
116 }
117 },
118 {
119 "component": "shared.components.material.DynamicCard",
120 "params": {
121 "graphql": {
122 "fragment": "fragment Customer on Order{ customer { id firstName lastName primaryEmail primaryPhone } } "
123 },
124 "title": "i18n:fc.om.orders.detail.card.customer.title",
125 "half": true,
126 "dataSource": "orderById.customer",
127 "attributes": [
128 {
129 "label": "i18n:fc.om.orders.detail.card.customer.attribute.customerName.label",
130 "template": "{{firstName}} {{lastName}}",
131 "link_template": "#/customers/{{id}}"
132 },
133 {
134 "label": "i18n:fc.om.orders.detail.card.customer.attribute.phoneNo..label",
135 "template": "{{primaryPhone}}"
136 },
137 {
138 "label": "i18n:fc.om.orders.detail.card.customer.attribute.email.label",
139 "template": "{{primaryEmail}}"
140 }
141 ]
142 }
143 },
144 {
145 "component": "shared.components.material.DynamicCard",
146 "params": {
147 "graphql": {
148 "fragment": "fragment fulfilmentChoice on Order{ fulfilmentChoice { id pickupLocationRef deliveryAddress {id name street city state postcode country} deliveryInstruction deliveryType } } "
149 },
150 "title": "i18n:fc.om.orders.detail.card.deliveryInfo.title",
151 "half": true,
152 "dataSource": "orderById.fulfilmentChoice",
153 "attributes": [
154 {
155 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.pickupLocationRef.label",
156 "template": "{{pickupLocationRef}}"
157 },
158 {
159 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.customerName.label",
160 "template": "{{deliveryAddress.name}}"
161 },
162 {
163 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.street.label",
164 "template": "{{deliveryAddress.street}}"
165 },
166 {
167 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.city.label",
168 "template": "{{deliveryAddress.city}}"
169 },
170 {
171 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.state.label",
172 "template": "{{deliveryAddress.state}}"
173 },
174 {
175 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.postcode.label",
176 "template": "{{deliveryAddress.postcode}}"
177 },
178 {
179 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.country.label",
180 "template": "{{deliveryAddress.country}}"
181 },
182 {
183 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.deliveryType.label",
184 "template": "{{deliveryType}}"
185 },
186 {
187 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.deliveryInstructions.label",
188 "template": "{{deliveryInstruction}}"
189 }
190 ]
191 }
192 },
193 {
194 "component": "shared.components.material.DynamicList",
195 "params": {
196 "title": "i18n:fc.om.orders.detail.list.orderItems.title",
197 "graphql": {
198 "fragment": "fragment Items on Order{ items{ edges { node { id ref price quantity product {name} } } } } "
199 },
200 "defaultPageSize": 10,
201 "dataSource": "orderById.items",
202 "attributes": [
203 {
204 "label": "i18n:fc.om.orders.detail.list.orderItems.column.ref.heading",
205 "template": "{{node.ref}}",
206 "link_template": "#/orderitems/{{node.id}}"
207 },
208 {
209 "label": "i18n:fc.om.orders.detail.list.orderItems.column.productName.heading",
210 "template": "{{node.product.name}}"
211 },
212 {
213 "label": "i18n:fc.om.orders.detail.list.orderItems.column.quantity.heading",
214 "template": "{{node.quantity}}"
215 },
216 {
217 "label": "i18n:fc.om.orders.detail.list.orderItems.column.price.heading",
218 "template": "{{node.price}}"
219 }
220 ]
221 }
222 }
223 ]
224 }
225 },
226 {
227 "component": "shared.components.material.SubLayoutContent",
228 "label": "i18n:fc.om.orders.detail.tab.fulfilments.label",
229 "params": {
230 "layouts": [
231 {
232 "component": "shared.components.material.DynamicList",
233 "params": {
234 "graphql": {
235 "fragment": "fragment fulfilments on Order{ fulfilments { edges { node { id deliveryType status eta fromAddress { companyName } toAddress { companyName name } }} } } "
236 },
237 "title": "i18n:fc.om.orders.detail.list.fulfilments.title",
238 "dataSource": "orderById.fulfilments",
239 "attributes": [
240 {
241 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.id.heading",
242 "template": "{{node.id}}",
243 "link_template": "#/fulfilment/{{node.id}}"
244 },
245 {
246 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.status.heading",
247 "template": "{{node.status}}"
248 },
249 {
250 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.deliveryType.heading",
251 "template": "{{node.deliveryType}}"
252 },
253 {
254 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.fulfilmentLocation.heading",
255 "template": "{{node.fromAddress.companyName}}"
256 },
257 {
258 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.destination.heading",
259 "template": "{{node.toAddress.companyName}} {{node.toAddress.name}}"
260 },
261 {
262 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.eTA.heading",
263 "template": "{{node.eta}}"
264 }
265 ]
266 }
267 }
268 ]
269 }
270 },
271 {
272 "component": "shared.components.material.SubLayoutContent",
273 "label": "i18n:fc.om.orders.detail.tab.transactions.label",
274 "params": {
275 "layouts": [
276 {
277 "component": "shared.components.material.DynamicList",
278 "params": {
279 "graphql": {
280 "fragment": "fragment financialTransactions on Order{ financialTransactions { edges { node {ref createdOn status type cardType paymentMethod total }} } } "
281 },
282 "title": "i18n:fc.om.orders.detail.list.transactions.title",
283 "dataSource": "orderById.financialTransactions",
284 "attributes": [
285 {
286 "label": "i18n:fc.om.orders.detail.list.transactions.column.ref.heading",
287 "template": "{{node.ref}}"
288 },
289 {
290 "label": "i18n:fc.om.orders.detail.list.transactions.column.createdOn.heading",
291 "template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric'}}"
292 },
293 {
294 "label": "i18n:fc.om.orders.detail.list.transactions.column.status.heading",
295 "template": "{{node.status}}"
296 },
297 {
298 "label": "i18n:fc.om.orders.detail.list.transactions.column.type.heading",
299 "template": "{{node.type}}"
300 },
301 {
302 "label": "i18n:fc.om.orders.detail.list.transactions.column.cardType.heading",
303 "template": "{{node.cardType}}"
304 },
305 {
306 "label": "i18n:fc.om.orders.detail.list.transactions.column.paymentMethod.heading",
307 "template": "{{node.paymentMethod}}"
308 },
309 {
310 "label": "i18n:fc.om.orders.detail.list.transactions.column.amount.heading",
311 "template": "{{node.total}}"
312 }
313 ]
314 }
315 }
316 ]
317 }
318 },
319 {
320 "component": "shared.components.material.SubLayoutContent",
321 "label": "i18n:fc.om.orders.detail.tab.attributes.label",
322 "params": {
323 "layouts": [
324 {
325 "component": "shared.components.material.DynamicList",
326 "params": {
327 "title": "i18n:fc.om.orders.detail.list.attributes.title",
328 "dataSource": "orderById.attributes",
329 "attributes": [
330 {
331 "label": "i18n:fc.om.orders.detail.list.attributes.column.name.heading",
332 "template": "{{name}}"
333 },
334 {
335 "label": "i18n:fc.om.orders.detail.list.attributes.column.type.heading",
336 "template": "{{type}}"
337 },
338 {
339 "label": "i18n:fc.om.orders.detail.list.attributes.column.value.heading",
340 "template": "{{value}}",
341 "link_template": "{{value}}"
342 }
343 ]
344 }
345 }
346 ]
347 }
348 },
349 {
350 "component": "shared.components.material.SubLayoutContent",
351 "label": "i18n:fc.om.orders.detail.tab.comments.label",
352 "params": {
353 "layouts": [
354 {
355 "component": "shared.components.material.DynamicList",
356 "params": {
357 "graphql": {
358 "fragment": "fragment financialTransactions on Order{ financialTransactions { edges { node {ref createdOn status type cardType paymentMethod total }} } } "
359 },
360 "title": "i18n:fc.om.orders.detail.list.comments.title",
361 "dataSource": "comments",
362 "attributes": [
363 {
364 "label": "i18n:fc.om.orders.detail.list.comments.column.comment.heading",
365 "template": "{{node.text}}"
366 },
367 {
368 "label": "i18n:fc.om.orders.detail.list.comments.column.createdOn.heading",
369 "template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric'}}"
370 },
371 {
372 "label": "i18n:fc.om.orders.detail.list.comments.column.updatedOn.heading",
373 "template": "{{formatDate node.updatedOn day='numeric' month='numeric' year='numeric'}}"
374 }
375 ]
376 }
377 }
378 ]
379 }
380 },
381 {
382 "component": "shared.components.material.SubLayoutContent",
383 "label": "i18n:fc.om.orders.detail.tab.activity.label",
384 "params": {
385 "layouts": [
386 {
387 "component": "shared.components.EntityActivity",
388 "params": {
389 "showChildEntities": true
390 }
391 }
392 ]
393 }
394 }
395 ]
396 }
397 }
398 ]
399 }
400}Language: json
Name: Full sample code
Description:
[Warning: empty required content area]
