Dropdown with a create new button

Hi, Can I have a button inside of a dropdown? 

Thanks in advance

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    I agree with   that a button inside a dropdown isn't possible, but you could always use the last option to mock this behavior.  In my opinion this isn't the best approach, but check the code below for a quick example.

    a!localVariables(
      
      local!existingProjects: a!forEach(
        items: enumerate(3)+1,
        expression: {
          id: fv!index,
          projectName: "project " & fv!item,
          description: repeat(fv!index, "words and ")
        }
      ),
      
      local!dropdownOptions: append(
        local!existingProjects.projectName,
        "Create New"
      ),
      local!a: length(local!existingProjects)+1,
      local!selection,
      
      
      {
        a!dropdownField(
          label: "Project: ",
          choiceValues: local!dropdownOptions,
          choiceLabels: local!dropdownOptions,
          value: local!selection,
          saveInto: {
            local!selection,
            a!save(
              local!existingProjects,
              if(
                save!value = "Create New",
                append(
                  local!existingProjects,
                  {
                    id: length(local!existingProjects)+1,
                    projectName: "project " & length(local!existingProjects)+1
                  }
                ),
                local!existingProjects
              )
            )
          },
          placeholder: "select project"
        ),
        
        a!gridField(
          label: "Current Projects",
          data: local!existingProjects,
          columns: {
            a!gridColumn(
              label: "ID",
              sortField: "id",
              value: fv!row.id
            ),
            a!gridColumn(
              label: "Project Name",
              sortField: "projectName",
              value: fv!row.projectName
            ),
            a!gridColumn(
              label: "Description",
              sortField: "description",
              value: fv!row.description
            ),
          }
        )
      }
    )

    You may want to check out Editable Grid Component as an alternate approach.  Appian even has a recipe showing how to configure adding new rows/records to the gridLayout.

    Hope this helps

Reply
  • 0
    Certified Senior Developer

    I agree with   that a button inside a dropdown isn't possible, but you could always use the last option to mock this behavior.  In my opinion this isn't the best approach, but check the code below for a quick example.

    a!localVariables(
      
      local!existingProjects: a!forEach(
        items: enumerate(3)+1,
        expression: {
          id: fv!index,
          projectName: "project " & fv!item,
          description: repeat(fv!index, "words and ")
        }
      ),
      
      local!dropdownOptions: append(
        local!existingProjects.projectName,
        "Create New"
      ),
      local!a: length(local!existingProjects)+1,
      local!selection,
      
      
      {
        a!dropdownField(
          label: "Project: ",
          choiceValues: local!dropdownOptions,
          choiceLabels: local!dropdownOptions,
          value: local!selection,
          saveInto: {
            local!selection,
            a!save(
              local!existingProjects,
              if(
                save!value = "Create New",
                append(
                  local!existingProjects,
                  {
                    id: length(local!existingProjects)+1,
                    projectName: "project " & length(local!existingProjects)+1
                  }
                ),
                local!existingProjects
              )
            )
          },
          placeholder: "select project"
        ),
        
        a!gridField(
          label: "Current Projects",
          data: local!existingProjects,
          columns: {
            a!gridColumn(
              label: "ID",
              sortField: "id",
              value: fv!row.id
            ),
            a!gridColumn(
              label: "Project Name",
              sortField: "projectName",
              value: fv!row.projectName
            ),
            a!gridColumn(
              label: "Description",
              sortField: "description",
              value: fv!row.description
            ),
          }
        )
      }
    )

    You may want to check out Editable Grid Component as an alternate approach.  Appian even has a recipe showing how to configure adding new rows/records to the gridLayout.

    Hope this helps

Children