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?

Piyush Vaswani · Answer

https://youtu.be/z0FF9aCZRBE?feature=shared CHECKOUT THIS VIDEO AVAILABLE ON APPIAN COMMUNITY YOUTUBE CHANNEL

Mike Schmitt · Answer

reenab0003 said: Everytime when i edit add new row gets added into database 
 Without seeing the code you're attempting to use, it's hard to guess at a fix, fwiw.

baji mekala · Answer

Hi reenab0003 , 
 This code might help you for editable grid ( add, remove ,edit ) 
 a!localVariables(
 local!data: {
 a!map(
 studentId: 1,
 loginId: 1,
 lastName: "gill",
 phone: "9899878788",
 photoDocId: 168045,
 statusId: 11,
 modifiedOn: fn!datetime(2023, 12, 6, 10, 24, 45, 0),
 isActive: false,
 age: 23,
 createdBy: "Yashwanth",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "subman@gmail.com",
 firstName: "Subman",
 dob: fn!date(2000, 9, 29),
 createdOn: fn!datetime(2023, 12, 6, 5, 37, 29, 0)
 ),
 a!map(
 studentId: 2,
 loginId: 4,
 lastName: "PPP",
 phone: "9877776767",
 photoDocId: 168123,
 statusId: 12,
 modifiedOn: fn!datetime(2023, 12, 7, 6, 10, 24, 0),
 isActive: false,
 age: 33,
 createdBy: "Stark",
 modifiedBy: "Stark",
 emailAddress: "rahane@gmail.com",
 firstName: "RRR",
 dob: fn!date(1990, 11, 1),
 createdOn: fn!datetime(2023, 12, 7, 6, 9, 31, 0)
 ),
 a!map(
 studentId: 3,
 loginId: 5,
 lastName: "jaganadh",
 phone: "9855677665",
 photoDocId: 168181,
 statusId: 12,
 modifiedOn: fn!datetime(2023, 12, 8, 5, 9, 30, 0),
 isActive: false,
 age: 23,
 createdBy: "Mahesh",
 modifiedBy: "Mahesh",
 emailAddress: "puri@gmail.com",
 firstName: "puri",
 dob: fn!date(2000, 12, 8),
 createdOn: fn!datetime(2023, 12, 8, 4, 22, 40, 0)
 ),
 a!map(
 studentId: 5,
 loginId: 5,
 lastName: "jaganadh",
 phone: "9855677665",
 photoDocId: 168190,
 statusId: 10,
 modifiedOn: fn!datetime(2023, 12, 8, 5, 10, 4, 0),
 isActive: true,
 age: 23,
 createdBy: "Mahesh",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "puri@gmail.com",
 firstName: "puri",
 dob: fn!date(2000, 12, 8),
 createdOn: fn!datetime(2023, 12, 8, 4, 46, 15, 0)
 ),
 a!map(
 studentId: 6,
 loginId: 5,
 lastName: "KO",
 phone: "7877676556",
 photoDocId: 168234,
 statusId: 10,
 modifiedOn: fn!datetime(2023, 12, 8, 10, 2, 1, 0),
 isActive: true,
 age: 23,
 createdBy: "Mahesh",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "subman@gmail.com",
 firstName: "Yashwanth",
 dob: fn!date(2000, 10, 30),
 createdOn: fn!datetime(2023, 12, 8, 9, 49, 58, 0)
 ),
 a!map(
 studentId: 8,
 loginId: 4,
 lastName: "mahesh",
 phone: "7899875467",
 photoDocId: 168758,
 statusId: 10,
 modifiedOn: fn!datetime(2023, 12, 23, 12, 21, 44, 0),
 isActive: true,
 age: 23,
 createdBy: "Stark",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "pandu@gmail.com",
 firstName: "Pandu",
 dob: fn!date(2000, 12, 14),
 createdOn: fn!datetime(2023, 12, 23, 11, 59, 45, 0)
 ),
 a!map(
 studentId: 9,
 loginId: 4,
 lastName: "james",
 phone: "7899875467",
 photoDocId: 168761,
 statusId: 11,
 modifiedOn: fn!datetime(2023, 12, 23, 12, 21, 52, 0),
 isActive: true,
 age: 23,
 createdBy: "Stark",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "pandu@gmail.com",
 firstName: "Ferguson",
 dob: fn!date(2000, 12, 14),
 createdOn: fn!datetime(2023, 12, 23, 12, 18, 33, 0)
 ),
 a!map(
 studentId: 10,
 loginId: 3,
 lastName: "james",
 phone: "7899875467",
 photoDocId: 169025,
 statusId: 11,
 modifiedOn: fn!datetime(2024, 1, 3, 14, 47, 51, 0),
 isActive: true,
 age: 24,
 createdBy: "Taylor",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "pandu@gmail.com",
 firstName: "Ferguson",
 dob: fn!date(2000, 12, 14),
 createdOn: fn!datetime(2024, 1, 3, 14, 37, 42, 0)
 ),
 a!map(
 studentId: 12,
 loginId: 1,
 lastName: "mouse",
 phone: "5545456767",
 photoDocId: 170248,
 statusId: 11,
 modifiedOn: fn!datetime(2024, 8, 27, 5, 48, 52, 0),
 isActive: true,
 age: 22,
 createdBy: "Yashwanth",
 modifiedBy: "yashwanth.akula@yexle.com",
 emailAddress: "mickey@gmail.com",
 firstName: "mickey",
 dob: fn!date(2002, 10, 31),
 createdOn: fn!datetime(2024, 1, 21, 8, 55, 54, 0)
 )
 },
 local!readOnly: { 0 },
 {
 a!gridLayout(
 label: "Students",
 labelPosition: "ABOVE",
 headerCells: {
 a!gridLayoutHeaderCell(label: "Name"),
 a!gridLayoutHeaderCell(label: "age"),
 a!gridLayoutHeaderCell(label: "phone"),
 a!gridLayoutHeaderCell(label: "Email"),
 a!gridLayoutHeaderCell(label: "DOB"),
 a!gridLayoutHeaderCell(label: ""),
 a!gridLayoutHeaderCell(label: "")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(),
 a!gridLayoutColumnConfig(width: "ICON"),
 a!gridLayoutColumnConfig(width: "ICON")
 },
 rows: {
 a!forEach(
 items: local!data,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.lastName,
 saveInto: fv!item.lastName,
 readOnly: and(
 not(contains(local!readOnly, fv!index)),
 a!isNotNullOrEmpty(fv!item.lastName)
 )
 ),
 a!integerField(
 value: fv!item.age,
 saveInto: fv!item.age,
 readOnly: and(
 not(contains(local!readOnly, fv!index)),
 a!isNotNullOrEmpty(fv!item.age)
 )
 ),
 a!textField(
 value: fv!item.phone,
 saveInto: fv!item.phone,
 readOnly: and(
 not(contains(local!readOnly, fv!index)),
 a!isNotNullOrEmpty(fv!item.phone)
 )
 ),
 a!textField(
 value: fv!item.emailAddress,
 saveInto: fv!item.emailAddress,
 readOnly: and(
 not(contains(local!readOnly, fv!index)),
 a!isNotNullOrEmpty(fv!item.emailAddress)
 )
 ),
 a!dateField(
 value: fv!item.dob,
 saveInto: fv!item.dob,
 readOnly: and(
 not(contains(local!readOnly, fv!index)),
 a!isNotNullOrEmpty(fv!item.dob)
 )
 ),
 a!richTextDisplayField(
 value: if(
 and(
 not(contains(local!readOnly, fv!index)),
 a!isNotNullOrEmpty(fv!item.studentId)
 ),
 a!richTextIcon(
 icon: "pencil",
 caption: "Edit Record",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 a!save(
 local!readOnly,
 append(local!readOnly, fv!index)
 )
 }
 )
 ),
 a!richTextIcon(
 icon: "floppy-o",
 color: "POSITIVE",
 caption: "Save record",
 linkStyle: "STANDALONE",
 link: a!dynamicLink(
 saveInto: {
 if(
 a!isNullOrEmpty(fv!item.studentId),
 {},
 a!save(
 local!readOnly,
 remove(
 local!readOnly,
 wherecontains(fv!index, local!readOnly)
 )
 )
 )
 }
 )
 )
 )
 ),
 a!richTextDisplayField(
 value: {
 a!richTextIcon(
 icon: "times",
 color: "NEGATIVE",
 linkStyle: "STANDALONE",
 caption: "remove row",
 link: a!dynamicLink(
 saveInto: a!save(local!data, remove(local!data, fv!index))
 ),
 showWhen: a!isNullOrEmpty(fv!item)
 ),
 a!richTextIcon(
 icon: "trash",
 color: "NEGATIVE",
 linkStyle: "STANDALONE",
 caption: "delete ",
 link: a!dynamicLink(saveInto: {}),
 showWhen: a!isNotNullOrEmpty(fv!item.studentId)
 )
 }
 )
 }
 )
 )
 },
 addRowLink: a!dynamicLink(
 label: "Add",
 saveInto: {
 a!save(
 local!data,
 append(local!data, save!value)
 )
 }
 ),
 selectionSaveInto: {},
 validations: {},
 shadeAlternateRows: true
 )
 }
)

Mike Schmitt · Answer

I don't see any "add new row" here - and you said previously that there was an issue with "edit add new row", so can you clarify? And if you're trying to edit existing data, the example here makes it really unclear where that existing data is coming from (how it's being queried, if/how it's being transformed before shown in the grid, etc). 
 (Also, I strongly support Stefan's advice - it's almost always best to start with a smaller/simpler working example, and only add new things one-by-one and don't add anything beyond that until you fully understand the last addition and get it 100% working.)

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