Editable Grid

RE: Editable Grid

Mike Schmitt — Wed, 04 Dec 2019 12:32:26 GMT

I believe you will need to use multiple elements and a more complex form to achieve this functionality. Nothing within appian currently handles the particular complexity you're referring to, all in one element. Particularly, you'll need functionality to allow the user to discern whether they want to use an item currently in the dropdown (from DB), or add a new entry, then to capture what that entry is, validate it (make sure it's not too long, fits any other business requirements, etc), then write it to the database (i assume). This can be done any number of ways but I strongly advise against trying to cram it all into one field.

RE: Editable Grid

subodhl — Wed, 04 Dec 2019 10:40:15 GMT

Thanks Harsha,

I have requirement where i can fetch data from database and display in drop down.So the user able to select data form drop-down and if require can add his/her data into drop down.This data will be dynamic so user can add any number of elements as per his requirements.

Thanks and Regards,

RE: Editable Grid

Harsha Sharma — Tue, 03 Dec 2019 11:45:20 GMT

Yeah you can achieve this just need to modify the code somewhat. Something like:

load(
  local!choiceData: {
    "apple",
    "orange",
    "pineapple",
    "other"
  },
  local!selectedData,
  local!newOption,
  a!formlayout(
    contents: {
      a!gridLayout(
        label: "Grid",
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "Field 1"
          )
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE"
          )
        },
        rows: a!gridRowLayout(
          contents: {
            a!dropdownField(
              label: "Example",
              choiceLabels: local!choiceData,
              placeholderLabel: "Select",
              choiceValues: local!choiceData,
              value: local!selectedData,
              saveInto: {
                local!selectedData,
                a!save(
                  local!newOption,
                  null
                )
              },
              showWhen: local!selectedData <> "other"
            ),
            a!textField(
              label: "Enter new value",
              value: local!newOption,
              saveInto: {
                local!newOption,
                a!save(
                  local!choiceData,
                  if(
                    rule!APN_isBlank(
                      save!value
                    ),
                    local!choiceData,
                    append(
                      local!choiceData,
                      save!value
                    )
                  )
                ),
                a!save(
                  local!selectedData,
                  save!value
                )
              },
              showWhen: local!selectedData = "other"
            )
          }
        )
      )
    }
  )
)

This will change the dropdown into a textfield in place as soon as user enters the new element automatically changes textfield back to dropdown. You can modify as required.

RE: Editable Grid

subodhl — Tue, 03 Dec 2019 10:13:38 GMT

Thanks Harsha,

But can we achieve the above functionality in dropdown field only.

For ex: The dropdown may convert into textfield for addition of new element or somehow we are able to add element in dropdown only.

Thanks and Regards,

RE: Editable Grid

Harsha Sharma — Tue, 03 Dec 2019 09:57:16 GMT

You can achieve this by enabling a textField() whenever user selects "Other" option. The user can enter new option in the said text field and inside the saveInto of this textField, you can update the elements array that is provided in dropdown.

load(
  local!choiceData: {
    "apple",
    "orange",
    "pineapple",
    "other"
  },
  local!selectedData,
  local!newOption,
  a!formlayout(
    contents: {
      a!dropdownField(
        label: "Example",
        choiceLabels: local!choiceData,
        placeholderLabel: "Select",
        choiceValues: local!choiceData,
        value: local!selectedData,
        saveInto: local!selectedData
      ),
      a!textField(
        label: "Enter new value",
        value: local!newOption,
        saveInto: {
          local!newOption,
          a!save(
            local!choiceData,
            if(
              rule!APN_isBlank(
                save!value
              ),
              local!choiceData,
              append(
                local!choiceData,
                save!value
              )
            )
          )
        },
        showWhen: local!selectedData = "other"
      )
    }
  )
)

You can refer this if it helps, for a grid you will need to make some tweeks though!

Hope this helps.