Editable Grid SAIL

RE: Editable Grid SAIL

sudhakaraa0001 — Sat, 03 Feb 2018 15:09:17 GMT

I could make the functionality work well by doing some changes. The following code works very well for inserts/deletes at the same time and also does not depend on the surrogate keys ( entity primary keys ) for being contiguous and match the count of rows.

=load(
a!formLayout(
label: "SAIL Example: Add,Update, or Remove Employee Data",
contents: {
a!gridLayout(
totalCount: count(ri!Employees),
headerCells: {
a!gridLayoutHeaderCell(label: "id" ),
a!gridLayoutHeaderCell(label: "First Name" ),
a!gridLayoutHeaderCell(label: "Last Name" ),
a!gridLayoutHeaderCell(label: "Department" ),
a!gridLayoutHeaderCell(label: "Title" ),
a!gridLayoutHeaderCell(label: "Phone Number" ),
a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),
/* For the "Remove" column */
a!gridLayoutHeaderCell(label: "" )
},
/* Only needed when some columns need to be narrow */
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "ICON")
},
rows: a!forEach(
items: ri!Employees,
expression: a!gridRowLayout(
contents: {
a!integerField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "id " & fv!item.id,
value: fv!item.id,
saveInto: fv!item.id,
required: true
),
/* For the First Name Column*/
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!item.id,
value: fv!item.firstName,
saveInto: fv!item.firstName,
required: true
),
/* For the Last Name Column*/
a!textField(
label: "last name " & fv!item.id,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required:true
),
/* For the Department Column*/
a!dropdownField(
label: "department " & fv!item.id,
placeholderLabel: "-- Select -- ",
choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
choiceValues: { "Corporate", "Engineering", "Finance", "HR", "Professional Services", "Sales" },
value: fv!item.department,
saveInto: fv!item.department,
required:true
),
/* For the Title Column*/
a!textField(
label: "title " & fv!item.id,
value: fv!item.title,
saveInto: fv!item.title,
required:true
),
/* For the Phone Number Column*/
a!textField(
label: "phone number " & fv!item.id,
placeholder:"123-456-7890",
value: fv!item.phoneNumber,
saveInto: fv!item.phoneNumber
),
/* For the Start Date Column*/
a!dateField(
label: "start date " & fv!item.id,
value: fv!item.startDate,
saveInto: fv!item.startDate,
required:true,
align: "RIGHT"
),
/* For the Removal Column*/
a!imageField(
label: "delete " & fv!item.id,
images: a!documentImage(
document: a!iconIndicator("REMOVE"),
altText: "Remove Employee",
caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
link: a!dynamicLink(
value: fv!item.id,
saveInto: {
a!save(ri!DeletedEmployees, append(ri!DeletedEmployees, fv!item.id)),
a!save(ri!Employees, remove(ri!Employees, wherecontains(ri!DeletedEmployees, ri!Employees.id))),
a!deleteFromDataStoreEntities(
a!entityDataIdentifiers(
entity: cons!DS_ENTITY_REF_EMPLOYEE,
identifiers: ri!DeletedEmployees
)
)
}
)
),
size: "ICON"
)
},
id: fv!item.id
)
)
,
addRowlink: a!dynamicLink(
label: "Add Employee",
/*
* For your use case, set the value to a blank instance of your CDT using
* the type constructor, e.g. type!Employee(). Only specify the field
* if you want to give it a default value e.g. startDate: today()+1.
*/
value: 'type!{urn:com:appian:types}Employee'(),
saveInto: {
a!save(ri!Employees, append(ri!Employees,save!value))
}
)
)
},
buttons: a!buttonLayout(
primaryButtons: a!buttonWidgetSubmit(
label: "Submit",
saveInto:{
a!save(ri!DeletedEmployees, {}),
a!writeToDataStoreEntity(
dataStoreEntity: cons!DS_ENTITY_REF_EMPLOYEE,
valueToStore: ri!Employees
)
}
)
)
)
)

RE: Editable Grid SAIL

sudhakaraa0001 — Sat, 03 Feb 2018 14:59:44 GMT

