Preselect multiple values to search in multi-select dropdown list

[wimtracking2]

In a search datapage, with a list of cities available in a multi-select list box, how can I "pre-select" or set multiple values as the default search. Users want to see cities Bozeman, Belgrade, and Livingston as the default records returned in the default search results below the search form. The will then have the ability to change the selection using the multi select city field.

The values stored in the city field are a text field. Thanks for your ideas!

[CoopperBackpack]

Hello @wimtracking2,

As I understood from your inquiry, you store the cities in the field with the Text(255) data type and set this field on the Search page as Listbox -> Allow multiselection

 

And the Search is set like this:

 

If this is the case, it is possible to add the "selected" attribute to the options you want by JavaScript. 

I added this code to the Footer section on the "Search and Report Wizard - Configure Search Fields" page (the HTML editor is disabled on the Advanced tab before pasting). 

<script>

document.addEventListener('DataPageReady', selectedOptionHandler) 

function selectedOptionHandler() {

let firstCity = document.querySelector('#Value1_1 > option[value="Bozeman"]'); 
let secondCity = document.querySelector('#Value1_1 > option[value="Belgrade"]');
let thirdCity= document.querySelector('#Value1_1 > option[value="Livingston"]');

firstCity.selected = secondCity.selected  = thirdCity.selected = true;

document.removeEventListener('DataPageReady', selectedOptionHandler);
};

</script>

And here is the output. So, I can see the list of records where City is Bozeman, Belgrade, or Livingston on initial load.

 

In the example, the City field on the Search page is the only field and has the id Value1_1 that is used in the code above.

Basically, the second field on the Search has the id Value2_1, the third field - Value3_1, etc. Please replace the id in the code if needed. 

Hope this is the expected result and this solution helps.

[TellMeWhy]

I don't think this is possible. Even if you are using List-String, and Multi-select form elements, the report will only show the records with the EXACT data you selected in the multiselect, it does not work as 'If any of the records has any of these values, show' 

You can create multiple criteria for one field. Each criteria can only hold one value, and the logic for all criteria would be OR. It's not dynamic though, so, you have to set a specific number of criteria.

 

[wimtracking2]

@CoopperBackpack Just had to change the value ID as you laid out and it works perfectly! Thank you

[wimtracking2]

On 4/27/2021 at 4:38 AM, CoopperBackpack said:

Hello @wimtracking2,

As I understood from your inquiry, you store the cities in the field with the Text(255) data type and set this field on the Search page as Listbox -> Allow multiselection

 

And the Search is set like this:

 

If this is the case, it is possible to add the "selected" attribute to the options you want by JavaScript. 

I added this code to the Footer section on the "Search and Report Wizard - Configure Search Fields" page (the HTML editor is disabled on the Advanced tab before pasting). 

<script>

document.addEventListener('DataPageReady', selectedOptionHandler) 

function selectedOptionHandler() {

let firstCity = document.querySelector('#Value1_1 > option[value="Bozeman"]'); 
let secondCity = document.querySelector('#Value1_1 > option[value="Belgrade"]');
let thirdCity= document.querySelector('#Value1_1 > option[value="Livingston"]');

firstCity.selected = secondCity.selected  = thirdCity.selected = true;

document.removeEventListener('DataPageReady', selectedOptionHandler);
};

</script>

And here is the output. So, I can see the list of records where City is Bozeman, Belgrade, or Livingston on initial load.

 

In the example, the City field on the Search page is the only field and has the id Value1_1 that is used in the code above.

Basically, the second field on the Search has the id Value2_1, the third field - Value3_1, etc. Please replace the id in the code if needed. 

Hope this is the expected result and this solution helps.

@CoopperBackpack Is there anyway to search with these preselected cities but also return results IF another field is a certain value?

So if the default city field is set to "Bozeman",  "Belgrade", "Livingston", but the search returns results for records in any city IF the Type of the record is  "Option 2", "Option 3".

[CoopperBackpack]

Hello @wimtracking2,

