Mystique Config Guide V1
Author:
Fluent Commerce
Changed on:
12 Mar 2024
Overview
This config guide refers to version 1 of the UX Framework which is now deprecated
Key points
- Mystique Components
- Add/Edit Entities
- Configure Dynamic UIs
- Configure Search or Listing Pages
- Configure Detail Pages
- Add Attributes to Mystique Components
Dynamic Modules and Pages
The following components can be used to create dynamic pages in a Mystique setup.
Mystique Components
Filter Component
The filter component enables users to search for data within the list component.
The filter component accepts searches with both full and part references. The search bar can be controlled (show/hide) using the settings.
The filter component can also filter results based on multiple fields. Administrators can configure what fields are available to filter via the GraphQL query used for the listing page.
1 {
2 "component": "shared.components.material.DynamicFilter",
3 "params": {
4 "filterable": {
5 "Order ref": "ref",
6 "Order Status": "status",
7 "Type": "type"
8 },
9 "label": "Filter orders on ref, status, and type"
10 }
11 }Language: json
Name: Filter Component Code Example
Description:
[Warning: empty required content area]Helper text can also be provided to assist users in identifying what fields to use.
Table Component
Queries on the dynamic are displayed in the table component below the filter component for users to view and access the respective details page.
Columns and column titles within the table will be defined by the configuration.
1 {
2 "component":"shared.components.material.DynamicList",
3 "params": {
4 "graphql": {
5 "fragment":"fragment List on ControlGroup{id ref name status workflowRef workflowVersion }"
6 },
7 "defaultPageSize": 10,
8 "dataSource": "virtualCatalogues",
9 "attributes": [
10 {
11 "label": "ref",
12 "template": "{{node.ref}}",
13 "link_template": "#/cataloguesControls/{{node.ref}}"
14 },
15 {
16 "label": "Name",
17 "template": "{{node.name}}"
18 },
19 {
20 "label": "WorkflowVersion",
21 "template": "{{node.workflowVersion}}"
22 }
23 ]
24 }
25 }Language: json
Name: Table Component Code Example
Description:
[Warning: empty required content area]Actions Component
Mutation Actions
Mutation actions perform a creation or change of an existing entity using GraphQL APIs. Mystique allows users to build mutation actions based on available GraphQL APIs.
The Admin Console has different action buttons based on available actions for a given page. With the release of Dynamic UI controls, users can define what buttons and actions are displayed and the available functionalities dependent on the current status of the entity.
Action buttons can be defined with “Primary" or “Secondary" categories from within the .
1 "primaryButtons": [
2 {
3 "label": "Create Control Group",
4 "mutation": "createControlGroup"
5 }
6 ]Language: json
Name: Mutation Action Primary Category Code Example
Description:
[Warning: empty required content area]CONTROL MUTATION ACTIONS
Administrators can control mutation actions by:
- providing settings-based dropdown menus.
- providing lookup-based inputs.
- showing/hiding operation specific fields.
- accepting values to pre-fill fields.
Provide Settings-based Dropdown Menus
Settings can be used to define a list to then use as a dropdown for a mutation to restrict users to a pre-defined input. This helps to mitigate user-based errors by way of free-text.
For example, Order statuses determined by a setting and then as a dropdown to select settings in the order update form.
1 "primaryButtons": [
2 {
3 "label": "Edit Order",
4 "mutation": "updateOrder",
5 "arguments": {
6 "id":"id"
7 },
8 "dropdownSource": {
9 "status": {
10 "source": "settings",
11 "name": "ORDER_STATUS.OPTIONS"
12 },
13 "items.status": {
14 "source": "settings",
15 "name": "ITEM_STATUS.OPTIONS"
16 }
17 }
18 }
19 ]Language: json
Name: Settings-based Dropdown Menu Code Example
Description:
[Warning: empty required content area]Provide Lookup Based Inputs
This method enables users to associate the entity being edited with another existing entity. This is done by defining a query to introduce a lookup for an input field.
For example: Associate location with networks when creating or editing locations.
There are no separate code updates required. lookups are automatically available based on the mutation.
Show / Hide Operation Specific Fields
This is helpful in the event that users do not wish to view all edit fields when they have specific needs.
For example: Updating an order address does not require a form including the order items.
Include/exclude options can be used to narrow down the list of fields displayed in a mutation form to direct users to the areas they need to update.
Administrators are able to use this capability to generate different update forms using the same mutation for key customer service capabilities.
1 {
2 "label": "Edit Order Status",
3 "mutation": "updateOrder",
4 "arguments": {
5 "id": "{{id}}"
6 },
7 "excludedFields": [
8 "items.id",
9 "items.ref"
10 ]
11 },
12 {
13 "label": "Edit Order Items",
14 "mutation": "updateOrder",
15 "arguments": {
16 "id": "{{id}}"
17 },
18 "includedFields": [
19 "items"
20 ]
21 }Language: json
Name: Show / Hide Operation Specific Fields Code Example
Description:
[Warning: empty required content area]Accept Values to Pre-fill Fields
Creating mutations requires information such as parent entities. This functionality provides users with a more user-friendly form.
Click here to view the Pre-filled Fields Code Example
Orchestration User Actions
User Actions enable relevant actions to be displayed based on the current state of the entity within the dynamic pages.
These actions provide access to the orchestrated business logic controlling the flow and operation of entities via workflows already created within the orchestration modeler.
1 "graphql": {
2 "query": "query ($id: ID!) { orderById(id: $id) { id ref status type createdOn retailer{id tradingName} items{edges{node{ref}}} ...Customer ...Items ...fulfilments ...fulfilmentChoice ...financialTransactions} } ",
3 "variables": {
4 "id": "{{params.id}}"
5 }
6 },
7 "secondaryButtons": [
8 {
9 "label": "Add Fulfilment",
10 "mutation": "createFulfilment",
11 "defaultValues": {
12 "order.id": "{{id}}",
13 "fromAddress.id": "456789",
14 "customer.id": "000007",
15 "deliveryType": "HD",
16 "items.$.ref": "000-item-1",
17 "items.$.requestedQuantity": "1",
18 "items.$.filledQuantity": "1"
19 }
20 }
21 ]Language: json
Name: Orchestration User Action Code Example
Description:
[Warning: empty required content area]Tab Components
Complex entities and entities with multiple connections/relations can impose challenges with the way the information is displayed on the page.
Mystique provides users with the ability to control information by way of tabs. This also allows for details pages to be split across different sub-pages.
1 "layouts":[
2 {
3 "component": "shared.components.material.MaterialTabsSet",
4 "params": {
5 "layouts": [
6 {
7 "component": "shared.components.material.SubLayoutContent",
8 "label": "Details",
9 "params": {
10 "layouts": [
11 {
12 "component": "shared.components.material.DynamicCard",
13 "params": {
14 "title": "Summary",
15 "half": true
16 }
17 }
18 ]
19 }
20 }
21 ]
22 }
23 }
24 ]Language: json
Name: Tab Component Code Example
Description:
[Warning: empty required content area]Card Components
Dynamic pages can display specific entity information within cards as defined from the configuration. These card components allow users to configure the information that is displayed on a page and where this information is displayed on the page.
Cards can be configured as either the full width or half the width of the page and can display multiple rows of information. The title of the card is also configurable.
1 {
2 "component": "shared.components.material.DynamicCard",
3 "params": {
4 "title": "Summary",
5 "half": true,
6 "dataSource": "controlGroup",
7 "attributes": [
8 {
9 "label": "Ref",
10 "template": "{{ref}}"
11 },
12 {
13 "label": "Status",
14 "template": "{{status}}"
15 },
16 {
17 "label": "Name",
18 "template": "{{name}}"
19 },
20 {
21 "label": "Description",
22 "template": "{{description}}"
23 }
24 ]
25 }
26 }Language: json
Name: Card Component Code Example
Description:
[Warning: empty required content area]Activity Component
The Activity component can be included in any mystique page to display relevant activities associated with the entity that the page represents.
The “showChildEntities” parameter specifies whether or not the page should display activities related to child entities.
Fulfilment and Article are sub-entities of the Order entity. It is possible to display activities associated with these sub-entities in the activity component added to the Order entity using this parameter.
The Activity component uses a set of built-in templates to render activity logs to provide a user-friendly representation of logs and administrators can override the default templates by adding new templates to the .
Templates are global to the and once added will be available for all activity components of the console.
1 "layouts": [
2 {
3 "component": "shared.components.EntityActivity",
4 "params": {
5 "showChildEntities": true
6 }
7 }
8 ]Language: json
Name: Activity Component Code Example
Description:
[Warning: empty required content area]1```json
2
3 "activityTemplates": [
4 {
5 "trigger": {
6 "type": "ORCHESTRATION",
7 "name": "CREATE"
8 },
9 "priority": 90,
10 "template": "Created {{humanify context.entityType}} {{context.entityRef}}"
11 }
12 ]
13
14```Language: json
Name: Example Activity Template
Description:
[Warning: empty required content area]Dashboard Component
The Dashboard component is a grid-based component containing "cards". This component allows users to define the number of cards per row as an integer parameter from the e.g. "numOfCols". Each row of the gird has a configurable title and can have any number of cards defined in the with the width (%) of each column defined as 100 divided by numOfCols("tilesPerRow").
Each card in the component can be defined individually. This includes identifying which property to grab and display. For example, by configuring the
`"displayTemplate":"{{ ordersCreated.edges.length }}"`Cards in the Dashboard component have threshold values to switch between cards display color. The default colors defined in the CSS of the are White for below the threshold, Orange for in-between the threshold and Red for above the threshold.
For example, the Dashboard can be configured with 3 cards with the following thresholds:
- Order Status as created with SLA < 10 minutes
- Order Status Booked with SLA <6 hours
- Status = Pick & Pack with SLA < 24 hours
And the low threshold value is defined as 1, and the high-value threshold is defined as 10 .
- If the count of orders missing the SLA for Created status has a value of 0, then the card will have a white background
- If the count of order missing the SLA for Booked status has a value of 5, then the Card will have an orange background
- If the count of orders missing the SLA for Pick & Pack status has a value of 15, then the Card will have a Red background
1 {
2 "component": "shared.components.material.DynamicDashboard",
3 "params": {
4 "title": "Orders",
5 "tilesPerRow": 4,
6 "tiles": [
7 {
8 "title": "Awaiting Confirmation",
9 "sla": "(> 10 min)",
10 "displayTemplate": "{{ ordersCreated.edges.length }}",
11 "thresholdLow": 0,
12 "thresholdHigh": 10,
13 "link_template": "#/orders10min?status[]='CREATED'"
14 }
15 ]
16 }
17 }Language: json
Name: Sample code
Description:
[Warning: empty required content area]Add/Edit Entities
Mutation models are automatically generated based on the mutation name given in the action button.
Example:
`"mutation": "createControlGroup"`Configure Dynamic UIs
The Fluent Console can be configured via the Settings API at an account level basis. A new configuration setting called
`ADMIN_CONSOLE_MANIFEST`It is not required to have this setting to start using the standard console modules. These modules will be displayed by default if this setting is not available. Clients can use this setting to customize modules and introduce new modules based on the entities available on the GraphQL API.
Create Left Menu Navigation
Configuring left navigation is a key part of setting up dynamic modules.
There are two levels of left navigation and both can be configured via the setting.
1 {
2 "menu": "Order Management", //Primary level menu item
3 "icon": "shopping_cart",
4 "routes": [
5 {
6 "path": "orders",
7 "component": "shared.components.material.DynamicPage",
8 "menuLabel": "Orders", //Secondary level menu item
9 "menuIcon": "library_books",
10 }
11 ]
12 }Language: json
Name: Sample snippet
Description:
[Warning: empty required content area]Configure Search or Listing Page
A search or listing page is the landing page of an entity. It is possible to create a landing page for any entity available via GraphQL.
This page by default consists of the following components.
- Dynamic page - Page titles and config
- Action buttons - Create a new entity (e.g. Create Order)
- Filter bar - Search entity data
- Table component - Display search results
1 {
2 "path": "customers",
3 "component": "shared.components.material.DynamicPage",
4 "menuLabel": "Customer",
5 "menuIcon": "face",
6 "params": {
7 "graphql": {
8 "query": " query($ref:[String]) { customers(firstName:$ref){ edges{ node{ ...Listing } } } }"
9 },
10 "title": "Customer List",
11 "primaryButtons": [
12 {
13 "label": "Create Customer",
14 "mutation": "createCustomer"
15 }
16 ],
17 "layouts": [
18 {
19 "component": "shared.components.material.DynamicFilter",
20 "params": {
21 "filterable": [
22 "ref"
23 ],
24 "label": "Enter customer firstname"
25 }
26 },
27 {
28 "component": "shared.components.material.DynamicList",
29 "params": {
30 "graphql": {
31 "fragment": "fragment Listing on Customer{ id, ref firstName lastName primaryEmail primaryPhone}"
32 },
33 "defaultPageSize": 5,
34 "dataSource": "customers.edges",
35 "attributes": [
36 {
37 "label": "Id",
38 "template": "{{node.id}}",
39 "link_template": "#/customers/{{node.id}}"
40 },
41 {
42 "label": "ref",
43 "template": "{{node.ref}}"
44 },
45 {
46 "label": "Name",
47 "template": "{{node.firstName}} - {{node.lastName}}"
48 },
49 {
50 "label": "Primary Email",
51 "template": "{{node.primaryEmail}}"
52 },
53 {
54 "label": "Primary Phone",
55 "template": "{{node.primaryPhone}}"
56 }
57 ]
58 }
59 }
60 ]
61 }
62 }Language: json
Name: Click to view the Code Example
Description:
[Warning: empty required content area]Configure Detail Pages
Detail pages are used to display the content of a record (e.g. order details). Additionally, this page can show the details of the primary entity as well as any other related entities which can be retrieved via the Graphql API (e.g. Order items, fulfilments, transactions of an order).
The Details page consists of several components
- Dynamic page
- Action buttons - edit entities
- Card component - show details
- List component - show sub-entities
1 {
2 "path":"customers/:id",
3 "component":"shared.components.material.DynamicPage",
4 "menuIcon":"shopping_cart",
5 "params":{
6 "title":"Customer Details - {{customerById.firstName}} {{customerById.lastName}}",
7 "backButtons":[
8 {
9 "path":"customers",
10 "menuLabel":"Back to Customers "
11 }
12 ],
13 "graphql":{
14 "query":"query ($id: ID!) { customerById(id: $id) {id ref firstName lastName username primaryEmail primaryPhone status retailer {id tradingName} country department createdOn updatedOn} } ",
15 "variables":{
16 "id":"{{params.id}}"
17 }
18 },
19 "layouts":[
20 {
21 "component":"shared.components.material.DynamicCard",
22 "params":{
23 "title":"Personal information",
24 "half":true,
25 "dataSource":"customerById",
26 "attributes":[
27 {
28 "label":"Name",
29 "template":"{{firstName}} {{lastName}}"
30 },
31 {
32 "label":"Primary Phone",
33 "template":"{{primaryPhone}}"
34 },
35 {
36 "label":"Primary Email",
37 "template":"{{primaryEmail}}"
38 },
39 {
40 "label":"Country",
41 "template":"{{country}}"
42 }
43 ]
44 }
45 },
46 {
47 "component":"shared.components.material.DynamicCard",
48 "params":{
49 "title":"Account Details",
50 "half":true,
51 "dataSource":"customerById",
52 "attributes":[
53 {
54 "label":"id",
55 "template":"{{id}}"
56 },
57 {
58 "label":"Created On",
59 "template":"{{formatDate createdOn day='numeric' month='numeric' year='numeric'}}"
60 },
61 {
62 "label":"Updated On",
63 "template":"{{formatDate updateddOn day='numeric' month='numeric' year='numeric'}}"
64 }
65 ]
66 }
67 },
68 {
69 "component":"shared.components.material.DynamicCard",
70 "params":{
71 "title":"Retailer information",
72 "half":true,
73 "dataSource":"customerById",
74 "attributes":[
75 {
76 "label":"Department",
77 "template":"{{department}}"
78 },
79 {
80 "label":"Retailer ",
81 "template":"{{retailer.tradingName}}"
82 },
83 {
84 "label":"Retailer ID",
85 "template":"{{retailer.id}}"
86 }
87 ]
88 }
89 }
90 ]
91 }
92 }Language: json
Name: Click to view the Code Example
Description:
[Warning: empty required content area]Add Attributes to Mystique Components
Attributes can be used to store additional fields in a component. Mystique provides the capability to display attributes in primary components (list and card components). Users can filter the attributes that are displayed.
Add Attributes to a List Component (Create an Order List)
- Retrieve attributes in the query
`...attributes {name type value}` - Add a new column and filter the attribute you want to display in the column using the following method. This will show the value of attribute named "SGR Attr" in the order list for all orders which have this attribute.
1 {
2 "label": "Attribute",
3 "dataSource":"node.attributes",
4 "template": "{{value}}",
5 "filterFirst": {
6 "name":"SGR Attr",
7 "type":"STRING"
8 }
9 }Language: json
Name: Sample Code
Description:
[Warning: empty required content area]This will show the value of attrbute named "SGR Attr" in the order list for all orders which have this attribute.
Add Attributes to a Card Component (e.g.: Order Details)
1. Retrieve attributes in the query.
1 query ($id: ID!) {
2 orderById(id: $id) {
3 id
4 ref
5 status
6 type
7 createdOn
8 retailer {
9 id
10 tradingName
11 }
12 attributes {
13 name
14 type
15 value
16 }
17 }
18 }Language: json
Name: Sample Code
Description:
[Warning: empty required content area]2. Add a new field to the card and filter the attribute you want to display in the field.
1 {
2 "label": "SGR Attr",
3 "dataSource":"attributes",
4 "template": "value",
5 "filterFirst": {
6 "name":"SGR Attr",
7 "type":"STRING"
8 }
9 }Language: json
Name: Sample Code
Description:
[Warning: empty required content area]
Event Search Functionality
The event search functionality on the Admin console enables a user to search for events based on the following filters:
- Entity Type: ,
`ORDER`, etc.`FULFILMENT` - Entity Ref
- Event Status: ,
`PENDING`,`COMPLETE`,`FAILED``NO_MATCH` - Event Retailers: Retailers for which the currently logged-in user can view.
- Event Type: ,
`ORCHESTRATION`,`ORCHESTRATION_AUDIT`,`API`,`GENERAL`,`INTEGRATION``SECURITY` - Event Date and Time range
Example: Events page with relevant filters applied for the retailer user.
For more information about this setting, see Account Settings.
1 {
2 "menu":"Insights",
3 "icon":"highlight",
4 "routes":[
5 {
6 "path":"event",
7 "component":"AdminConsole.EventSearch",
8 "menuLabel":"Events",
9 "menuIcon":"timeline"
10 },
11 {
12 "path":"event/:eventId",
13 "component":"AdminConsole.EventDetails",
14 "highlight":"event"
15 }
16 ]
17 }Language: json
Name: code snippet that can be added to the Manifest file for Admin console to enable event search
Description:
[Warning: empty required content area]
