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
Its pretty hard to read and follow. Do you have screenshots to explain what exactly you try to have in line and "Looking good"?
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
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
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
I understand? can you share your code snippet? I get the feeling something is not super clean.
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
First Reason i see for this unclean look, you are mixing column layouts and sidebyside layouts. they are not aligned on the same way.second: your labels are too long to have a clean online label. -> use bigger columns or shorter labelsthird:
First Reason i see for this unclean look, you are mixing column layouts and sidebyside layouts. they are not aligned on the same way. second: your labels are too long to have a clean online label. -> use bigger columns or shorter labels -> you can use the "" parameter of the a!columlayout() function to maintain it properly
third you are creating a new sidebyside layout every iteration.-> so every a!foreachitem you will create two new datefields which are a bit lower because of the sidebysidelyout-> try to create new two a!columlayouts instead of new sidebysidelayouts