Editable Grid

Hi,

I have a requirement in where user can add new element in drop down field.

For ex: if drop down field contains element : {"apple" , "orange" , "pineapple" , other }.

Then on clicking other he/she should be able to add new element in dropdown.

Thanks and Regards,

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    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.

  • 0
    A Score Level 1
    in reply to Harsha Sharma

    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,

  • +1
    Certified Lead Developer
    in reply to subodhl

    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.

  • 0
    A Score Level 1
    in reply to Harsha Sharma

    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,

Reply Children
  • 0
    Certified Lead Developer
    in reply to subodhl

    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.