Tabbing in editable grid not working

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

  • Try a!applyComponents instead of a!forEach.

    Although, a!applyComponents is not the recommended way but a!forEach behave weird with Editable Grid.

  • 0
    Certified Lead Developer
    in reply to HarshKumarAgarwal
    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.

  • 0
    Certified Lead Developer
    in reply to Mike Schmitt


    Might be I can show you someday on some screen sharing Slight smile
    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. 

  • 0
    Certified Lead Developer
    in reply to HarshKumarAgarwal

    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
              )
            }
          )
        )
      )
    )