Page Component
Changed on:
22 Apr 2024
Overview
The Page component is the basic top-level layout component, that renders a header bar (with user actions) and a set of children in a Material UI Grid.
| Plugin Name | Core |
|---|
The standard library of components.
v1.0.0
Initial changelog entry.
Alias
fc.page shared.components.material.DynamicPage
Detailed technical description
Properties
Name | Type | Required | Default | Description |
title |
| no | none | Text to be shown in the page header. Accepts a Template String. |
backButtons |
| no | none | Breadcrumb links to display in the page header. Path and Labels both accept Template Strings. |
actions |
| no | none | Whether to show user actions from the on this page. |
hideRefreshButton |
| no | false | Whether to show the Refresh button on this page. By default, the Refresh button is displayed. |
BackButton
Name | Type | Required | Default | Description |
label |
| yes | n/a | Text label of the breadcrumb link |
path |
| yes | n/a | Page path to link to |
PageActionConfig
Name | Type | Required | Default | Description |
primary |
| no |
| Primary page-level actions to appear as buttons across the top of the page. |
secondary |
| no |
| Secondary page-level actions to appear behind a "more" button. |
userActionFilter |
| no | none | Filters would allow you to specify which User Actions to display and hide on the page. This is now covered by the |
userActionExtensions |
| no | none | Extensions are now defined in a page |
PageAction
A page can be any of the following:
- User Action
- Mutate Action
- Navigate Action
- Custom Action
The type of page is defined by the value in the type field, which defines the other fields that are necessary for the . For example, having a value of 'navigate' will make page a Navigate , and the link field will be mandatory as a result. (See the sample for examples of different page actions under the primary and secondary field.)
User Action
User Actions are the actions available on a given based on its and status.
All workflow-defined User Actions are automatically appended to the primary and secondary containers, so these should only be added to the when choosing to re-order or change behaviour via the following configuration options.
Name | Type | Required | Default | Description |
type |
| yes | n/a | Specifies a "" (or ) type . |
name |
| yes | n/a | Name of the (aka the name). |
extensions |
| no | none | Optionally configure additional behaviours when users interact with this . |
roles |
| no | none | Optionally hide this if the user doesn't have any of the specified roles. |
condition |
| no | none | Optionally hide this if the template string renders to "false". |
Mutation Action
Mutation Actions are actions that send data directly to the API. The name of the mutation is specified and the form is automatically generated from the schema.
Updates sent via mutations do not go through the orchestration engine, so in most cases, they should only be used for the initial creation of entities, or for updating non-orchestrated types.
For this reason, always prefer User Actions for orchestrated types.
Name | Type | Required | Default | Description |
type |
| yes | n/a | Specifies a "Mutation" (or ) type . |
name |
| yes | n/a | Name of the mutation to show, e.g. |
label |
| yes | n/a | Text label of the button. |
args | key / value ( | no* | none | For update mutations, provide the query arguments (e.g. |
overrides | key / value ( | yes | n/a | Field-level overrides to be used when generating a form for the mutation. Key is the name of the field. |
filter |
| yes | n/a | Filter the list of fields that will be present in the generated form. |
extensions |
| yes | n/a | Optionally configure additional behaviours when users interact with this . |
roles |
| no | none | Optionally hide this if the user doesn't have any of the specified roles. |
condition |
| no | none | Optionally hide this if the template string renders to "false". |
Navigation Action
Navigation Actions are actions that take a user to another page when their button is clicked on.
Name | Type | Required | Default | Description |
type |
| Yes | none | The type of being performed upon clicking the button. |
label |
| Yes | none | The value on the button displayed to the user |
link |
| Yes | none | The relative path the user will be navigated to. |
roles |
| no | none | Optionally hide this if the user doesn't have any of the specified roles. |
About Links
Note: When determining the path to append the link value to. This will be done on the root URL rather than appended to the end of the current one.
For example if the link is `/waves/create` this will result in
`https://<accountid>.sandbox.apps.fluentcommerce.com/store#waves`
Then the end URL will be `https://<accountid>.sandbox.apps.fluentcommerce.com/store/store#/waves/create`
Custom Action
Custom Actions provides a method to extend the available set of types via the SDK. They are configured in much the same way as any other Component is in the .
Always ensure that the custom component you embed into a page bar fits well into that slot. This usually means it should be a button that either navigates the page or produces a modal or drawer on click.
Name | Type | Required | Default | Description |
type |
| yes | n/a | Specifies a "component" type . |
This type extends the Mystique Component Instance type so that other config options can be found there.
ActionExtension
extensions allow behaviour to be added to an , like choosing which page to navigate after a successful submission.
Name | Type | Required | Default | Description |
postSubmit |
| no | none | Optionally perform a follow-up after an form has been submitted |
| no | none | Optionally perform an instead of the form rendering |
Post Submit Navigate
Name | Type | Required | Default | Description |
type |
| yes | n/a | Navigate to a new page after form submission. |
link |
| yes | n/a | Link to the new page. Accepts a Template String. |
navigateWhenUnchanged |
| no | false | By default, navigation will not occur until it renders a different result from what it started with. This allows time for asynchronous background processes to be completed before navigating to the detail page of a newly created . |
ActionFilter
Used to show or hide certain actions or fields within actions.
Name | Type | Required | Default | Description |
type |
| yes | n/a | Whether the named items should be included or excluded from the set |
names |
| yes | n/a | List of or field names to be included or excluded |
ExtendedFormField
Name | Type | Required | Default | Description |
component |
| no | none | FieldRegistry alias for an alternate field component that should be used for this field, only for this mutation . |
source |
| no | none | The name of a that provides options, turning a regular text field into a radio set or dropdown. |
label |
| no | none | Set a different label for this field (supports i18n keys). |
value | any | no | none | Lock in the value of this field. The field will no longer appear in the form as the provided value will be used instead. |
defaultValue | any | no | none | Set the initial value of the field. The field will appear in the form and can be changed by the user. |
helperText |
| no | none | User helper text to be presented alongside the field. |
options | key / value ( | no | none | Value options for this field (e.g. in a 'select' or 'radio group'). |
sortPrefix |
| no | none | Set the position of a field in a form. |
condition |
| no | none | Show a field depending on the condition. Used in cases where the value has one type.
|
select |
| no | none | Show a field depending on the condition. Used when a value can have more than one type. First condition which matches the criterion will be applied.
|
SelectConfig
Name | Type | Required | Default | Description |
condition |
| yes | none | Condition upon which the field will be displayed. |
inputType |
| yes | none | FieldRegistry alias for an alternate field component that should be used for the field, only for mutation . |
label |
| no | none | The human-readable label of the field. |
options | key / value ( | no | none | Value options for the field (e.g. in 'select' or 'radio group'). |
Properties
Name | Type | Required | Default | Description |
title |
| no | none | Text to be shown in the page header. Accepts a Template String. |
backButtons |
| no | none | Breadcrumb links to display in the page header. Path and Labels both accept Template Strings. |
actions |
| no | none | Whether to show user actions from the on this page. |
hideRefreshButton |
| no | false | Whether to show the Refresh button on this page. By default, the Refresh button is displayed. |
Configuration example
1{
2 "type": "page",
3 "path": "waves",
4 "component": "fc.page",
5 "nav": {
6 "label": "i18n:fc.sf.ui.waves.index.nav",
7 "icon": "store"
8 },
9 "props": {
10 "title": "i18n:fc.sf.ui.waves.index.wavesList.title",
11 "backButtons": [{
12 "path": "collections/carrier",
13 "label": "Carrier Collections"
14 }],
15 "actions": {
16 "primary": [
17 {
18 "type": "userAction",
19 "label": "i18n:acme.setting.create.label",
20 "name":"createSetting",
21 "roles":["ORDER_ADMIN"]
22 },
23 {
24 "type": "mutation",
25 "label": "i18n:acme.user.update.label",
26 "name":"updateUser",
27 "args":{
28 "id":"{{me.id}}"
29 },
30 "overrides": {
31 "department": { "source": "acme.user.departments" },
32 "timezone": { "component": "acme.mutation.timezonepicker" },
33 "value": {
34 "sortPrefix": "5",
35 "select": [
36 {
37 "inputType": "float",
38 "condition": "{{in valueType 'INTEGER'}}"
39 },
40 {
41 "inputType": "input",
42 "condition": "{{in valueType 'BOOLEAN'}}",
43 "options": [
44 {
45 "label": "true",
46 "value": "true"
47 },
48 {
49 "label": "false",
50 "value": "false"
51 }
52 ]
53 },
54 {
55 "inputType": "input",
56 "condition": "{{in valueType 'STRING'}}"
57 }
58 ]
59 },
60 "lobValue": {
61 "component": "fc.attribute.jsoneditor",
62 "sortPrefix": "6",
63 "condition": "{{in valueType 'JSON'}}"
64 }
65 },
66 "filter": {
67 "type":"exclude",
68 "names":["attributes"]
69 }
70 }
71 ],
72 "secondary": [
73 {
74 "type": "mutation",
75 "label": "Create Control",
76 "name":"createControl"
77 }
78 ],
79 "userActionExtensions": {
80 "WaveCreate": {
81 "postSubmit": {
82 "type": "navigate",
83 "link": "/waves/{{wavesInProgress.edges.0.node.id}}"
84 }
85 }
86 }
87 }
88 },
89 "data": { /* page query information */ }
90 "descendants": [ /* page contents */ ]
91}Version History
v23.8.1
First Release
Recommended Placement
None
