Editable grid

Question

Hi All, 
 I m a beginner in appian. As part of my request, I need to build a editable grid with record data rule input. I have 5 fields totally and I need to display them. Can someone help me how to configure edit button and add button and what actions I need to perform to save or update the values to the rule input. And i should add only one row at a time and all the fields in grid are mandatory. Can someone help me with the code.

Mike Schmitt · Answer

There are various recipes in the official documentation: https://docs.appian.com/suite/help/25.1/Editable_Grid_Component.html#record-type-example 
 Have you tried anything already and/or having any particular trouble?

Harshmodi · Answer

Hi reenab0003 , 
 I guess this code might help you for editable grid ( add, remove ,edit ) 
 a!localVariables(
 local!data: {
 {
 empId: 1,
 firstName: "Test",
 lastName: "User 1",
 designation: "Consultant",
 department: "Delivery"
 },
 {
 empId: 2,
 firstName: "Test",
 lastName: "User 2",
 designation: "Junior Consultant",
 department: "Delivery"
 }
 },
 {
 a!gridLayout(
 label: "Editable Grid",
 labelPosition: "ABOVE",
 headerCells: {
 a!gridLayoutHeaderCell(label: "EMP ID"),
 a!gridLayoutHeaderCell(label: "FIRST NAME"),
 a!gridLayoutHeaderCell(label: "LAST NAME"),
 a!gridLayoutHeaderCell(label: "DESIGNATION"),
 a!gridLayoutHeaderCell(label: "DEPARTMENT"),
 a!gridLayoutHeaderCell(label: "ACTION"),
 
 },
 columnConfigs: {},
 rows: {
 a!forEach(
 items: local!data,
 expression: a!gridRowLayout(
 contents: {
 a!integerField(
 value: fv!item.empId,
 saveInto: fv!item.empId
 ),
 a!textField(
 value: fv!item.firstName,
 saveInto: fv!item.firstName
 ),
 a!textField(
 value: fv!item.lastName,
 saveInto: fv!item.lastName
 ),
 a!textField(
 value: fv!item.designation,
 saveInto: fv!item.designation
 ),
 a!textField(
 value: fv!item.department,
 saveInto: fv!item.deparment
 ),
 a!richTextDisplayField(
 value: {
 a!richTextIcon(
 icon: "times",
 color: "NEGATIVE",
 link: a!dynamicLink(
 saveInto: a!save(local!data, remove(local!data, fv!index))
 ),
 linkStyle: "STANDALONE"
 )
 }
 )
 }
 )
 )
 },
 totalCount: length(local!data),
 addRowLink: a!dynamicLink(
 label: "Add Emp",
 saveInto: a!save(
 local!data,
 append(
 local!data,
 {
 empId: null,
 firstName: null,
 lastName: null,
 deisgnation: null,
 department: null
 }
 )
 )
 ),
 selectionSaveInto: {},
 validations: {},
 shadeAlternateRows: true
 )
 }
)

Editable grid

Top Replies