Combination of multi dropdown and editable grid

RE: Combination of multi dropdown and editable grid

anushas0002 — Wed, 20 Jun 2018 10:25:37 GMT

Hi Vimal, I tried this code inside a foreach loop of editable grid and is throwing below error. Could you please help understand the issue and fix?

Part of the Code is below:

        rows: a!forEach(
          items: local!sources,
          expression: {
            a!gridRowLayout(
              id: fv!index,
              contents: {
                a!textField(
                  value: local!sources[fv!index].DisplayName,
                  saveInto: local!sources[fv!index].DisplayName,
                  refreshafter: "UNFOCUS"
                ),
                a!textField(
                  value: local!sources[fv!index].FullName,
                  saveInto: local!sources[fv!index].FullName,
                  refreshafter: "UNFOCUS"
                ),
                a!textField(
                  value: local!sources[fv!index].Description,
                  saveInto: local!sources[fv!index].Description,
                  refreshafter: "UNFOCUS"
                ),
                a!multipleDropdownField(
                  label: "",
                  choiceLabels: local!sources[fv!index].Technologies.Name,
                  choiceValues: local!sources[fv!index].Technologies.Id,
                  value: { local!sources[fv!index].Technologies.Id },
                  saveInto:                         a!save(
                          local!sources[fv!index].Technologies,
                          a!forEach(
                            items: save!value,
                            expression: {
                              Id: fv!index,
                              DisplayValue: displayvalue(
                                fv!index,
                                local!sources[fv!item].Technologies.Id,
                                local!sources[fv!item].Technologies.Name,
                                null
                              )
                            }
                          )
                        )
                ),
                a!imageField(
                  label: "",
                  images: a!documentImage(
                    document: a!iconIndicator(
                      "REMOVE"
                    ),
                    altText: "Remove Source",
                    caption: "Remove " & fv!item.DisplayName,
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        if(
                          isnull(
                            fv!item.id
                          ),
                          {},
                          a!save(
                            local!deletedSourceIds,
                            append(
                              local!deletedSourceIds,
                              fv!item.id
                            )
                          )
                        ),
                        a!save(
                          local!sources,
                          remove(
                            local!sources,
                            save!value
                          )
                        ),
                        a!deleteFromDataStoreEntities(
                          {
                            entity: cons!CONS_CoE_SourcesEntity,
                            identifiers: local!deletedSourceIds
                          },
                          "Deleting source.",
                          "Source Deleted",
                          "Unable to Delete source."
                        )
                      }
                    )
                  ),
                  size: "ICON"
                )
              }
            )
          }
        ),
        selectable: false,
        addRowLink: a!dynamicLink(
          label: "Add New Source(s)",
          value: local!sources,
          saveInto: {
            a!save(
              local!sources,
              append(
                local!sources,
                'type!{urn:com:appian:types}Sources'(
                  "",
                  "",
                  ""
                )
              )
            )
          }
        )
      )
    },

RE: Combination of multi dropdown and editable grid

anushas0002 — Wed, 20 Jun 2018 08:40:39 GMT

Thank You Vimal. This fixed the issue and working as expected.

RE: Combination of multi dropdown and editable grid

vimalkumars — Wed, 20 Jun 2018 00:53:22 GMT

Hi anushas0002,

Your MultipleDropDownField SaveInto looks like below

saveInto: a!save(
			ri!TechnologySelected.Source,
			save!value
		)

save!value in the multiple dropdown holds the value of choiceValues which is actually local!sources.Id.

I think you want to store both Source Id and DisplayName in the variable. If yes, you can try the below code

saveInto: {
			a!save(
			  ri!TechnologySelected.Source,
			  a!forEach(
				items: save!value,
				expression: {
				  Id: fv!item,
				  DisplayValue: displayvalue(
					fv!item,
					local!sources.Id,
					local!sources.DisplayName,
					null
				  )
				}
			  )
			)
		}

RE: Combination of multi dropdown and editable grid

anushas0002 — Tue, 19 Jun 2018 13:48:41 GMT

Hi Arun,

i am trying something similar as shown in below screen.

Scenario: Populate data from Database as preselected values in multi drop down which is working fine as shown in below image. Now, need to save new value if user changes the selected values in multi drop down. Upon un-selecting any one value of preselected values, it is immediately unselecting both the preselected values and changes the Source object to empty array [] as you can see in another screen below.

Please advise on how to prepopulate multiple selected values and also be able save new values in the same rule input to update values in DB.

Regards,

Anusha

RE: Combination of multi dropdown and editable grid

kiranj — Thu, 30 Nov 2017 04:10:27 GMT

yes Arun i did not see the total conversation i have seen your code thanks bro

RE: Combination of multi dropdown and editable grid

