Docs
Changed on:
2 Apr 2024
A simple component that allows you to place other components in a column. Typically used to improve the layout and accessibility of items on a page, see a sample use case and the properties of this component below.
| Plugin Name | Core |
|---|
The standard library of mystique components.
Initial changelog entry.
fc.page.section.column
The following sample is used to demonstrate how the Returns user experience can be altered by placing attribute cards containing the customer and fulfillment details into the descendants of the column component to improve the visual layout of the page.
1{
2 "component": "fc.page.section.column",
3 "props": {
4 "width": "4"
5 },
6 "descendants": [
7 {
8 "component": "fc.card.attribute",
9 "dataSource": "orderById",
10 "props": {
11 "title": "{{i18n \"fc.sf.ui.returns.create.wizard.card.title.returnRef\"}} {{ref}}",
12 "attributes": [
13 {
14 "label": "i18n:fc.sf.ui.returns.create.wizard.card.attribute.label.customerName",
15 "value": "{{customer.title}} {{customer.firstName}} {{customer.lastName}}"
16 },
17 {
18 "label": "i18n:fc.sf.ui.returns.create.wizard.card.attribute.label.phoneNumber",
19 "value": "{{customer.primaryPhone}}"
20 },
21 {
22 "label": "i18n:fc.sf.ui.returns.create.wizard.card.attribute.label.orderStatus",
23 "value": "{{status}}"
24 },
25 {
26 "label": "i18n:fc.sf.ui.returns.create.wizard.card.attribute.label.orderDate",
27 "value": "{{dateStringFormatter createdOn 'MMM dd, yyyy h:mmA'}}"
28 }
29 ]
30 }
31 },
32 {
33 "component": "fc.card.attribute",
34 "props": {
35 "title": "Fulfilment Details",
36 "attributes": [
37 {
38 "label": "Fulfilment ID",
39 "value": "235235"
40 },
41 {
42 "label": "Fulfilment Location",
43 "value": "Sydney Store"
44 },
45 {
46 "label": "Fulfilment Status",
47 "value": "Filled"
48 },
49 {
50 "label": "Fulfilment Person",
51 "value": "Sam Thomson"
52 }
53 ]
54 }
55 }
56 ]
57}Language: json
Name: Sample column component configuration
Description:
[Warning: empty required content area]The following sample is used to demonstrate how the user experience can be improved by utilizing the
`height`1{
2 "descendants": [
3 {
4 "component": "fc.page.section",
5 "descendants": [
6 {
7 "component": "fc.page.section.column",
8 "props": {
9 "width": "6",
10 "height": "stretch"
11 },
12 "descendants": [
13 {
14 "component": "fc.card.attribute",
15 "props": {
16 "title": "i18n:fc.om.orders.detail.card.retailerInfo.title",
17 "dataSource": "orderById",
18 "attributes": [
19 {
20 "label": "i18n:fc.om.orders.detail.card.retailerInfo.attribute.retailerID.label",
21 "template": "{{retailer.id}}"
22 },
23 {
24 "label": "i18n:fc.om.orders.detail.card.retailerInfo.attribute.retailer.label",
25 "template": "{{retailer.tradingName}}"
26 }
27 ]
28 }
29 }
30 ]
31 },
32 {
33 "component": "fc.page.section.column",
34 "props": {
35 "width": "6",
36 "height": "stretch"
37 },
38 "descendants": [
39 {
40 "component": "fc.card.attribute",
41 "props": {
42 "title": "i18n:fc.om.orders.detail.card.deliveryInfo.title",
43 "dataSource": "orderById.fulfilmentChoice",
44 "attributes": [
45 {
46 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.pickupLocationRef.label",
47 "template": "{{pickupLocationRef}}"
48 },
49 {
50 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.customerName.label",
51 "template": "{{deliveryAddress.name}}"
52 },
53 {
54 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.street.label",
55 "template": "{{deliveryAddress.street}}"
56 },
57 {
58 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.city.label",
59 "template": "{{deliveryAddress.city}}"
60 },
61 {
62 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.state.label",
63 "template": "{{deliveryAddress.state}}"
64 },
65 {
66 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.postcode.label",
67 "template": "{{deliveryAddress.postcode}}"
68 }
69 ]
70 }
71 }
72 ]
73 }
74 ]
75 }
76 ]
77}Language: json
Name: Sample height property utilization
Description:
[Warning: empty required content area]Name | Type | Required | Default | Description |
| | | | Define the width of this card on a 12-column grid. |
| | | | Enables to stretch descendant components to the full height of the column. The If the |
1{
2 "component": "fc.page.section.column",
3 "props": {
4 "width": "4",
5 "height": "stretch"
6 },
7 "descendants": [
8 {
9 // Your components here
10 }
11 ]
12}Language: json
The component is extended with the "height" property, allowing for stretching descendant components to the column's full height. Sample
`height`None
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.
