What is the possible issue with the below code. I'm trying to make a selectable editable grid, I have given identifiers as well and converted raw data into datasubset but still the selection I do is selecting all rows whenever I click on any one.
Note: Checkbox is not ootb grid selection. The problem is with ootb grid row highlight selection.
{ /* This is a lighter style of tabs that works well when you are on a page with record views or some other */ /* set of buttons right next to your custom tabs. */ a!localVariables( local!selectedTab: 1, local!customerId, local!selectedDetails, { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: "Life", link: if( local!selectedTab = 1, null, a!dynamicLink(saveInto: a!save(local!selectedTab, 1)) ), linkStyle: "STANDALONE", style: if(local!selectedTab = 1, "STRONG", "") ), a!richTextItem(text: " | "), a!richTextItem( text: "ADD", link: if( local!selectedTab = 2, null, a!dynamicLink(saveInto: a!save(local!selectedTab, 2)) ), linkStyle: "STANDALONE", style: if(local!selectedTab = 2, "STRONG", "") ), a!richTextItem(text: " | "), a!richTextItem( text: "Dependent", link: if( local!selectedTab = 3, null, a!dynamicLink(saveInto: a!save(local!selectedTab, 3)) ), linkStyle: "STANDALONE", style: if(local!selectedTab = 3, "STRONG", "") ) } ), { choose( local!selectedTab, { { a!localVariables( local!classes: { a!map( class: "1R", plan: { a!map( plan_id: 1, classcode: "1R", lastModifiedDate: "10/29/2020 7:10 AM", bank: "Y", calcs: "Y", opt: "Y", dep: "N", stat_state: "NY" ), a!map( plan_id: 2, classcode: "1R", lastModifiedDate: "10/19/2010 7:10 PM", bank: "Y", calcs: "Y", opt: "N", dep: "Y", stat_state: "NY" ), a!map( plan_id: 3, classcode: "1R", lastModifiedDate: "", bank: "Y", calcs: "Y", opt: "Y", dep: "N", stat_state: "TX" ), a!map( plan_id: 4, classcode: "1R", lastModifiedDate: "", bank: "Y", calcs: "Y", opt: "Y", dep: "Y", stat_state: "TX" ), } ), a!map( class: "AA", plan: { a!map( plan_id: 5, classcode: "AA", lastModifiedDate: "1/9/2022 6:10 AM", bank: "Y", calcs: "Y", opt: "N", dep: "Y", stat_state: "CT" ), a!map( plan_id: 6, classcode: "AA", lastModifiedDate: "", bank: "N", calcs: "N", opt: "Y", dep: "Y", stat_state: "CT" ), a!map( plan_id: 7, classcode: "AA", lastModifiedDate: "10/22/2000 7:11 PM", bank: "N", calcs: "N", opt: "N", dep: "Y", stat_state: "DC" ), a!map( plan_id: 8, classcode: "AA", lastModifiedDate: "", bank: "N", calcs: "N", opt: "N", dep: "Y", stat_state: "DC" ), } ) }, local!selectedClassCode, local!selectedRow:tointeger({}), local!selection, local!plans: index( index( local!classes, wherecontains( tostring(local!selectedClassCode), index(local!classes, "class", {}) ), {} ), 1, null ), local!selectedRowData, local!assignedClass, local!selectedPlan: a!dataSubset( data: index(local!plans, "plan", null), startIndex: 1, batchSize: - 1, identifiers: index( index(local!plans, "plan", null), "plan_id", null ) ), { a!columnsLayout( columns: { a!columnLayout( contents: { a!sectionLayout( label: "", contents: { a!dropdownField( label: "Class Code", choiceLabels: { "AA", "1R" }, choiceValues: { "AA", "1R" }, placeholder: "Select", saveInto: local!selectedClassCode, required: true(), value: local!selectedClassCode ), a!gridLayout( label: "Plans", labelPosition: "COLLAPSED", headerCells: { a!gridLayoutHeaderCell(label: ""), a!gridLayoutHeaderCell(label: "Class Code"), a!gridLayoutHeaderCell(label: "Last Modified Date"), a!gridLayoutHeaderCell(label: "Bank"), a!gridLayoutHeaderCell(label: "Calcs"), a!gridLayoutHeaderCell(label: "Opt"), a!gridLayoutHeaderCell(label: "Dep"), a!gridLayoutHeaderCell(label: "Stat State"), }, rows: { a!forEach( items: local!selectedPlan.data, expression: a!gridRowLayout( contents: { a!checkboxField( choiceLabels: "", choiceValues: fv!index, /*value: if(contains(local!assignedClass,tostring(fv!index)), fv!index, null),*/ labelPosition: "COLLAPSED", saveInto: { a!save( local!assignedClass, append(local!assignedClass, save!value) ) } ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.classCode, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem( text: fv!item.lastModifiedDate, size: "SMALL" ), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.bank, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.calcs, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.opt, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.dep, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.stat_state, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ) } ) ) }, totalCount: 10, selectable: true, selectionStyle: "ROW_HIGHLIGHT", selectionValue: local!selectedRow, selectionSaveInto: { /*local!selectedRow,*/ /*a!save(*/ local!selectedRow, /*a!flatten(save!value)*/ /*),*/ /*a!save(*/ /*local!assignedClass,*/ /*index(*/ /*local!selectedPlan,*/ /*local!selectedRow,*/ /*null*/ /*)*/ /*)*/ }, emptyGridMessage: "Select class code to review data", borderStyle: "LIGHT", spacing: "DENSE" ), /*a!gridField( */ /*data: todatasubset(*/ /*local!selectedPlan,*/ /*fv!pagingInfo*/ /*),*/ /*columns: { */ /*a!gridColumn(*/ /*label: "Classcode",*/ /*value: fv!row.classcode*/ /*),*/ /*a!gridColumn(*/ /*label: "Last Modified Date",*/ /*value: fv!row.lastModifiedDate*/ /*),*/ /*a!gridColumn(*/ /*label: "Bank",*/ /*value: fv!row.bank*/ /*),*/ /*a!gridColumn(*/ /*label: "Calcs",*/ /*value: fv!row.calcs*/ /*),*/ /*a!gridColumn(*/ /*label: "Opt",*/ /*value: fv!row.opt*/ /*),*/ /*a!gridColumn(*/ /*label: "Dep",*/ /*value: fv!row.dep*/ /*),*/ /*a!gridColumn(*/ /*label: "Stat State",*/ /*value: fv!row.stat_state*/ /*),*/ /*},*/ /*pageSize: 7,*/ /*selectable: true,*/ /*selectionStyle: "ROW_HIGHLIGHT",*/ /*selectionValue: local!selectedRow,*/ /*selectionSaveInto: { */ /*a!save(*/ /*local!selectedPlan,*/ /*if(*/ /*length(fv!selectedRows) > 0,*/ /*fv!selectedRows[length(fv!selectedRows)],*/ /*null*/ /*)*/ /*)*/ /*local!selectedRow,*/ /*a!save(local!selectedRowData, append(local!selectedRowData,fv!selectedRows)),*/ /*a!save(local!selectedRowData, difference(local!selectedRowData,fv!deselectedRows))*/ /*},*/ /*shadeAlternateRows: false,*/ /*rowHeader: 1*/ /*)*/ } ) } ), }, stackWhen: { "PHONE", "TABLET_PORTRAIT" } ) } ) } }, { /* Replace this rich text with the component or rule that should populate this tab */ a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: "The contents of the second tab would go here", style: "EMPHASIS" ) }, align: "CENTER" ) }, { /* Replace this rich text with the component or rule that should populate this tab */ a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: "The contents of the third tab would go here", style: "EMPHASIS" ) }, align: "CENTER" ) } ) } } ) }
Discussion posts and replies are publicly visible
Hello varunbawa ,
What is the reason that you had to use a custom checkbox component to select the rows. Why not the selectable fields of the grid?
Highlight selection is to populate a detailed section UI on the right hand side on selection of row. Checkbox is to assign the multiple rows to a user with Assign button we have below the grid. But, I'm not concerned about checkbox, that's not the issue. Issue is with OOTB row highlight selection.
Hi varunbawa
ID is required in a!gridRowLayout when using selection in an editable grid. Try adding:
a!gridRowLayout
id: fv!item.plan_id
This should work.
still the same issue, I have added id as new column
{ /* This is a lighter style of tabs that works well when you are on a page with record views or some other */ /* set of buttons right next to your custom tabs. */ a!localVariables( local!selectedTab: 1, local!customerId, local!selectedDetails, { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: "Life", link: if( local!selectedTab = 1, null, a!dynamicLink(saveInto: a!save(local!selectedTab, 1)) ), linkStyle: "STANDALONE", style: if(local!selectedTab = 1, "STRONG", "") ), a!richTextItem(text: " | "), a!richTextItem( text: "ADD", link: if( local!selectedTab = 2, null, a!dynamicLink(saveInto: a!save(local!selectedTab, 2)) ), linkStyle: "STANDALONE", style: if(local!selectedTab = 2, "STRONG", "") ), a!richTextItem(text: " | "), a!richTextItem( text: "Dependent", link: if( local!selectedTab = 3, null, a!dynamicLink(saveInto: a!save(local!selectedTab, 3)) ), linkStyle: "STANDALONE", style: if(local!selectedTab = 3, "STRONG", "") ) } ), { choose( local!selectedTab, { { a!localVariables( local!classes: { a!map( class: "1R", plan: { a!map( plan_id: 1, classcode: "1R", lastModifiedDate: "10/29/2020 7:10 AM", bank: "Y", calcs: "Y", opt: "Y", dep: "N", stat_state: "NY" ), a!map( plan_id: 2, classcode: "1R", lastModifiedDate: "10/19/2010 7:10 PM", bank: "Y", calcs: "Y", opt: "N", dep: "Y", stat_state: "NY" ), a!map( plan_id: 3, classcode: "1R", lastModifiedDate: "", bank: "Y", calcs: "Y", opt: "Y", dep: "N", stat_state: "TX" ), a!map( plan_id: 4, classcode: "1R", lastModifiedDate: "", bank: "Y", calcs: "Y", opt: "Y", dep: "Y", stat_state: "TX" ), } ), a!map( class: "AA", plan: { a!map( plan_id: 5, classcode: "AA", lastModifiedDate: "1/9/2022 6:10 AM", bank: "Y", calcs: "Y", opt: "N", dep: "Y", stat_state: "CT" ), a!map( plan_id: 6, classcode: "AA", lastModifiedDate: "", bank: "N", calcs: "N", opt: "Y", dep: "Y", stat_state: "CT" ), a!map( plan_id: 7, classcode: "AA", lastModifiedDate: "10/22/2000 7:11 PM", bank: "N", calcs: "N", opt: "N", dep: "Y", stat_state: "DC" ), a!map( plan_id: 8, classcode: "AA", lastModifiedDate: "", bank: "N", calcs: "N", opt: "N", dep: "Y", stat_state: "DC" ), } ) }, local!selectedClassCode, local!selectedRow:tointeger({}), local!selection, local!plans: index( index( local!classes, wherecontains( tostring(local!selectedClassCode), index(local!classes, "class", {}) ), {} ), 1, null ), local!selectedRowData, local!assignedClass, local!selectedPlan: a!dataSubset( data: index(local!plans, "plan", null), startIndex: 1, batchSize: - 1, identifiers: index( index(local!plans, "plan", null), "plan_id", null ) ), { a!columnsLayout( columns: { a!columnLayout( contents: { a!sectionLayout( label: "", contents: { a!dropdownField( label: "Class Code", choiceLabels: { "AA", "1R" }, choiceValues: { "AA", "1R" }, placeholder: "Select", saveInto: local!selectedClassCode, required: true(), value: local!selectedClassCode ), a!gridLayout( label: "Plans", labelPosition: "COLLAPSED", headerCells: { a!gridLayoutHeaderCell(label: ""), a!gridLayoutHeaderCell(label: "Plan Id"), a!gridLayoutHeaderCell(label: "Class Code"), a!gridLayoutHeaderCell(label: "Last Modified Date"), a!gridLayoutHeaderCell(label: "Bank"), a!gridLayoutHeaderCell(label: "Calcs"), a!gridLayoutHeaderCell(label: "Opt"), a!gridLayoutHeaderCell(label: "Dep"), a!gridLayoutHeaderCell(label: "Stat State"), }, rows: { a!forEach( items: local!selectedPlan, expression: a!gridRowLayout( contents: { a!checkboxField( choiceLabels: "", choiceValues: fv!index, /*value: if(contains(local!assignedClass,tostring(fv!index)), fv!index, null),*/ labelPosition: "COLLAPSED", saveInto: { a!save( local!assignedClass, append(local!assignedClass, save!value) ) } ), a!richTextDisplayField( value: a!richTextItem(text: fv!identifier, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.classCode, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem( text: fv!item.lastModifiedDate, size: "SMALL" ), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.bank, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.calcs, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.opt, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.dep, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ), a!richTextDisplayField( value: a!richTextItem(text: fv!item.stat_state, size: "SMALL"), marginAbove: "NONE", marginBelow: "NONE" ) } ) ) }, totalCount: 10, selectable: true, selectionStyle: "ROW_HIGHLIGHT", selectionValue: local!selectedRow, selectionSaveInto: { /*local!selectedRow,*/ /*a!save(*/ local!selectedRow, /*a!flatten(save!value)*/ /*),*/ /*a!save(*/ /*local!assignedClass,*/ /*index(*/ /*local!selectedPlan,*/ /*local!selectedRow,*/ /*null*/ /*)*/ /*)*/ }, emptyGridMessage: "Select class code to review data", borderStyle: "LIGHT", spacing: "DENSE" ), /*a!gridField( */ /*data: todatasubset(*/ /*local!selectedPlan,*/ /*fv!pagingInfo*/ /*),*/ /*columns: { */ /*a!gridColumn(*/ /*label: "Classcode",*/ /*value: fv!row.classcode*/ /*),*/ /*a!gridColumn(*/ /*label: "Last Modified Date",*/ /*value: fv!row.lastModifiedDate*/ /*),*/ /*a!gridColumn(*/ /*label: "Bank",*/ /*value: fv!row.bank*/ /*),*/ /*a!gridColumn(*/ /*label: "Calcs",*/ /*value: fv!row.calcs*/ /*),*/ /*a!gridColumn(*/ /*label: "Opt",*/ /*value: fv!row.opt*/ /*),*/ /*a!gridColumn(*/ /*label: "Dep",*/ /*value: fv!row.dep*/ /*),*/ /*a!gridColumn(*/ /*label: "Stat State",*/ /*value: fv!row.stat_state*/ /*),*/ /*},*/ /*pageSize: 7,*/ /*selectable: true,*/ /*selectionStyle: "ROW_HIGHLIGHT",*/ /*selectionValue: local!selectedRow,*/ /*selectionSaveInto: { */ /*a!save(*/ /*local!selectedPlan,*/ /*if(*/ /*length(fv!selectedRows) > 0,*/ /*fv!selectedRows[length(fv!selectedRows)],*/ /*null*/ /*)*/ /*)*/ /*local!selectedRow,*/ /*a!save(local!selectedRowData, append(local!selectedRowData,fv!selectedRows)),*/ /*a!save(local!selectedRowData, difference(local!selectedRowData,fv!deselectedRows))*/ /*},*/ /*shadeAlternateRows: false,*/ /*rowHeader: 1*/ /*)*/ } ) } ), }, stackWhen: { "PHONE", "TABLET_PORTRAIT" } ) } ) } }, { /* Replace this rich text with the component or rule that should populate this tab */ a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: "The contents of the second tab would go here", style: "EMPHASIS" ) }, align: "CENTER" ) }, { /* Replace this rich text with the component or rule that should populate this tab */ a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: "The contents of the third tab would go here", style: "EMPHASIS" ) }, align: "CENTER" ) } ) } } ) }
No, not a new column. In gridRowLayout you will be having a parameter called ID just like CONTENTS, try passing the id to that.
Working now, Thanks