Saving user input values in cdts from the editable grid

Question

Hi, 
 I have editable grid having two columns one is readonly field for showing label and in the second column the user will enter the data. The data for this columns is getting from a local variable . The user can delete the rows and he add row upto 5 rows. 
 Now I have a cdt with fields like r1, r2, r3, r4, r5. Now I want to map the data entered by the user to cdt.

Reggie · Answer

You can just a!save() into the CDT with the local! values like below:

a!save(ri!CDT.field, index(local!data, "fieldName", null)) <-- you may need an additional level of indexing if the data is nested and/or use type casting if the data types would differ

You could also build an expression rule, that would be applied over using apply(), to construct the data into the given CDT and save it all in one shot (assuming this is when they submit the form, in a 'saveInto', use the examples below:

--Rule being used/referenced--
a!save(
ri!cdtName,
apply(
rule!AppName_buildCDTName(_),
local!varName /* <---This is assuming you're saving all the user's entries into a single variable */
)

--Within rule!AppName_buildCDTName--
'type!{namespace}CDTName'(
r1:index(ri!varName, "fieldName", null),
r2:index(ri!varName, "fieldName", null),
r3:index(ri!varName, "fieldName", null),
r4:index(ri!varName, "fieldName", null),
r5:index(ri!varName, "fieldName", null)
)

Note: Don't forget null checks on the a!save()

You may also have to do some tinkering with the above code, but the options above should generally give you what you want. If you want a more precise answer, please provide the data structure of your local variable after the user has saved X entries.

Mike Schmitt · Answer

This is a fairly straightforward case for an editable grid. If you're using 17.2 or above, you can also do it without even needing to declare a sub-rule (at least for starters). See below example. 
 load(
 
 local!data: {
 {
 id: 1,
 label: "r1",
 value: ""
 },
 {
 id: 2,
 label: "r2",
 value: ""
 }
 },
 
 a!sectionLayout(
 label: "Test Editable Grid",
 contents: {
 a!paragraphField(
 label: "DEBUG",
 showWhen: false(),
 value: local!data,
 disabled: true()
 ),
 
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(label: "Label"),
 a!gridLayoutHeaderCell(label: "Value")
 },
 rows: a!forEach(
 local!data,
 a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.label,
 readOnly: true()
 ),
 a!textField(
 value: fv!item.value,
 saveInto: fv!item.value
 )
 }
 )
 ),
 addRowLink: if(
 length(local!data) < 5,
 a!dynamicLink(
 label: "Add Row",
 saveInto: a!save(
 local!data,
 append(
 local!data,
 {
 id: max(local!data.id)+1,
 label: "r" & max(local!data.id)+1,
 value: null()
 }
 )
 )
 ),
 null()
 )
 )
 }
 )
)

Mike Schmitt · Answer

Interesting use case. Some follow-up questions from me: 
 
 What is the reasoning behind making the Order Number box editable only when the row is selected? How do you plan to handle conflicts i.e. a user changes the "1" from your screenshot to "2", even though there already is a "2"? 
 Have you considered implementing "move up / move down" links in their own column? I've done this before and it's fairly easy - the "move" link for any particular row can automatically handling switching the "order number" values in the background with the preceding / following row (depending on which one is clicked), and removes some manual hassle from the user. Now that we can use RichTextIcons, I believe you can have both in a single column if you want. 
 Can you post some sample code?

Mike Schmitt · Answer

BTW, I have reproduced a partially-simplified version of your use case using my own new code. In the case of this sample code it seems to work when I enter order numbers. Please try this out and see if it helps you with your specific implementation. 
 load(
 local!groceryList: {
 {
 id: 1,
 name: "Milk",
 orderNum: null(),
 category: "Food"
 },
 {
 id: 2,
 name: "Tide Pods",
 orderNum: null(),
 category: "Cleaning Supplies"
 },
 {
 id: 3,
 name: "Eggs",
 orderNum: null(),
 category: "Food"
 },
 {
 id: 4,
 name: "Paper Towels",
 orderNum: null(),
 category: "Cleaning Supplies"
 }
 },
 local!categories: union(local!grocerylist.category, local!groceryList.category),
 local!selectedItems: {},
 
 a!sectionLayout(
 contents: {
 
 a!forEach(
 local!categories,
 
 with(
 local!currentCategory: fv!item,
 a!gridLayout(
 label: fv!item,
 headerCells: {
 a!gridLayoutHeaderCell(label: "Item"),
 a!gridLayoutHeaderCell(label: "Order")
 },
 selectable: true(),
 selectionSaveInto: {
 local!selectedItems
 },
 selectionValue: local!selectedItems,
 /*selectionStyle: "ROW_HIGHLIGHT",*/
 
 rows: a!forEach(
 local!groceryList,
 if(
 fv!item.category = local!currentCategory,
 a!gridRowLayout(
 id: fv!item.id,
 contents: {
 a!richTextDisplayField(
 label: "Item Name Display",
 value: a!richTextItem(
 text: fv!item.name
 )
 ),
 a!textField(
 label: "Order Number Editor",
 value: fv!item.orderNum,
 saveInto: {
 fv!item.orderNum
 },
 disabled: not(
 contains(
 local!selectedItems,
 fv!item.id
 )
 )
 )
 }
 ),
 {}
 )
 )
 )
 )
 ),
 
 
 a!boxLayout(
 label: "DEBUG",
 style: "INFO",
 isCollapsible: true(),
 isInitiallyCollapsed: true(),
 contents: {
 a!paragraphField(
 value: "Selections: " & local!selectedItems & char(10) &
 "CDT Data: " & local!groceryList
 )
 }
 )
 }
 )
)

Mike Schmitt · Answer

Did you change anything from my example? I have to double check but it seemed to work for me no matter which section I selected items from. What happens wrong exactly? Also can you confirm what Appian version you're on?

Saving user input values in cdts from the editable grid

Top Replies