Column Component

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

UI 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.

0000-00-00

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}

The following sample is used to demonstrate how the user experience can be improved by utilizing the `height` property to stretch descendant components to the full height of the column to enhance the visual layout of the page.

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}

Properties

*Name*	*Type*	*Required*	*Default*	*Description*
`width`	`CardWidth ( "quarter" / "third" / "half" / "two-thirds" / "full" / number (1-12))`	`No`	`full`	Define the width of this card on a 12-column grid. Takes either a named width i.e., "third", otherwise a numbered width between 1-12. On mobile devices, all widths will automatically change to 12 for the best responsive experience.
`height`	`start/stretch`	`No`	`start`	Enables to stretch descendant components to the full height of the column.The `start` height indicates that the initial height of the descendant components is not changed based on the height of the column component.If the `stretch` height is applied, the descendant components inside the column component are stretched to the full column’s height.

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}

Version History

2023-11-20

v2.0.1

The component is extended with the "height" property, allowing for stretching descendant components to the column's full height. Sample `height` property utilization is added.

Recommended Placement

None