Grids

Question

Hi all, 
 I am working on creating an interface which act as both editable grid and paging grid based on the rule input value in read only. 
 I am using 2 ruleinputs 
 1)cdt of array type, 
 2) readOnly :boolean, 
 If I select readonly as true, paginggrid should appear with paging info and if I select readonly as false, I should be able to add a row in the editable grid.

Can you please help how I can do this, if possible code snippet would be a great help for me. 
 
 Thanks, 
 Divya

Krishna Chaitanya · Answer

load(
 local!employees: {
 {
 id: 1,
 firstName: "John",
 lastName: "Smith"
 },
 {
 id: 2,
 firstName: "Michael",
 lastName: "Johnson"
 },
 {
 id: 3,
 firstName: "Mary",
 lastName: "Reed"
 },
 
 },
 a!formLayout(
 label: "Employees",
 contents: {
 a!gridLayout(
 totalCount: count(
 local!employees
 ),
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "First Name"
 ),
 a!gridLayoutHeaderCell(
 label: "Last Name"
 ),
 a!gridLayoutHeaderCell(
 label: ""
 )
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 3
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 3
 ),
 a!gridLayoutColumnConfig(
 width: "ICON"
 )
 },
 rows: a!forEach(
 items: local!employees,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 label: "first name " & fv!index,
 value: fv!item.firstName,
 saveInto: fv!item.firstName,
 required: true
 ),
 a!textField(
 label: "last name " & fv!index,
 value: fv!item.lastName,
 saveInto: fv!item.lastName,
 required: true
 ),
 a!imageField(
 label: "delete " & fv!index,
 images: a!documentImage(
 document: a!iconIndicator(
 "REMOVE"
 ),
 altText: "Remove Employee",
 caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
 link: a!dynamicLink(
 value: fv!index,
 saveInto: {
 a!save(
 local!employees,
 remove(
 local!employees,
 save!value
 )
 )
 }
 )
 ),
 size: "ICON"
 )
 },
 id: fv!index
 )
 ),
 addRowlink: a!dynamicLink(
 label: "Add Employee",
 value: {
 startDate: today() + 1
 },
 saveInto: {
 a!save(
 local!employees,
 append(
 local!employees,
 save!value
 )
 )
 }
 ),
 showWhen: if(
 ri!readOnly = true(),
 false(),
 true()
 )
 ),
 a!gridField(
 label: "",
 totalCount: count(
 local!employees
 ),
 columns: {
 a!gridTextColumn(
 label: "First Name",
 data: index(
 local!employees,
 "firstName",
 null
 ),
 alignment: "LEFT"
 ),
 a!gridTextColumn(
 label: "Last Name",
 data: index(
 local!employees,
 "lastName",
 null
 ),
 alignment: "LEFT"
 )
 },
 value: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(
 field: "firstName",
 ascending: true
 )
 ),
 showWhen: if(
 ri!readOnly = true(),
 true(),
 false()
 )
 )
 }
 )
) 
 
 by using show when condition based on your readOnly rule input you can achieve this requirement.

Grids

Top Replies