I could make this work with the following code. I had to replace fv!index with fv!item and remove deleted ids from employees at submit time. I am working with a table where the surrogate keys are arbitrary and count does not match with next id. There seems to be a validation in REMOVE wherein it does not allow me to delete a row whose id does not math with the count of items in the grid. Only draw back is that user would not see the deleted row going out of screen till the period of pressing SUBMIT button. Is there any refresh function which could be called to update the grid?

=load(
a!formLayout(
label: "SAIL Example: Add,Update, or Remove Employee Data",
contents: {
a!gridLayout(
totalCount: count(ri!Employees),
headerCells: {
a!gridLayoutHeaderCell(label: "id" ),
a!gridLayoutHeaderCell(label: "First Name" ),
a!gridLayoutHeaderCell(label: "Last Name" ),
a!gridLayoutHeaderCell(label: "Department" ),
a!gridLayoutHeaderCell(label: "Title" ),
a!gridLayoutHeaderCell(label: "Phone Number" ),
a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),
/* For the "Remove" column */
a!gridLayoutHeaderCell(label: "" )
},
/* Only needed when some columns need to be narrow */
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "ICON")
},
rows: a!forEach(
items: ri!Employees,
expression: a!gridRowLayout(
contents: {
a!integerField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "id " & fv!item.id,
value: fv!item.id,
saveInto: fv!item.id,
required: true
),
/* For the First Name Column*/
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!item.id,
value: fv!item.firstName,
saveInto: fv!item.firstName,
required: true
),
/* For the Last Name Column*/
a!textField(
label: "last name " & fv!item.id,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required:true
),
/* For the Department Column*/
a!dropdownField(
label: "department " & fv!item.id,
placeholderLabel: "-- Select -- ",
choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
choiceValues: { "Corporate", "Engineering", "Finance", "HR", "Professional Services", "Sales" },
value: fv!item.department,
saveInto: fv!item.department,
required:true
),
/* For the Title Column*/
a!textField(
label: "title " & fv!item.id,
value: fv!item.title,
saveInto: fv!item.title,
required:true
),
/* For the Phone Number Column*/
a!textField(
label: "phone number " & fv!item.id,
placeholder:"123-456-7890",
value: fv!item.phoneNumber,
saveInto: fv!item.phoneNumber
),
/* For the Start Date Column*/
a!dateField(
label: "start date " & fv!item.id,
value: fv!item.startDate,
saveInto: fv!item.startDate,
required:true,
align: "RIGHT"
),
/* For the Removal Column*/
a!imageField(
label: "delete " & fv!item.id,
images: a!documentImage(
document: a!iconIndicator("REMOVE"),
altText: "Remove Employee",
caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
link: a!dynamicLink(
value: fv!item.id,
saveInto: {
a!save(ri!DeletedEmployees, append(ri!DeletedEmployees, fv!item.id)),
a!deleteFromDataStoreEntities(
a!entityDataIdentifiers(
entity: cons!DS_ENTITY_REF_EMPLOYEE,
identifiers: ri!DeletedEmployees
)
)
}
)
),
size: "ICON"
)
},
id: fv!item.id
)
)
,
addRowlink: a!dynamicLink(
label: "Add Employee",
value: 'type!{urn:com:appian:types}Employee'(),
saveInto: {
a!save(ri!Employees, append(ri!Employees,save!value))
}
)
)
},
buttons: a!buttonLayout(
primaryButtons: a!buttonWidgetSubmit(
label: "Submit",
saveInto:{ a!save(ri!Employees, remove(ri!Employees, wherecontains(ri!DeletedEmployees, ri!Employees.id))),
a!save(ri!DeletedEmployees, {}),
a!writeToDataStoreEntity(
dataStoreEntity: cons!DS_ENTITY_REF_EMPLOYEE,
valueToStore: ri!Employees
)
}
)
)
)
)

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 18:22:33 GMT

