Saving user input values in cdts from the editable grid

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Mon, 15 Apr 2019 13:10:06 GMT

Yeah, it turns out things get a little more tricky if you start using the "select all" checkboxes, which I was not originally testing as I was selecting individual rows by default.

Please note that using the "select all" checkbox in one grid seems to deselect all items from the other grid as they both use a shared selected items list. But manually checking individual items, it should work fine to select different items from different sections. The following revision of my original code from above does some more careful typecasting on the indexes to avoid the error message you had reported even when the Select All boxes are utilized.

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: tointeger({}),
  
  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: {
              a!save(
                local!selectedItems,
                a!forEach(
                  save!value,
                  if(isnull(fv!item), {}, fv!item)
                )
              )
            },
            selectionValue: local!selectedItems,
            /*selectionStyle: "ROW_HIGHLIGHT",*/
            
            rows: a!forEach(
              local!groceryList,
              if(
                fv!item.category = local!currentCategory,
                a!gridRowLayout(
                  id: tointeger(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(
                          tointeger(local!selectedItems),
                          tointeger(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
          )
        }
      )
    }
  )
)

RE: Saving user input values in cdts from the editable grid

chandhinir — Mon, 15 Apr 2019 07:51:24 GMT

Thanks Reggie!

RE: Saving user input values in cdts from the editable grid

Reggie — Sun, 14 Apr 2019 09:13:02 GMT

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(
                            tointeger(local!selectedItems),
                            tointeger(fv!item.id)
                          )
                        )
                      )
                    }
                    ),
                  {}
                )
              )
            ),
            a!buttonLayout(
              secondaryButtons: {
                a!buttonWidget(
                  label:"Select All", 
                  saveInto: a!save(
                    local!selectedItems, 
                    append(
                      local!selectedItems,
                      index(
                        local!groceryList.id, 
                        wherecontains(local!currentCategory,touniformstring(property(local!groceryList, "category", {}))), 
                        {}
                      )
                    )
                  )
                ), 
                a!buttonWidget(
                  label:"Deselect All", 
                  saveInto: a!save(
                    local!selectedItems, 
                    remove(
                      local!selectedItems,
                      wherecontains(
                        index(
                          local!groceryList.id, 
                          wherecontains(local!currentCategory,touniformstring(property(local!groceryList, "category", {}))), 
                          {}
                        ), 
                        local!selectedItems
                      )
                    )
                  )
                )
              }
            )
          }
        )
      ),
      a!boxLayout(
        label: "DEBUG",
        style: "INFO",
        isCollapsible: true(),
        isInitiallyCollapsed: true(),
        contents: {
          a!paragraphField(
            value: "Selections: " & local!selectedItems & char(10) &
              "CDT Data: " & local!groceryList
          )
        }
      )
    }
  )
)

chandhinir One alternative solution to this issue is to add & change the selectionStyle to 'ROW_HIGHLIGHT" and add SELECT/DE-SELECT ALL buttons below the grid(s) using the design Mike has already provided (which includes my changes - see code above). With the addition of the buttons, Mike's solution worked fine for me.

It may also be helpful to add instructions so that users are made aware to literally select the rows they want to enable.

I didn't see any viable solutions (in terms of complexity) that would work out when the checkbox to select all rows is de-selected, so I figured the above solution would be fine.

One quirk you'd have to address though:

1. When the user accidentally clicks the select all button but all the available rows, for the given grid, have already been selected (you'll understand if you refer to the debug field)

Note: Just so you're aware, I am also using 18.4

RE: Saving user input values in cdts from the editable grid

chandhinir — Sun, 14 Apr 2019 02:34:28 GMT

I am on Appian version 18.4.
I was getting this error ( Expression evaluation error at function 'contains' [line 67]: Invalid types, can only act on data of the same type (Any Type, Number (Integer)). So did casting.

There were two sections Food and Cleaning supplies.
First I selected all items under food Section and enter the order no .When I selected the second section Cleaning supplies , the selection made in Food section lost and only the selection in second grid retained.

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Sat, 13 Apr 2019 14:43:13 GMT

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?

RE: Saving user input values in cdts from the editable grid

chandhinir — Sat, 13 Apr 2019 14:16:57 GMT

Hi Mike,

Thanks!
I tried the new code but grid selection is not retained when i select multiple sections.

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Fri, 12 Apr 2019 18:25:32 GMT

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
          )
        }
      )
    }
  )
)

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Fri, 12 Apr 2019 17:38:23 GMT

