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
This is not about coding.
This is something related to browser.
Google Chrome supports the tab working fine whereas IE has this issue
We are seeing this occur in Chrome now
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)))*/))
I was able to resolve this issue by using fv!item.fieldName for the value and saveinto field of the text and dropdown components, instead of using indexing.
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 ) } ) ) ) )