I tried to make the inline editable grid work to log the correct primary ids. What I understood so far is that 1) The editable fv.index is being used for validations and also fv.item.id is actually the next row id instead of the one being deleted. Also, it seems there may be some dependency on primary ids to be sequential without any deletes. Who would be the guru on this subject to discuss on the right code pattern that works as expected?

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 13:15:36 GMT

The following code worked for me in doing both insert and delete at the same time. I used with function which refreshed after a delete has happened which comes just after the "X" sign is activated on a record. It actually mimics doing insert and deletes at separate time periods which most probably is appropriate for editable grids. I am still figuring out on why the row.id is not being logged properly.

=load(
with(
a!formLayout(
label: "SAIL Example: Add,Update, or Remove Employee Data",
contents: {
a!gridLayout(
totalCount: count(ri!Employees),
headerCells: {
a!gridLayoutHeaderCell(label: "id" ),
a!gridLayoutHeaderCell(label: "First Name" ),
a!gridLayoutHeaderCell(label: "Last Name" ),
a!gridLayoutHeaderCell(label: "Department" ),
a!gridLayoutHeaderCell(label: "Title" ),
a!gridLayoutHeaderCell(label: "Phone Number" ),
a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),
/* For the "Remove" column */
a!gridLayoutHeaderCell(label: "" )
},
/* Only needed when some columns need to be narrow */
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "ICON")
},
rows: a!forEach(
items: ri!Employees,
expression: a!gridRowLayout(
contents: {
a!integerField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!index,
value: fv!item.id,
saveInto: fv!item.id,
required: true
),
/* For the First Name Column*/
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!index,
value: fv!item.firstName,
saveInto: fv!item.firstName,
required: true
),
/* For the Last Name Column*/
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required:true
),
/* For the Department Column*/
a!dropdownField(
label: "department " & fv!index,
placeholderLabel: "-- Select -- ",
choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
choiceValues: { "Corporate", "Engineering", "Finance", "HR", "Professional Services", "Sales" },
value: fv!item.department,
saveInto: fv!item.department,
required:true
),
/* For the Title Column*/
a!textField(
label: "title " & fv!index,
value: fv!item.title,
saveInto: fv!item.title,
required:true
),
/* For the Phone Number Column*/
a!textField(
label: "phone number " & fv!index,
placeholder:"123-456-7890",
value: fv!item.phoneNumber,
saveInto: fv!item.phoneNumber
),
/* For the Start Date Column*/
a!dateField(
label: "start date " & fv!index,
value: fv!item.startDate,
saveInto: fv!item.startDate,
required:true,
align: "RIGHT"
),
/* For the Removal Column*/
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(ri!Employees, remove(ri!Employees, save!value)),
a!save(ri!DeletedEmployees, append(ri!DeletedEmployees, fv!item.id)),
a!deleteFromDataStoreEntities(
a!entityDataIdentifiers(
entity: cons!DS_ENTITY_REF_EMPLOYEE,
identifiers: ri!DeletedEmployees
)
)
}
)
),
size: "ICON"
)
},
id: fv!index
)
)
,
addRowlink: a!dynamicLink(
label: "Add Employee",
/*
* For your use case, set the value to a blank instance of your CDT using
* the type constructor, e.g. type!Employee(). Only specify the field
* if you want to give it a default value e.g. startDate: today()+1.
*/
value: 'type!{urn:com:appian:types}Employee'(),
saveInto: {
a!save(ri!Employees, append(ri!Employees,save!value))
}
)
)
},
buttons: a!buttonLayout(
primaryButtons: a!buttonWidgetSubmit(
label: "Submit",
saveInto:{ a!writeToDataStoreEntity(
dataStoreEntity: cons!DS_ENTITY_REF_EMPLOYEE,
valueToStore: ri!Employees
)
}
)
)
)
)
)

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 12:11:41 GMT

After a little investigation, I could get the deletion done using the following syntax. a!deleteFromDataStoreEntities(
a!entityDataIdentifiers(
entity: cons!DS_ENTITY_REF_EMPLOYEE,
identifiers: ri!DeletedEmployees
)
). I can get the SAIL to do both insert and delete, but, deletes are getting added back as new rows which I am still
investigating. Moreover, the row.id (primary id) being logged is not the correct one. It seems there is something internal reorganization
of primary keys that I would have to skim out in order to make the pattern work appropriate. Thanks for your help. I had to use a!entityDataIdentifiers for the deletion to work.