Are you saying questions won't have an Order value by default? Why?

RE: Saving user input values in cdts from the editable grid

chandhinir — Fri, 12 Apr 2019 16:49:12 GMT

load(
  local!selectedSections: {
    {
      "sectionId": 1,
      "sectionName": "Section1"
    },
    {
      "sectionId": 2,
      "sectionName": "Section2"
    }
  },
  local!selectedSectionQuestions: {
    {
      "pId": 1,
      "question": "e1",
      "orderNo": null,
      "refSectionId": 1
    },
    {
      "pId": 2,
      "question": "e2",
      "orderNo": null,
      "refSectionId": 1
    },
    {
      "pId": 3,
      "question": "p1",
      "orderNo": null,
      "refSectionId": 2
    },
    {
      "pId": 4,
      "question": "p2",
      "orderNo": null,
      "refSectionId": 2
    },
    {
      "pId": 5,
      "question": "p3",
      "orderNo": null,
      "refSectionId": 2
    }
  },
  local!selectedQuestions:type!question_cdt(),
  with(
    {a!forEach(
      items: local!selectedSections,
      expression: rule!TEST_uiDisplayQuestion(
        questions: local!selectedSectionQuestions,
        showWhen: 1,
        sections: fv!item,
        selectedSectionQuestions: local!selectedQuestions
      )
    )}
  )
)
--------------
TEST_uiDisplayQuestion

load(
  local!questions: index(
    ri!questions,
    wherecontains(
      tointeger(
        ri!sections.sectionId
      ),
      tointeger(
        ri!questions.refSectionId
      )
    ),
    {}
  ),
  local!sequence: a!forEach(
    items: local!questions,
    expression: null
  ),
  local!selectedIndices: tointeger(
    {}
  ),
  {
    a!sectionLayout(
      label: ri!sections.sectionName,
      contents: {
        a!gridLayout(
          label: "",
          headerCells: {
            a!gridLayoutHeaderCell(
              label: "Available Questions"
            ),
            a!gridLayoutHeaderCell(
              label: "Order No"
            )
          },
          columnConfigs: {
            a!gridLayoutColumnConfig(
              width: "DISTRIBUTE",
              weight: 1
            ),
            a!gridLayoutColumnConfig(
              width: "NARROW"
            )
          },
          rows: a!forEach(
            items: local!questions,
            expression: a!gridRowLayout(
              id: fv!item.pId,
              contents: {
                a!paragraphField(
                  label: "available questions",
                  labelPosition: "ABOVE",
                  value: fv!item.question,
                  readOnly: true
                ),
                a!integerField(
                  label: "orderNo",
                  labelPosition: "ABOVE",
                  value: fv!item.orderNo,
                  saveInto: {
                    fv!item.orderNo,
                    local!sequence[fv!index]
                  },
                  disabled: rule!APN_isBlank(
                    wherecontains(
                      tointeger(
                        fv!item.pId
                      ),
                      tointeger(
                        local!selectedIndices
                      )
                    )
                  ),
                  required: if(
                    contains(
                      tointeger(
                        local!selectedIndices
                      ),
                      wherecontains(
                        local!selectedIndices,
                        tointeger(
                          fv!item.pId
                        )
                      )
                    ),
                    true,
                    false
                  )
                )
              }
            )
          ),
          selectionValue: local!selectedIndices,
          selectionSaveInto: {
            local!selectedIndices,
            a!save(
              local!selectedIndices,
              reject(
                fn!isnull(
                  _
                ),
                save!value
              )
            ),
            a!forEach(
              items: local!questions,
              expression: {
                a!save(
                  local!sequence[wherecontains(
                    tointeger(
                      fv!item.pId
                    ), tointeger(
                      local!selectedIndices
                    )
                  )],
                  if(
                    contains(
                      tointeger(
                        local!selectedIndices
                      ),
                      wherecontains(
                        tointeger(
                          fv!item.pId
                        ),
                        tointeger(
                          local!selectedIndices
                        )
                      )
                    ),
                    local!sequence[wherecontains(
                      tointeger(
                        fv!item.pId
                      ), tointeger(
                        local!selectedIndices
                      )
                    )],
                    null
                  )
                )
              }
            ),
            a!save(
              ri!selectedQuestions,
              index(
                local!questions,
                wherecontains(
                  tointeger(
                    local!selectedIndices
                  ),
                  tointeger(
                    local!questions.pId
                  )
                ),
                {}
              )
            )
          },
          selectable: true,
          selectionRequired: true
        )
      }
    )
  }
)

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Fri, 12 Apr 2019 16:44:10 GMT

