Jump to content
  • 0

Preselect multiple values to search in multi-select dropdown list


wimtracking2
 Share

Question

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!

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 1

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

R1mzCWA.png

 

And the Search is set like this:

DzxHiJg.png

 

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.

qvVS0xb.png

 

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.

Link to comment
Share on other sites

  • 0

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.

 

Link to comment
Share on other sites

  • 0
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

R1mzCWA.png

 

And the Search is set like this:

DzxHiJg.png

 

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.

qvVS0xb.png

 

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".

Link to comment
Share on other sites

  • 0

@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.

Capture.thumb.PNG.eec3ba0ea665462a817f687f1816bf84.PNG

Link to comment
Share on other sites

  • 0

@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>

Link to comment
Share on other sites

  • 0
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 

image.png.3b82b3106cf8530cd98eb738d5990368.png

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...