I have an editable grid to add an address for a user. The values are displaying and saving correctly. The issue is that when I am typing in a value in one column and use tab to go to the next column, it tabs over but then the cursor disappears. So I have to tab twice to be able to type in a value. Is this a thing with editable grid or perhaps I am configuring something wrong?
a!gridLayout( headerCells: { a!gridLayoutHeaderCell( label: "Address Line 1", align: "CENTER" ), a!gridLayoutHeaderCell( label: "Address Line 2", align: "CENTER" ), a!gridLayoutHeaderCell( label: "City", align: "CENTER" ), a!gridLayoutHeaderCell( label: "State", align: "CENTER" ), a!gridLayoutHeaderCell( label: "Zipcode", align: "CENTER" ) }, columnConfigs: { a!gridLayoutColumnConfig( width: "DISTRIBUTE", weight: 2 ), a!gridLayoutColumnConfig( width: "DISTRIBUTE", weight: 2 ), a!gridLayoutColumnConfig( width: "DISTRIBUTE" ), a!gridLayoutColumnConfig( width: "DISTRIBUTE" ), a!gridLayoutColumnConfig( width: "DISTRIBUTE" ) }, rows: a!forEach( items: ri!address_cdt, expression: a!gridRowLayout( contents: { a!textField( value: index(ri!address_cdt[fv!index],"address_line1", {}), saveInto: ri!address_cdt[fv!index].address_line1, required: true ), a!textField( value: index(ri!address_cdt[fv!index],"address_line2", {}), saveInto: ri!address_cdt[fv!index].address_line2 ), a!textField( value: ri!address_cdt[fv!index].city, saveInto: ri!address_cdt[fv!index].city, required: true ), a!dropdownField( placeholderLabel:"--Select State--", choiceLabels: local!choiceLabel, choiceValues: local!choiceValue, value: index(ri!address_cdt[fv!index],"state_id",-1), saveInto: ri!address_cdt[fv!index].state_id ), a!textField( value: ri!address_cdt[fv!index].zip_code, saveInto: ri!address_cdt[fv!index].zip_code ), } ) ), addRowLink: a!dynamicLink( label: "Add New Address", saveInto: { a!save(ri!address_cdt, append( ri!address_cdt, 'type!{urn:com:appian:types}ADDRESS'() ) ) } ) )
Discussion posts and replies are publicly visible
Try a!applyComponents instead of a!forEach.
Although, a!applyComponents is not the recommended way but a!forEach behave weird with Editable Grid.
Unknown said:a!forEach behave weird with Editable Grid.
What behavior are you referring to? I have never experienced this, even once. I do not recommend using a!applyComponents under any circumstances when a!forEach is available.
Mike SchmittMight be I can show you someday on some screen sharing For now try running below code and you will observe the difference.
Here, possibly I am missing something and I am happy to hear on that.
a!gridRowLayout(id: ri!index,contents: {a!textField(value: ri!data[ri!index].id,saveInto: ri!data[ri!index].id),a!textField(value: ri!data[ri!index].code,saveInto: ri!data[ri!index].code),a!textField(value: ri!data[ri!index].name,saveInto: ri!data[ri!index].name),a!textField(value: ri!data[ri!index].description,saveInto: ri!data[ri!index].description)})Now called this inner rule from another main rule and code for that is as follows:a!localVariables(local!data: {{id:null,code:"",name:"",description:""},{id:null,code:"",name:"",description:""},{id:null,code:"",name:"",description:""},{id:null,code:"",name:"",description:""}},a!gridLayout(label: "Looping Test",headerCells: {a!gridLayoutHeaderCell(label: "Id"),a!gridLayoutHeaderCell(label: "Code"),a!gridLayoutHeaderCell(label: "Name"),a!gridLayoutHeaderCell(label: "Description")},rows:a!forEach(items:local!data,expression:rule!HARSH_Test(data: local!data,index: fv!index))/*a!applyComponents(function: rule!HARSH_Test(data: local!data,index: _),array: 1 + enumerate(count(local!data)))*/))
This isn't how you'd use a!forEach in an editable grid, though. Since you're passing in the entire local!data array to the "grid row" sub-rule, as well as the a!forEach index, I wouldn't expect directly saving into the fields to work in this manner. Instead, your sub expression rule should accept each fv!item directly, like this:
a!localVariables( local!data: { {id:null,code:"",name:"",description:""}, {id:null,code:"",name:"",description:""}, {id:null,code:"",name:"",description:""}, {id:null,code:"",name:"",description:""} }, a!gridLayout( label: "Looping Test", headerCells: { a!gridLayoutHeaderCell(label: "Id"), a!gridLayoutHeaderCell(label: "Code"), a!gridLayoutHeaderCell(label: "Name"), a!gridLayoutHeaderCell(label: "Description") }, rows: a!forEach( items: local!data, expression: rule!HARSH_Test( data: fv!item ) ) ) )
Additionally, with a!forEach(), you actually don't need sub interface rules like this anymore, as you can create your grid rows directly in the parent interface.
a!localVariables( local!data: { {id:null,code:"",name:"",description:""}, {id:null,code:"",name:"",description:""}, {id:null,code:"",name:"",description:""}, {id:null,code:"",name:"",description:""} }, a!gridLayout( label: "Looping Test", headerCells: { a!gridLayoutHeaderCell(label: "Id"), a!gridLayoutHeaderCell(label: "Code"), a!gridLayoutHeaderCell(label: "Name"), a!gridLayoutHeaderCell(label: "Description") }, rows: a!forEach( items:local!data, expression: a!gridRowLayout( id: fv!index, contents: { a!textField( value: fv!item.id, saveInto: fv!item.id ), a!textField( value: fv!item.code, saveInto: fv!item.code ), a!textField( value: fv!item.name, saveInto: fv!item.name ), a!textField( value: fv!item.description, saveInto: fv!item.description ) } ) ) ) )