More less link on json readonly grid is not working

Question

Hi, 
 I am trying to add a more less link on a column in a read only grid. However, it only works if the grid has indexed data and not if it is converted to json. 
 Converting to json is also mandatory as the paging is not working if the grid rows are not converted to json(The data is coming from record type). 
 I already tried the "a!fromjson" function on that specific column but the link is not working. 
 Is there a way that the more/less link can work even if I convert the grid to json?

Shubham Aware · Answer

I tried to replicate your requirement have a look at it. a!localVariables(
 /* Sample data simulating record data */
 local!originalData: {
 a!map(
 id: 1,
 name: "John Doe",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
 department: "Sales"
 ),
 a!map(
 id: 2,
 name: "Jane Smith",
 description: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.",
 department: "Marketing"
 ),
 a!map(
 id: 3,
 name: "Bob Johnson",
 description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.",
 department: "IT"
 ),
 a!map(
 id: 4,
 name: "Alice Brown",
 description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.",
 department: "HR"
 )
 },

 /* Convert to JSON as per your requirement */
 local!jsonData: a!toJson(local!originalData),

 /* Track which rows are expanded - using ID as key */
 local!expandedRows: {},

 /* Character limit for truncation */
 local!charLimit: 50,

 /* Convert back from JSON and add index field */
 local!gridData: a!forEach(
 items: a!fromJson(local!jsonData),
 expression: a!update(
 fv!item,
 "rowIndex",
 fv!index
 )
 ),

 {
 a!sectionLayout(
 label: "Grid with More/Less Link (JSON Data)",
 contents: {
 a!gridField(
 label: "Employee Grid",
 labelPosition: "ABOVE",
 data: local!gridData,
 columns: {
 a!gridColumn(
 label: "ID",
 value: fv!row.id,
 width: "ICON"
 ),
 a!gridColumn(
 label: "Name",
 value: fv!row.name,
 width: "MEDIUM"
 ),
 a!gridColumn(
 label: "Description",
 value: a!localVariables(
 local!currentRowIndex: fv!row.rowIndex,
 local!isExpanded: contains(tointeger(local!expandedRows), local!currentRowIndex),
 local!fullText: fv!row.description,
 local!displayText: if(
 local!isExpanded,
 local!fullText,
 if(
 len(local!fullText) > local!charLimit,
 concat(
 left(local!fullText, local!charLimit),
 "..."
 ),
 local!fullText
 )
 ),
 a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: local!displayText
 ),
 " ",
 if(
 len(local!fullText) > local!charLimit,
 a!richTextItem(
 text: if(
 local!isExpanded,
 "Show Less",
 "Show More"
 ),
 link: a!dynamicLink(
 label: "Toggle",
 value: local!currentRowIndex,
 saveInto: {
 if(
 local!isExpanded,
 /* Remove from expanded list */
 a!save(
 local!expandedRows,
 remove(
 local!expandedRows,
 wherecontains(local!currentRowIndex, local!expandedRows)
 )
 ),
 /* Add to expanded list */
 a!save(
 local!expandedRows,
 append(local!expandedRows, local!currentRowIndex)
 )
 )
 }
 ),
 style: "STRONG",
 color: "ACCENT"
 ),
 {}
 )
 }
 )
 ),
 width: "AUTO"
 ),
 a!gridColumn(
 label: "Department",
 value: fv!row.department,
 width: "MEDIUM"
 )
 },
 rowHeader: 1,
 pageSize: 5,
 validations: {}
 )
 }
 )
 }
)