Thanks for your reply - before I dig into your code I have a suggestion/request - maybe you could edit your post and put your sample code in a Code box - use the "insert" tool on the toolbar of the editor then choose "insert code", and paste your code there instead - that allows it to maintain formatting as well as not extending your comment window to extreme lengths. Thanks!

RE: Saving user input values in cdts from the editable grid

chandhinir — Fri, 12 Apr 2019 16:32:32 GMT

Hi Mike,

Thanks for your reply. Please find the answers below:

Reason for order no: There will be a chance of having more questions related to same section.if i open up the order no for editing by default, might be difficult to identify which questions the user has selected.
Only for the selected question,I need order no to be entered.same order no conflicts will be handled through validations in the order no field.
I have not tried this approach.
Can you post some sample code?

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Fri, 12 Apr 2019 16:04:01 GMT

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?

RE: Saving user input values in cdts from the editable grid

chandhinir — Fri, 12 Apr 2019 15:56:41 GMT

Hi,

My requirement is to create dynamic sections with grid layout based on the dropdown selection.
Columns in grid:
- Question(Read Only)
- Order No (Editable) - On load ,the order no field is disabled.
Once the row is selected, the order no field will be enabled and the value will be saved in cdt variable.

I am facing issues when saving the order no values into cdt. Each row's order number field value overwrites when other row is selected.

Thanks in advance!

RE: Saving user input values in cdts from the editable grid

Mike Schmitt — Mon, 13 Nov 2017 16:11:15 GMT

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()
        )
      )
    }
  )
)

RE: Saving user input values in cdts from the editable grid

santoshd378 — Mon, 13 Nov 2017 05:41:34 GMT

Anyone got solution for this?

RE: Saving user input values in cdts from the editable grid

santoshd378 — Mon, 13 Nov 2017 00:39:41 GMT

Yes, id is an identifier,
In my editable grid there will be two columns, in 1st column just label will be displayed and in second column a text box will be provided to save the value.

RE: Saving user input values in cdts from the editable grid

Reggie — Sun, 12 Nov 2017 18:00:47 GMT

Santosh, could you tell me if my assumptions below are correct?

1. ID is just an auto-generated number which would serve as the identifier in a grid
2. A label is just context to the value. In other words, the label tells the user what the value is for.
3. Value is provided by the user which could be anything(?)

RE: Saving user input values in cdts from the editable grid

santoshd378 — Sun, 12 Nov 2017 06:20:02 GMT

my local variable:

local!data: {

{

id: 1,

label: "r1",

value: ""

{

id: 2,

label: "r2",

value: ""

}

The data entered by user will be inserted into value parameter of the local variable.

And eventually the data need to be entered to particular field of cdt.

Is it possible or can anyone suggest what should be the structure of cdt to save the data.

RE: Saving user input values in cdts from the editable grid

Reggie — Sat, 11 Nov 2017 16:42:08 GMT

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.