Docs
Author:
Fluent Commerce
Changed on:
12 Feb 2024
OOTB OMX display - without charCutoff
By default, there is no way for user to scroll the the right to see the full text.
To overcome this issue, you can use charCutoff in the manifest.
Here is the normal Code that display the value:
1 "descendants": [
2 {
3 "component": "fc.list",
4 "props": {
5 "title": "i18n:fc.om.orders.detail.list.attributes.title",
6 "dataSource": "orderById.attributes",
7 "attributes": [
8 {
9 "label": "i18n:fc.om.orders.detail.list.attributes.column.name.heading",
10 "template": "{{name}}"
11 },
12 {
13 "label": "i18n:fc.om.orders.detail.list.attributes.column.type.heading",
14 "template": "{{type}}"
15 },
16 {
17 "label": "i18n:fc.om.orders.detail.list.attributes.column.value.heading",
18 "template": "{{value}}"
19 }
20 ]
21 }
22 }
23 ]
24},Language: json
Name: OOTB code
Description:
[Warning: empty required content area]Adding "charCutoff"You can add fc.mystique.collapsible.text component so that user can choose / expend the text to display the full value:
1
2{
3 "label": "i18n:fc.om.orders.detail.list.attributes.column.value.heading",
4 "type": "component",
5 "options": {
6 "component": "fc.mystique.collapsible.text",
7 "props": {
8 "text": "{{value}}",
9 "charCutoff": 15
10 }
11 }
12}Language: json
Name: with charCutoff
Description:
[Warning: empty required content area]The collapsible component is able to see display the remaining string except if there is one long string (without space) that is longer than the screen length.
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.
