Docs

Search

Sign In

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Collapsible Attributes Component

UI Component

Changed on:

14 Mar 2024

Overview

Collapsible Entity Attributes is a component that can be used to improve the user experience when interacting with a lot of attributes. It has the ability to:

Display these attributes on one line separated by commas
Display these attributes line by line.
Collapse and expand based on the number of characters (for one-line)
Collapse and expand based on the number of lines (for line-by-line).

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.mystique.collapsible.attributes

Detailed technical description

Usage

The data must start at an array of attributes or a connection of attributes. To enable this, use the

`dataSource`

property to map the base page query to the specific attributes that you want this component to display. For example in the sample below the

`dataSource`

is mapped to

`node.product.attributes`

Properties

Name

Type

Required

Default

Description

`collapseOn`

`'characters' | 'lines'`

No

`lines`

`collapseOn`

controls both how the component displays and how the collapseLimit cutoff property works. Possible values are

`characters`

and

`lines`

. When set to 'characters' each attribute is shown as a comma-separated list. When set to 'lines' each attribute is shown on an individual line.

`collapseLimit`

`number`

Yes

`collapseLimit`

defines the cutoff value for when the string is truncated. When

`collapseOn=characters`

this cutoff represents the number of characters to display before truncation. When

`collapseOn=lines`

, this cutoff value represents the number of lines to display before truncation Characters/Lines past that exceeds the

`collapseLimit`

value will not display until the more button is clicked on.

`hideKeys`

`boolean`

No

`false`

By default, the component shows each attribute as “Name: value”. To hide the name, set this property equal to

`true`

.

`exclude`

`string[]`

No

An optional array specifying attributes to hide. The values should be the attribute name.

Configuration example

1        {
2            "label": "i18n:fc.sf.ui.returns.orders.createReturnOrder.list.column.description.label",
3            "type": "component",
4            "options": {
5                "component": "fc.mystique.collapsible.attributes",
6                "dataSource": "node.product.attributes",
7                "props": {
8                    "exclude": [
9                        "imageUrl",
10                        "imageUrlRef"
11                    ],
12                    "collapseOn": "",
13                    "collapseLimit": 10,
14                    "hideKeys": true
15                }
16            }
17        }

Language: json

Version History

2023-08-01

v23.8.1

n/a

Recommended Placement

List

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.