RE: Editable Grid SAIL

TJ — Fri, 02 Feb 2018 12:05:42 GMT

Can you please try replacing your code with this piece of code :

a!deleteFromDataStoreEntities(
dataToDelete: {
entity: cons!DS_ENTITY_REF_EMPLOYEE,
identifiers: ri!DeletedEmployees
},
onSuccess: "",
onError: ""
)

Also verify your DeletedEmployees variable type and do check whether it is storing correct value.

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 11:27:09 GMT

How do I use it in DB smart service? I essentially would like my data set bound to the grid with resulting rows after additions/deletions inline to be merged with database table(s). Could you please point me to documentation on this functionality?

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 11:25:12 GMT

Editable grid functionality is to read the data from a CDT and allow adds/deletes inline. So, in may case, my grid shows 20 rows having returned from database. I delete one of it. I can submit the transaction to DB first and then add. But, decided to add a new row before hitting submit. I should end up essentially 20 rows in database, and, I should have a new row added and a old row removed. So, in my example, I deleted rowid 56 and added rowid 144 with new information. Hope that explains.

RE: Editable Grid SAIL

TJ — Fri, 02 Feb 2018 11:20:49 GMT

Yaa we have merge function available in Appian.

RE: Editable Grid SAIL

TJ — Fri, 02 Feb 2018 11:19:20 GMT

I suppose you are not entering data in DB first and directly trying to delete but till the time data is not entered in DB how can we delete that data? Correct me if I am missing anything.

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 11:17:22 GMT

Is there any merge kind of functionality available? I would like to see my code as lean as possible. Thanks for your help.

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 11:15:17 GMT

I do have the fv!item.id in grid layout. The id shows up properly for the data set. That is how I could determine fv!item.id -1 as the correct row id to be sent as primary key to be deleted using smart service. In either case, I am most interested in knowing on why error is coming up as " the deletedEmployees" array is empty whereas I do see on the screen my ids in the array.

RE: Editable Grid SAIL

arjunm922 — Fri, 02 Feb 2018 11:10:55 GMT

Hey, sorry I didnt check, but I dont think we can not* do both write to data store smart service and Delete from data store smart service in the same interface. Can you try triggering a process using a!startProcess and carry delete/add events there.

RE: Editable Grid SAIL

sudhakaraa0001 — Fri, 02 Feb 2018 11:08:01 GMT

There is a removal link in the SAIL which I thought of making it work. I am also trying to parallel the analogy of how I would have done using dataset merging in other programming languages. Is there any merge CDT that would have merged both inserts and deletes at the same time? I am trying to add one row and delete another row. On submit, I am expecting either one smart service or two, one for inserts and the other deletes, take care of the commits properly. Hope that clarifies.

RE: Editable Grid SAIL

arjunm922 — Fri, 02 Feb 2018 11:05:02 GMT

Hi,

Can you try putting "id" in your gridLayout() as employee.id/fv!item.id. This should store the IDs you want to delete and there shouldnt be a +1 issue.

RE: Editable Grid SAIL

TJ — Fri, 02 Feb 2018 05:40:18 GMT

I am not sure whether you want to delete data from database, that has been added previously or you are creating and that time only deleting it. Can you please clear it.

RE: Editable Grid SAIL

sudhakaraa0001 — Thu, 01 Feb 2018 20:11:48 GMT

That is what I have in my code. It gets the next rows primary key id. If I change it to a!save(ri!DeletedEmployees, append(ri!DeletedEmployees, fv!item.id -1 )) then I get the correct row primary key id.

RE: Editable Grid SAIL

Nick Vigilante — Thu, 01 Feb 2018 17:55:04 GMT

Can you use save!value instead of fv!item.id here?

a!save(ri!DeletedEmployees, append(ri!DeletedEmployees, fv!item.id))