Author:
Fluent Commerce
Changed on:
12 Sept 2024
Some common types and conventions are used across many component definitions. These items are not directly configurable in the manifest but will often be referenced in other component definitions that use them.
There are many places where icons can be configured in the Mystique manifest, whether to represent the app itself, different routes, or within component configurations.
In most cases, the list of available icons comes from the React Icons library - specifically the Material Design and Font Awesome packages.
Many content-centric components are embedded in a card and will, therefore, share some common fields.
Name | Type | Required | Description |
| string | no | Title text of the card |
| MystiqueThemeColour / string (hex value) | no | Show a colored highlight above the card to denote status in cases like dashboard cards. |
| "quarter" / "third" / "half" / "two-thirds" / "full" / number (1-12) | no | Define the width of this card on a 12-column grid. You can use the named widths for readability or numbers directly. |
Many string values accepted by components are Template Strings. This means you can use a Mustache syntax to create dynamic values, mapping and transforming data from GraphQL or other sources into the UI.
As an example, configuring a card to display a customer's name might look something like:
`"{{order.customer.firstName}} {{order.customer.lastName}}"`
A selection of helper functions are also available to control and transform these values as required:
Name | Body | Description | Examples |
String functions | |||
| body: single string value | Convert a string to lowercase. |
|
| body: single string value | Convert a string to upper case. |
|
| body: single string value | Convert the first letter of a string to upper-case. |
|
| body: single JSON object | Convert a JSON object into a string representation. |
|
| body: two string values (Optional separator argument) | Concatenates two strings together using the specified separator. (Default separator = "") |
|
| body: two string values | Returns true if the first string appears in the second string. (Case Insensitive) |
|
Date functions | |||
(aka
| body:
| Format a date to the user's locale. |
|
| body: optional date object | Add or subtract an amount of time from a given date.
|
|
| body: date object | Convert a date object into a relative format, e.g. "10 minutes ago" |
|
| body: optional date object | Subtract an amount of time from a given date.
|
|
| body:
| Format a date based on user's browser language:
|
|
Array functions | |||
| body: | Total up values from within an array of objects. |
|
I18n functions | |||
| body: any number of strings that are joined together into an i18n key | Translate a value into another language. |
|
Logic Functions | |||
| body: two values that are equal | Compare two values, true if equivalent. |
|
| body: two values that are not equal | Compare two values, true if not equivalent. |
|
| body: two values to be compared | Compare two values, true if a is less than b |
|
| body: two values to be compared | Compare two values, true if a is more than b |
|
| body: two values to be compared | Compare two values, true if a is less or equal to b |
|
| body: two values to be compared | Compare two values, true if a is more than or equal to b |
|
| body: one or more values (expressions) | Compare two booleans, true if both are true.
|
|
| body: one or more values (expressions) | Compare two booleans;
In Java Script, strings, numbers, and objects are
|
|
| body: one or more values | This template returns the first valid value. Valid values are anything that isn't either
|
|
| The body consists of three values: the path, the function, and the value | anyMatch template is used for performing conditional checks on structured data (i.e lists, arrays), typically JSON. More examples can be found here |
|
Number Functions | |||
| number, currency, _locale (optional), _decimalPlaces (optional, default: 2) | Convert a number to currency format; this template uses the Intl.NumberFormat function with the 4 parameters described to the left |
|
| body: two values to be added, _decimalPlaces (optional, default: 2) | Adds two numbers together. |
|
| body: two values to be subtracted, _decimalPlaces (optional, default: 2) | Subtracts one number from another |
|
| body: two values to be multiplied, _decimalPlaces (optional, default: 2) | Multiplies two numbers together |
|
| body: two values to be divided, _decimalPlaces (optional, default: 2) | Divides one number from another |
|
| body: raise the first value to the power of the second, _decimalPlaces (optional, default: 2) | Raises one number to the power of the second |
|
| body: any number | This template calculates the step’s size by a set time period. Depending on the specified time period, the template returns different values:
|
|
Other | |||
barcode | body: two string values and one boolean (Optional format and displayText arguments) | Generate a barcode for a given string. 1.If the format is not specified, it will be detected automatically. Supported barcode formats:
2. The
|
|
In GraphQL, any entity attributes are returned as an array. This can make it difficult to configure a component to show a specific attribute.
To help with this, attribute arrays have a
`byName`
For example, if an Order has a custom attribute
`vipStatus`
`"{{order.attributes.byName.vipStatus}}"`
Some additional templates are available only when certain plugins are loaded.
Name | Body | Description | Examples | Plugin |
Array functions | ||||
| body: | Total up values from within an array of objects. Supports summation of elements with zero value. | datasource:
| OMS |
| array of objects | Get the max value from an array of objects | datasource:
| Inventory |
| object | Get total active feeds from a query on the Feeds Dashboard |
| Inventory |
Date functions | ||||
| date object | Convert a date object or date-formatted string into a relative format:
|
| Inventory |
| number | Convert milliseconds to date. |
| Inventory |
Number functions | ||||
| number | Round a number |
| Inventory |
String functions | ||||
| string | Convert a number to a compact format |
| Inventory |
Dynamic Attribute is a common convention used when defining key/value type information in the manifest, such as card attributes or table columns.
The "value" and "link" fields are both Template Strings (see above), which is how dynamic values can be defined. For example, a table column might be defined as:
1{
2 "label":"i18n:fc.om.orders.index.list.column.customer.heading", // "Customer" in English
3 "value": "{{customer.firstName}} {{customer.lastName}}",
4 "link": "#/customer/{{customer.id}}",
5 "condition": "{{and customer.id}}"
6}
Language: json
Name: a table column might be defined
Description:
[Warning: empty required content area]Name | Type | Required | Description |
|
| no | Choose whether the value should be displayed as text or used to render an image. |
|
| yes | String key of the key/value pair. Used as text labels in
|
|
| yes | The templatised string is to be transformed into the output value. |
|
| no | If present, render the text as a link to the location defined in the "link" value. This also has access to DynamicValue context (e.g., GraphQL response data) and any available template helpers (e.g., i18n, date formatters, etc.). |
|
| no | Type-specific configurations for the Dynamic Attribute |
|
| no | If
|
In text-based attributes, a set of optional styles can be applied.
Each style option has a
`matches`
Name | Type | Required | Description |
|
| no | Set of styles to apply to this text attribute. |
Name | Type | Required | Description |
|
| no | Value to compare matches to. Default is the rendered value of the overall attribute itself. |
|
| no | If any of these match the value, apply this style. If empty, treat this as a
|
|
| no | Icon and coloring to apply to this attribute. |
|
| no | Text coloring to apply to this attribute. |
Name | Type | Required | Description |
|
| yes | Name of the icon to show with this text attribute.
|
|
| no | Optionally apply a color to the icon.
|
Name | Type | Required | Description |
|
| no | Optionally apply a color to the text.
|
The following attribute is used to embed a link into a component.
1{
2 "label": "i18n:fc.products.category.label",
3 "value": "{{ref}}",
4 "link": "#/category/{{catalogue.ref}}/{{ref}}",
5 "condition": "{{and catalogue.ref ref}}"
6}
7
Language: json
Name: Attribute is used to embed a link into a component
Description:
[Warning: empty required content area]Name | Type | Required | Description |
|
| yes | Choose whether the value should be displayed as text or used to render an image. |
|
| yes | String key of the key/value pair. Used as text labels in
|
|
| yes | The templatised string is to be used as the URL for the image. |
|
| no | If present, render the image as a link to the location defined in the "link" value. This also has access to DynamicValue context (e.g. GraphQL response data) and any template helpers that are available (e.g. i18n, date formatters, etc). |
|
| no | Type-specific configurations for the Dynamic Attribute |
|
| no | If it returns
The Condition field can stop an image from displaying if it contains no
|
Name | Type | Required | Description |
|
| no | Height of the image (width will auto-scale) |
|
| no | Width of the image (height will auto-scale) |
|
| no | Alt text of the image |
|
| no | True to prevent the default modal on click of an image |
Example 1.
In the following example:
`CREATED`
`PICK`
`CREATED`
`PICK`
1{
2 "type": "image",
3 "label":"i18n:fc.om.order.status.label",
4 "value":"{{wave.status}}",
5 "options":{
6 "styles":[
7 {
8 "matches":[
9 "CREATED",
10 "PICK"
11 ],
12 "icon":{
13 "name":"MdShoppingBasket"
14 }
15 },
16 {
17 "value":"{{wave.attributes.byName.customAttribute}}",
18 "matches":[
19 "customValue"
20 ],
21 "icon":{
22 "name":"FaBoxOpen"
23 }
24 },
25 {
26 "icon":{
27 "name":"FaTruck"
28 }
29 }
30 ]
31 }
32}
Language: json
Name: Example 1
Description:
[Warning: empty required content area]Example 2.
The following attribute is used to embed an image into a component.
1{
2 "type": "image",
3 "value": "{{node.attributes.byName.imageUrl}}",
4 "options": {
5 "width": 50,
6 "height": 50
7 },
8 "condition": "{{and node.attributes.byName.imageUrl}}"
9}
Language: json
Name: Example 2
Description:
[Warning: empty required content area]`
`
The component-type attribute allows you to embed components inside of other components that accept DynamicAttributes.
Please be aware that not all components will work particularly well in all positions!
Name | Type | Required | Description |
|
| yes | Choose whether the value should be displayed as text or used to render an image. |
|
| yes | String key of the key/value pair. Used as text labels in
|
|
| no | Not used in
|
|
| no | Not used in
|
|
| no | Component props, as you would define them anywhere else in the manifest. |
|
| no | If it returns
The Condition field can stop a component from displaying if it contains no data. |
The following attribute is used to embed the print button component into a table column.
1{
2 "label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
3 "type": "component",
4 "options": {
5 "component": "fc.button.print.download",
6 "props": {
7 "label": "Print",
8 "href": "api/v4/consignment/{{articleById.id}}/labelStream",
9 "filename": "pack-label.pdf"
10 }
11 },
12 "condition": "{{and articleById.id}}"
13}
Language: json
Name: Attribute is used to embed the print button component into a table column
Description:
Example of a
`DynamicAttribute`
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.