Skip to main content
September 23, 2021
Solved

Editable Grid - edit only specific rows based on a link click

  • September 23, 2021
  • 4 replies
  • 0 views

Hi All,

I have a user case below, where in "comments column" should be editable based on click of a "edit" icon.  Below is the code snippet with in the grid.

a!textField(
label: "Comments" & fv!item,
value: fv!item.commenttext,
saveInto: {
fv!item.commenttext
},
readOnly: false(),     --->>>>>   how can I make the row editable when a user clicks on edit icon ?
),
if(
fv!item.status= "NON-EDIT",
a!textField(
label: "Action" & fv!item,
value: "",
readOnly: true
),
a!richTextDisplayField(
value: a!richTextIcon(
icon: "edit",
caption: "Edit",
link: a!dynamicLink(
value: fv!index,
saveInto: {
a!save()
}
)
),
align: "CENTER"
)


Any help is appreciated [emoticon:c4563cd7d5574777a71c318021cbbcc8]

Best answer by mikes0011

Using this code, if I click the "Edit" link for row 2, it makes row 1 editable, which I believe is not the intended behavior.

My suggestion, using the same code approach, would be to assemble an initial array of readOnly booleans matching the length of local!items (this will follow any other data configuration such as if it's passed-in from a rule input or queried).  Then for the "edit" button we will want to use a!update() instead of insert(), to update that position of the array.

a!localVariables(
  local!items: {
    { item: "salt", qty: 1 },
    { item: "sugar", qty: 2 }
  },
  local!readOnly: a!forEach(local!items, true()),
  
  a!gridLayout(
    label: "Products",
    headerCells: {
      a!gridLayoutHeaderCell(label: "Item"),
      a!gridLayoutHeaderCell(label: "Quantity"),
      a!gridLayoutHeaderCell(label: "Edit Quantity")
    },
    rows: a!forEach(
      items: local!items,
      expression: a!gridRowLayout(
        contents: {
          a!textField(
            value: fv!item.item,
            saveInto: { fv!item.item },
            readOnly: true(),
            
          ),
          a!textField(
            value: fv!item.qty,
            saveInto: { fv!item.qty },
            readOnly: if(
              isnull(local!readOnly),
              true,
              index(local!readOnly, fv!index, true())
            ),
            
          ),
          a!richTextDisplayField(
            value: a!richTextIcon(
              icon: "edit",
              caption: "Edit",
              link: a!dynamicLink(
                value: false(),
                saveInto: {
                  a!save(
                    local!readOnly,
                    a!update(local!readOnly, fv!index, false())
                  )
                }
              )
            ),
            align: "CENTER"
          )
        }
      )
    )
  )
)

Secondarily, I recommend for this sort of approach, to just use a row-specific local variable, as this is much less confusing in code, allows simpler operation, and is easier to test / troubleshoot / update in the future.  Here inside the a!forEach() statement defining individual rows, we simply wrap the a!gridRowLayout() statement in a new a!localVariables() and add a variable that will be scoped to just that row, i.e. "local!isReadOnly" in the below code.  This can then be saved into directly and independently by in-row controls without needing to keep track of a global array etc.

a!localVariables(
  local!items: {
    { item: "salt", qty: 1 },
    { item: "sugar", qty: 2 }
  },
  /*local!readOnly: a!forEach(local!items, true()),*/

  a!gridLayout(
    label: "Products",
    headerCells: {
      a!gridLayoutHeaderCell(label: "Item"),
      a!gridLayoutHeaderCell(label: "Quantity"),
      a!gridLayoutHeaderCell(label: "Edit Quantity")
    },
    rows: a!forEach(
      items: local!items,
      expression: a!localVariables(
        local!isReadOnly: true(),
        a!gridRowLayout(
          contents: {
            a!textField(
              value: fv!item.item,
              saveInto: { fv!item.item },
              readOnly: true()
            ),
            a!textField(
              value: fv!item.qty,
              saveInto: { fv!item.qty },
              readOnly: local!isReadOnly

            ),
            a!richTextDisplayField(
              value: a!richTextIcon(
                icon: "edit",
                caption: "Edit",
                link: a!dynamicLink(
                  value: false(),
                  saveInto: {
                    a!save(
                      local!isReadOnly,
                      not(local!isReadOnly)
                    )
                  }
                ),
                linkStyle: "STANDALONE"
              ),
              align: "CENTER"
            )
          }
        )
      )
    )
  )
)

4 replies

September 24, 2021

try the below code it may help for your usecase

a!localVariables(
  local!items: {
    {item: "salt", qty: 1},
    {item: "sugar", qty: 2}
  },
  local!readOnly,
  a!gridLayout(
    label: "Products",
    headerCells: {
      a!gridLayoutHeaderCell(label: "Item"),
      a!gridLayoutHeaderCell(label: "Quantity"),
      
      a!gridLayoutHeaderCell(label: "Edit Quantity")
     
    },
    rows: a!forEach(
      items: local!items,
      expression: a!gridRowLayout(
        contents: {
          a!textField(
           
            value: fv!item.item,
            saveInto: {
              fv!item.item
            },
            readOnly:true(),    
          ),
          a!textField(
          
            value: fv!item.qty,
            saveInto: {
              fv!item.qty
            },
            readOnly:if(isnull(local!readOnly),true,index(local!readOnly,fv!index,true())),    
          ),
            a!richTextDisplayField(
              value: a!richTextIcon(
                icon: "edit",
                caption: "Edit",
                link: a!dynamicLink(
                  value: false(),
                  saveInto: {
                   
                   a!save(local!readOnly,insert(local!readOnly,save!value,fv!index))
                  }
                )
              ),
              align: "CENTER"
        )
      
      }
    ),
    
  )
)
)

September 24, 2021

HI avinash,

thank you very much, solution is working as expected [emoticon:c4563cd7d5574777a71c318021cbbcc8]