• State Suggested Answer
  • Replies 8 replies
  • Answers 2 answers
  • Subscribers 10 subscribers
  • Views 2160 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Regarding drop-down and date fields

saurabh sharma
Certified Associate Developer

Hi All,

I have a Interface in which I have created approx 10 filters . What I am facing a problem is that I am having a  drop-down say "Select filter"  field in which I have 10 names , what I am achieving is that based on selection from "select filter" I am showing the filters . All the filers I have kept in For each loop , the main problem is there is that I am having 4 filers as date field and rest as drop-down . When I am selecting the filters from drop-down list all is that if am selecting All drop-down filters that they all are in same line that is looks perfect but when I am selecting one drop down and 2 date filters they look like messy means the arrangement is not looking good ..

How can I achieve this ..

Thanks in Advance

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    Its pretty hard to read and follow. Do you have screenshots to explain what exactly you try to have in line and "Looking good"?

  • 0
    Certified Associate Developer
     in reply to Richard Michaelis

    See this First row is by default but from second row its in for each based on selection upto 5 fields in a row . In this when I am selecting only dropdown the UI looks better but when i choose dropdown and date field the UI in not looking good. 

    case2- when chooisng only drop down 

  • 0
    Certified Senior Developer
     in reply to saurabh sharma

    For a more intuitive look you can create column layouts.

    Look 1: All date fields in one column

    Look 2: A set of date fields (From and To) can be clubbed together using another columns layout and stacked under a column with dropdowns

  • 0
    Certified Associate Developer
     in reply to Nandhavi Nandakumar

    I have done this only but its depend on the choice of the user he can choose any 5 filter at a time

    i.e he might can choose 2 dropdown and 3 dates filter or all dates this is the main reason . 

    When the user is choosing all 5 dropdown filters its works perfectly fy9 but not in other case 

  • 0
    Certified Senior Developer
     in reply to saurabh sharma

    I understand? can you share your code snippet? I get the feeling something is not super clean.

  • 0
    Certified Associate Developer
     in reply to Richard Michaelis 

    a!columnsLayout(
                    columns: {
                      a!columnLayout(
                        contents: {
                          a!textField(
                            label: "Keyword",
                            helpTooltip: "Search for a Keyword within the Decom Site(s) / Decom Band(s) / Dismantling Other Reason(s) ",
                            placeholder: "Enter part of Decom Site(s) / Decom Band(s) / Dismantling Other Reason(s)",
                            value: local!currentKeyword,
                            saveInto: {
                              local!currentKeyword,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "keyword",
                                  value: save!value
                                )
                              )
                            }
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Is Full Decom",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Is Full Decom -",
                            choiceLabels: a!forEach(
                              items: local!isFullDecomDropdown,
                              expression: if(fv!item = true, "YES", "NO")
                            ),
                            choiceValues: local!isFullDecomDropdown,
                            value: local!currentIsFullDecom,
                            saveInto: {
                              local!currentIsFullDecom,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "isfulldecom",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Lease At Location",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Lease At Location -",
                            choiceLabels: a!forEach(
                              items: local!leaseAtLocationDrop,
                              expression: if(fv!item = true, "YES", "NO")
                            ),
                            choiceValues: local!leaseAtLocationDrop,
                            value: local!currentLeaseAtLocation,
                            saveInto: {
                              local!currentLeaseAtLocation,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "leaseatlocation",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Site Move Required",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Site Move Required -",
                            choiceLabels: a!forEach(
                              items: local!siteMoveRequiredDrop,
                              expression: if(fv!item = true, "YES", "NO")
                            ),
                            choiceValues: local!siteMoveRequiredDrop,
                            value: local!currentSiteMoveRequired,
                            saveInto: {
                              local!currentSiteMoveRequired,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "sitemoverequired",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Created By",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Created By -",
                            choiceLabels: a!forEach(
                              items: local!createdByDropdown,
                              expression: rule!APN_displayUser(fv!item)
                            ),
                            choiceValues: local!createdByDropdown,
                            value: local!currentCreatedBy,
                            saveInto: {
                              local!currentCreatedBy,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "createdby",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Decom Status",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Decom Status -",
                            choiceLabels: a!forEach(
                              items: local!decomStatusDropdown,
                              expression: if(
                                fv!item,
                                if(
                                  fv!item = cons!TWM_DECOM_STATUS[1],
                                  "Approved",
                                  "Rejected"
                                ),
                                "In Progress"
                              )
                            ),
                            choiceValues: local!decomStatusDropdown,
                            value: local!currentDecomStatus,
                            saveInto: {
                              local!currentDecomStatus,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "decomstatus",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      )
                    }
                  ),
    a!columnsLayout(
                    columns: {
                      a!forEach(
                        items: enumerate(local!columnsPerRow) + 1,
                        expression: a!localVariables(
                          local!columnIndex: fv!index,
                          a!columnLayout(
                            a!forEach(
                              items: enumerate(cons!TWM_GRID),
                              expression: a!localVariables(
                                local!choose: rule!APN_replaceNull(
              wherecontains(
                tostring(
                  index(local!selectedGridColumns, fv!index, {})
                ),
                cons!TWM_GRIDCOLUMNS
              ),
              {}
            ),
                                if(
                                  or(
                                    rule!APN_isBlank(local!choose),
                                    rule!APN_isBlank(
                                      index(local!selectedGridCol, fv!index, {})
                                    )
                                  ),
                                  {},
                                  choose(
                                    local!choose,
                                    a!multipleDropdownField(
                                      label: "Requested By",
                                      labelPosition: "ABOVE",
                                      placeholder: "- Select Requested By -",
                                      choiceLabels: a!forEach(
                                        items: local!requestedByDrop,
                                        expression: fv!item
                                      ),
                                      choiceValues: local!requestedByDrop,
                                      value: local!currentRequestedBy,
                                      saveInto: {
                                        local!currentRequestedBy,
                                        a!save(
                                          local!settings,
                                          rule!FSM_setFilterSettingValue(
                                            settings: local!settings,
                                            name: "requestedby",
                                            value: save!value,
                                            isArray: true()
                                          )
                                        )
                                      },
                                      searchDisplay: "ON",
                                      showWhen: and(
                                        contains(
                                          touniformstring(local!selectedGridColumns),
                                          "Requested By"
                                        ),
                                        (
                                          or(
                                            mod(fv!index, local!columnsPerRow) = local!columnIndex,
                                            and(
                                              mod(fv!index, local!columnsPerRow) = 0,
                                              local!columnIndex = local!columnsPerRow
                                            )
                                          )
                                        )
                                      )
                                    ),
                                    {
                                      a!sideBySideLayout(
                                        items: {
                                          a!sideBySideItem(
                                            item: a!dateField(
                                              label: "Created Date(From)",


                                              value: local!currentcreateddatefrom,
                                              saveInto: {
                                                local!currentcreateddatefrom,
                                                a!save(
                                                  local!settings,
                                                  rule!FSM_setFilterSettingValue(
                                                    settings: local!settings,
                                                    name: "createddatefrom",
                                                    value: save!value,
                                                    isArray: false
                                                  )
                                                )
                                              },
                                              showWhen: and(
                                                contains(
                                                  touniformstring(local!selectedGridColumns),
                                                  "Created Date"
                                                ),
                                                (
                                                  or(
                                                    mod(fv!index, local!columnsPerRow) = local!columnIndex,
                                                    and(
                                                      mod(fv!index, local!columnsPerRow) = 0,
                                                      local!columnIndex = local!columnsPerRow
                                                    )
                                                  )
                                                )
                                              ),
                                              validations: {}
                                            )
                                          ),
                                          a!sideBySideItem(
                                            item: a!dateField(
                                              label: "Created Date (To)",

                                              value: local!currentcreateddateto,
                                              saveInto: {
                                                local!currentcreateddateto,
                                                a!save(
                                                  local!settings,
                                                  rule!FSM_setFilterSettingValue(
                                                    settings: local!settings,
                                                    name: "createddateto",
                                                    value: save!value,
                                                    isArray: false
                                                  )
                                                )
                                              },
                                              showWhen: and(
                                                contains(
                                                  touniformstring(local!selectedGridColumns),
                                                  "Created Date"
                                                ),
                                                (
                                                  or(
                                                    mod(fv!index, local!columnsPerRow) = local!columnIndex,
                                                    and(
                                                      mod(fv!index, local!columnsPerRow) = 0,
                                                      local!columnIndex = local!columnsPerRow
                                                    )
                                                  )
                                                )
                                              ),
                                              validations: {}
                                            )
                                          )
                                        }
                                      )
                                    },

    first one is first column which is by default .. 

    second code is in for each loop based on selection of the user 

Reply
  • 0
    Certified Associate Developer
     in reply to Richard Michaelis 

    a!columnsLayout(
                    columns: {
                      a!columnLayout(
                        contents: {
                          a!textField(
                            label: "Keyword",
                            helpTooltip: "Search for a Keyword within the Decom Site(s) / Decom Band(s) / Dismantling Other Reason(s) ",
                            placeholder: "Enter part of Decom Site(s) / Decom Band(s) / Dismantling Other Reason(s)",
                            value: local!currentKeyword,
                            saveInto: {
                              local!currentKeyword,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "keyword",
                                  value: save!value
                                )
                              )
                            }
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Is Full Decom",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Is Full Decom -",
                            choiceLabels: a!forEach(
                              items: local!isFullDecomDropdown,
                              expression: if(fv!item = true, "YES", "NO")
                            ),
                            choiceValues: local!isFullDecomDropdown,
                            value: local!currentIsFullDecom,
                            saveInto: {
                              local!currentIsFullDecom,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "isfulldecom",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Lease At Location",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Lease At Location -",
                            choiceLabels: a!forEach(
                              items: local!leaseAtLocationDrop,
                              expression: if(fv!item = true, "YES", "NO")
                            ),
                            choiceValues: local!leaseAtLocationDrop,
                            value: local!currentLeaseAtLocation,
                            saveInto: {
                              local!currentLeaseAtLocation,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "leaseatlocation",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Site Move Required",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Site Move Required -",
                            choiceLabels: a!forEach(
                              items: local!siteMoveRequiredDrop,
                              expression: if(fv!item = true, "YES", "NO")
                            ),
                            choiceValues: local!siteMoveRequiredDrop,
                            value: local!currentSiteMoveRequired,
                            saveInto: {
                              local!currentSiteMoveRequired,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "sitemoverequired",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Created By",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Created By -",
                            choiceLabels: a!forEach(
                              items: local!createdByDropdown,
                              expression: rule!APN_displayUser(fv!item)
                            ),
                            choiceValues: local!createdByDropdown,
                            value: local!currentCreatedBy,
                            saveInto: {
                              local!currentCreatedBy,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "createdby",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!multipleDropdownField(
                            label: "Decom Status",
                            labelPosition: "ABOVE",
                            placeholder: "- Select Decom Status -",
                            choiceLabels: a!forEach(
                              items: local!decomStatusDropdown,
                              expression: if(
                                fv!item,
                                if(
                                  fv!item = cons!TWM_DECOM_STATUS[1],
                                  "Approved",
                                  "Rejected"
                                ),
                                "In Progress"
                              )
                            ),
                            choiceValues: local!decomStatusDropdown,
                            value: local!currentDecomStatus,
                            saveInto: {
                              local!currentDecomStatus,
                              a!save(
                                local!settings,
                                rule!FSM_setFilterSettingValue(
                                  settings: local!settings,
                                  name: "decomstatus",
                                  value: save!value,
                                  isArray: true()
                                )
                              )
                            },
                            searchDisplay: "ON",
                            validations: {}
                          )
                        }
                      )
                    }
                  ),
    a!columnsLayout(
                    columns: {
                      a!forEach(
                        items: enumerate(local!columnsPerRow) + 1,
                        expression: a!localVariables(
                          local!columnIndex: fv!index,
                          a!columnLayout(
                            a!forEach(
                              items: enumerate(cons!TWM_GRID),
                              expression: a!localVariables(
                                local!choose: rule!APN_replaceNull(
              wherecontains(
                tostring(
                  index(local!selectedGridColumns, fv!index, {})
                ),
                cons!TWM_GRIDCOLUMNS
              ),
              {}
            ),
                                if(
                                  or(
                                    rule!APN_isBlank(local!choose),
                                    rule!APN_isBlank(
                                      index(local!selectedGridCol, fv!index, {})
                                    )
                                  ),
                                  {},
                                  choose(
                                    local!choose,
                                    a!multipleDropdownField(
                                      label: "Requested By",
                                      labelPosition: "ABOVE",
                                      placeholder: "- Select Requested By -",
                                      choiceLabels: a!forEach(
                                        items: local!requestedByDrop,
                                        expression: fv!item
                                      ),
                                      choiceValues: local!requestedByDrop,
                                      value: local!currentRequestedBy,
                                      saveInto: {
                                        local!currentRequestedBy,
                                        a!save(
                                          local!settings,
                                          rule!FSM_setFilterSettingValue(
                                            settings: local!settings,
                                            name: "requestedby",
                                            value: save!value,
                                            isArray: true()
                                          )
                                        )
                                      },
                                      searchDisplay: "ON",
                                      showWhen: and(
                                        contains(
                                          touniformstring(local!selectedGridColumns),
                                          "Requested By"
                                        ),
                                        (
                                          or(
                                            mod(fv!index, local!columnsPerRow) = local!columnIndex,
                                            and(
                                              mod(fv!index, local!columnsPerRow) = 0,
                                              local!columnIndex = local!columnsPerRow
                                            )
                                          )
                                        )
                                      )
                                    ),
                                    {
                                      a!sideBySideLayout(
                                        items: {
                                          a!sideBySideItem(
                                            item: a!dateField(
                                              label: "Created Date(From)",


                                              value: local!currentcreateddatefrom,
                                              saveInto: {
                                                local!currentcreateddatefrom,
                                                a!save(
                                                  local!settings,
                                                  rule!FSM_setFilterSettingValue(
                                                    settings: local!settings,
                                                    name: "createddatefrom",
                                                    value: save!value,
                                                    isArray: false
                                                  )
                                                )
                                              },
                                              showWhen: and(
                                                contains(
                                                  touniformstring(local!selectedGridColumns),
                                                  "Created Date"
                                                ),
                                                (
                                                  or(
                                                    mod(fv!index, local!columnsPerRow) = local!columnIndex,
                                                    and(
                                                      mod(fv!index, local!columnsPerRow) = 0,
                                                      local!columnIndex = local!columnsPerRow
                                                    )
                                                  )
                                                )
                                              ),
                                              validations: {}
                                            )
                                          ),
                                          a!sideBySideItem(
                                            item: a!dateField(
                                              label: "Created Date (To)",

                                              value: local!currentcreateddateto,
                                              saveInto: {
                                                local!currentcreateddateto,
                                                a!save(
                                                  local!settings,
                                                  rule!FSM_setFilterSettingValue(
                                                    settings: local!settings,
                                                    name: "createddateto",
                                                    value: save!value,
                                                    isArray: false
                                                  )
                                                )
                                              },
                                              showWhen: and(
                                                contains(
                                                  touniformstring(local!selectedGridColumns),
                                                  "Created Date"
                                                ),
                                                (
                                                  or(
                                                    mod(fv!index, local!columnsPerRow) = local!columnIndex,
                                                    and(
                                                      mod(fv!index, local!columnsPerRow) = 0,
                                                      local!columnIndex = local!columnsPerRow
                                                    )
                                                  )
                                                )
                                              ),
                                              validations: {}
                                            )
                                          )
                                        }
                                      )
                                    },

    first one is first column which is by default .. 

    second code is in for each loop based on selection of the user 

Children

© 2024 Appian. All rights reserved.