Arun Theja Muthyalu — Wed, 29 Nov 2017 08:33:35 GMT

Hi kiranj0001,

The code that you have shared looks fine. But the only thing is that it wouldn't hold the changes that you make to the data in the editable grid. The other practioner santoshd378 requirement was that the data shouldn't be gone after you make changes. Please refer to my suggested answer if possible. Cheers.

Thank you,
Arun

RE: Combination of multi dropdown and editable grid

kiranj — Wed, 29 Nov 2017 05:59:23 GMT

Hi santhos,

load(
local!selectedDepartment,
with(
a!formLayout(
contents: {
a!multipleDropdownField(
label: "Select Department",
placeholder: "Select.....",
choiceLabels: {
"HR",
"IT",
"ADMIN"
},
choiceValues: {
"HR",
"IT",
"ADMIN"
},
value: local!selectedDepartment,
saveInto: local!selectedDepartment
),
a!gridLayout(
showWhen: not(
isnull(
local!selectedDepartment
)
),
label: "Department Information",
headerCells: {

a!gridLayoutHeaderCell(
label: "Department"
)

},
rows: a!forEach(
items: local!selectedDepartment,
expression: a!gridRowLayout(
id: fv!index,
contents: {
a!textField(
value:fv!item
)
}
)
)
)
}
))
)

RE: Combination of multi dropdown and editable grid

Arun Theja Muthyalu — Wed, 22 Nov 2017 16:44:02 GMT

You can actually call a rule which would feed data in to local!editableGridData in the sample code that I have shared.

PFA updated sample code which should work for your use case.

community.appian.com/.../Multi-Select-Dropdown-_2D00_-Editable-Grid.txt

But in the sample code that I have attached, the changes in the selected row(s) would only be reflected when you click on the Save Changes button.

However you can also save the changes on focus out of every field(then and there) in the grid after making changes. Please uncomment the commented portion in the attached sample code for this behavior.

Hope this helps. :)

RE: Combination of multi dropdown and editable grid

santoshd378 — Wed, 22 Nov 2017 15:53:18 GMT

I am fetching the data from db and the data will be shown up the drop down field,

Now my use case is whenever the user selects the value in the dropdown, the row will be populated in the grid with one column data will be the value from dropdown. And the remaining columns will be editable.

Now when a user selects a value in dropdown a row will be populated(it was done) and in remaining fields the data will be entered by user. Now when he deselects the value in dropdown the row need to be hidden but the data need not be flushed. When he selects the same deselected value the row with same data need to be shown.

RE: Combination of multi dropdown and editable grid

Arun Theja Muthyalu — Wed, 22 Nov 2017 15:40:40 GMT

Hi santoshd378,

PFA sample code. Hope this helps.

load(
  local!multiSelectedValues,
  local!editableGridData: {
    {
      employeeId: 1,
      employeeName: "ABC"
    },
    {
      employeeId: 2,
      employeeName: "XYZ"
    },
    {
      employeeId: 3,
      employeeName: "PQR"
    }
  },
  local!filteredData,
  a!sectionLayout(
    contents: {
      a!multipleDropdownField(
        label: "Multi Select Dropdown",
        choiceLabels: index(
          local!editableGridData,
          "employeeName",
          {}
        ),
        choiceValues: index(
          local!editableGridData,
          "employeeId",
          {}
        ),
        value: local!multiSelectedValues,
        saveInto: {
          local!multiSelectedValues,
          a!save(
            local!filteredData,
            index(
              local!editableGridData,
              wherecontains(
                local!multiSelectedValues,
                index(
                  local!editableGridData,
                  "employeeId",
                  {}
                )
              ),
              {}
            )
          )
        }
      ),
      a!gridLayout(
        label: "Editable Grid",
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "Employee Id"
          ),
          a!gridLayoutHeaderCell(
            label: "Employee Name"
          )
        },
        rows: a!forEach(
          items: local!filteredData,
          expression: a!gridRowLayout(
            id: fv!index,
            contents: {
              a!integerField(
                readOnly: true(),
                value: fv!item.employeeId,
                saveInto: fv!item.employeeId
              ),
              a!textField(
                value: fv!item.employeeName,
                saveInto: fv!item.employeeName
              )
            }
          )
        )
      )
    }
  )
)

Thank you,

Arun

RE: Combination of multi dropdown and editable grid

Puspendu Pal — Wed, 22 Nov 2017 14:45:02 GMT

Hello,

Are you facing any issues? It should be easily possible
Steps
1) In load - get the dataset for the editable grid
2) Inside a with - capture the selected values(identifiers of the data set ) that the user selects
3) Use the selected Identifiers in step 2 and filter the data set for the selected rows.
4) Display the editable grid based on the rows in the data set.

Hope this helps.