I am afraid that I didn`t get the idea.

So, on the initial load you want the records to be displayed that have values "Bozeman",  "Belgrade", "Livingston" for the City, and there is another Search field that also should have preselected values.  Could you provide more details, please?

 

[wimtracking2]

@CoopperBackpack

In the table, the field Contracts_HC_Service may contain 1, 2, or 3. The field Accounts_Physical_City could be any city in Montana.

I'd like the default/pre loaded results on the search datapage to be the cities of Bozeman or Livingston or Belgrade OR Contacts_HC_Service contains 2 or Contacts_HC_Service contains 3. Then, the records returned could then be those with cities other than Bozeman, Belgrade, and Livingston, but Contacts_HC_Service inclues 2 or 3.  AND Contacts_HC_Service returned could be records that contain 1, but are in Bozeman, Belgrade, or Livingston.

[wimtracking2]

@CoopperBackpack

I figured out how to make these two fields function as "or" during the search. Now I just need the second field to be pre-selected, like what you created for me for the first field. I added a second event listener, but the second field is not functioning. I am wondering if I need to add an ID or define each event in the javascript?

 

<script>

document.addEventListener('DataPageReady', selectedOptionHandler)

function selectedOptionHandler() {

let firstAccounts_Physical_City = document.querySelector('#Value25_1 > option[value="Bozeman"]');
let secondAccounts_Physical_City = document.querySelector('#Value25_1 > option[value="Belgrade"]');
let thirdAccounts_Physical_City = document.querySelector('#Value25_1 > option[value="Livingston"]');

firstAccounts_Physical_City.selected = secondAccounts_Physical_City.selected = thirdAccounts_Physical_City.selected = true;

document.removeEventListener('DataPageReady', selectedOptionHandler);
};
</script>
<script>

document.addEventListener('DataPageReady', selectedOptionHandler)

function selectedOptionHandler() {

let firstContacts_HC_Service = document.querySelector('#Value26_1 > option[value="Option 2: Help Center Crisis Answering Service & Referral Database"]');
let secondContacts_HC_Service = document.querySelector('#Value26_1 > option[value="Option 3: Extended Emergency Response Service, Help Center Crisis Answering Service & Referral Database"]');

firstContacts_HC_Service.selected = secondContacts_HC_Service.selected =  true;

document.removeEventListener('DataPageReady', selectedOptionHandler);
};

</script>

[TellMeWhy]

22 minutes ago, wimtracking2 said:

@CoopperBackpack

I figured out how to make these two fields function as "or" during the search. Now I just need the second field to be pre-selected, like what you created for me for the first field. I added a second event listener, but the second field is not functioning. I am wondering if I need to add an ID or define each event in the javascript?

 

<script>

document.addEventListener('DataPageReady', selectedOptionHandler)

function selectedOptionHandler() {

let firstAccounts_Physical_City = document.querySelector('#Value25_1 > option[value="Bozeman"]');
let secondAccounts_Physical_City = document.querySelector('#Value25_1 > option[value="Belgrade"]');
let thirdAccounts_Physical_City = document.querySelector('#Value25_1 > option[value="Livingston"]');

firstAccounts_Physical_City.selected = secondAccounts_Physical_City.selected = thirdAccounts_Physical_City.selected = true;

document.removeEventListener('DataPageReady', selectedOptionHandler);
};
</script>
<script>

document.addEventListener('DataPageReady', selectedOptionHandler)

function selectedOptionHandler() {

let firstContacts_HC_Service = document.querySelector('#Value26_1 > option[value="Option 2: Help Center Crisis Answering Service & Referral Database"]');
let secondContacts_HC_Service = document.querySelector('#Value26_1 > option[value="Option 3: Extended Emergency Response Service, Help Center Crisis Answering Service & Referral Database"]');

firstContacts_HC_Service.selected = secondContacts_HC_Service.selected =  true;

document.removeEventListener('DataPageReady', selectedOptionHandler);
};

</script>

Just change the function name on the second one 

 

also you can use value ^="Option 2" instead of the whole thing, ^= just means it STARTS with the value

[CoopperBackpack]

Hello @wimtracking2,

I apologize for not responding earlier, unfortunately, had no time to look into the inquiry.
I agree with TellMeWhy's suggestions.
Please test the suggestions and update this thread in case you have any questions. 

[wimtracking2]

Thank you both! @CoopperBackpack and @TellMeWhy that worked.