Column Component
Changed on:
2 Apr 2024
Overview
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.
v1.0.0
Initial changelog entry.
Alias
fc.page.section.column
Detailed technical description
Sample Use Cases
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]Properties
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 |
Configuration example
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
Version History
v2.0.1
The component is extended with the "height" property, allowing for stretching descendant components to the column's full height. Sample
`height`Recommended Placement
None
