Auto Search

[IamBlossom]

I would like to hide the search button then automatically filter the reports page based on the value selected in the search fields. Do you have any idea on how to do that?

Thanks!

[cheonsa]

Hi @IamBlossom,

To hide the Search button paste this in the Header of Search and Report Wizard - Configure Filtering Fields:

<style>

td[class*="cbSearchButtonContainer"] {
display: none !important;
}

</style>

For the automatic search, paste this in the Footer:

<script>
document.addEventListener('DataPageReady', () => {
var thisDP = document.querySelector(`[action*='[@cbAppKey]']`)
var field = thisDP .querySelector('#Value1_1');
var submitButton = thisDP .querySelector('.cbSearchButton');
field.onchange = function(){ submitButton.click() };
})
</script>

 

Hope this helps. 

 

-kristina

[DefinitelyNot31337]

Hi @kristina, I believe you need to remove the space between thisDP and .querySelector. There are two instances of this in your code which results to a syntax error (^_^)v

In addition, everyone else may also try this version of JS by putting this on an HTML Block in their search form:

<script>

var thisDP = document.querySelector(`[action*="[@cbAppKey]"]`);

thisDP.addEventListener('change', function() {
  console.log('Changed!');
  thisDP.querySelector('.cbSearchButton').click();
});

</script>

 

This will automatically hit search everytime an input value has been changed, then put out-of-focus.

 

Hope this helps.
-DN31337!

[NickO]

Thanks @kristina and @DefinitelyNot31337 I am using this in several reports to great effect. However, when I have cascading fields, I run into two problems.

- For @kristina's solution, the naming convention of the fields changes and it appears as if they are attached a random suffix so setting the field variable is not successful. Below is the code I am using in the footer of the page.

<script>
document.addEventListener('DataPageReady', () => {
var thisDP = document.querySelector(`[action*='[@cbAppKey]']`)
var field1 = thisDP.querySelector('#Value1_1');
var field2 = thisDP.querySelector('#Value2_1');
var field3 = thisDP.querySelector('#Value3_1');
var field4 = thisDP.querySelector('#Value4_1');
var submitButton = thisDP.querySelector('.cbSearchButton');
field1.onchange = function(){ submitButton.click() };
field2.onchange = function(){ submitButton.click() };
field3.onchange = function(){ submitButton.click() };
field4.onchange = function(){ submitButton.click() };

})
</script>

- For @DefinitelyNot31337's solution in the HTML block, it constantly is recalculating when I have cascading values so I can't interact with the page.

 

Anyone have thoughts on how to resolve this? I am obviously not a great js coder and kind of hacking this together so I really appreciate the help.

[NickO]

I had a chance to get back to this and did find a way to reference the search criteria with a wildcard search. 

<script>
document.addEventListener('DataPageReady', () => {
var thisDP = document.querySelector(`[action*='[@cbAppKey]']`)
var field = thisDP.querySelector('select[id^="Value1_1"]');
var field1 = thisDP.querySelector('select[id^="Value2_1"]');
var field2 = thisDP.querySelector('select[id^="Value3_1"]');
var submitButton = thisDP.querySelector('.cbSearchButton');
field.onchange = function(){ submitButton.click() };
field1.onclick = function(){ submitButton.click() };
field2.onchange = function(){ submitButton.click() };
})
</script>

In the above example, the value set is field1 is set from a cascading drop down. If I make it a cascading listbox, it works great. If I use onchange it spins constantly and I cannot interact with the page (looks like it is looping). When it is a dropdown, the "onclick" event triggers as soon as I hit the box to drop it down. I need to use drop downs due space on the page and user experience, but this one has me totally stonewalled. Anyone have any thoughts?

[AhmeAlnaqa]

Hi there

I have two questions:

1- when I try to add the style of hide the search  button not working " i try to add in all the header sections but not working"

2- the autosearch is fine but u need to move out side the textbox to take action, what i need is take the search action once any character is written.

https://c2acp467.caspio.com/dp/3dd3a0007129a954a5fe4bdeaeeb

try search  using "a" or "s"

thanks.

[TellMeWhy]

11 hours ago, AhmeAlnaqa said:

Hi there

I have two questions:

1- when I try to add the style of hide the search  button not working " i try to add in all the header sections but not working"

2- the autosearch is fine but u need to move out side the textbox to take action, what i need is take the search action once any character is written.

https://c2acp467.caspio.com/dp/3dd3a0007129a954a5fe4bdeaeeb

try search  using "a" or "s"

thanks.

What's your code? What's the issue of 1 again?

use "input" instead of "change" for your event listener (it will trigger on the FIRST keypress tho)

 

[AhmeAlnaqa]

thanks @TellMeWhy

for the 2 one it's solved..

 

the hide problem .. it's not hide  !! i don't know why if u mind can u show me screenshot from the place"screen wizard" that i have to add the hide code 

 

thanks again

[TellMeWhy]

9 hours ago, AhmeAlnaqa said:

thanks @TellMeWhy

for the 2 one it's solved..

 

the hide problem .. it's not hide  !! i don't know why if u mind can u show me screenshot from the place"screen wizard" that i have to add the hide code 

 

thanks again

Idk, I just do this?

 

<style>
.cbSearchButton{
display:none !important;
}

</style>

Does it not work for you?

[AhmeAlnaqa]

@TellMeWhy
thanks so much It's solved .. 

[AveEd]

On 8/27/2019 at 3:40 PM, DefinitelyNot31337 said:

Hi @kristina, I believe you need to remove the space between thisDP and .querySelector. There are two instances of this in your code which results to a syntax error (^_^)v

In addition, everyone else may also try this version of JS by putting this on an HTML Block in their search form:

<script>

var thisDP = document.querySelector(`[action*="[@cbAppKey]"]`);

thisDP.addEventListener('change', function() {
  console.log('Changed!');
  thisDP.querySelector('.cbSearchButton').click();
});

</script>

 

This will automatically hit search everytime an input value has been changed, then put out-of-focus.

 

Hope this helps.
-DN31337!

YOU ARE AWESOME FOR THIS!!!!!

 

Is their a script for a submit/update form? That would be awesome!!

[Wikiwi]

@AveEd for submission I think you can just replace '.cbSearchButton' with '.cbSubmitButton' and for update you can use '.cbUpdateButton'