On a search result page, I want to show a button to open up a submission form, when there are no results

[vanderLeest]

On a search result page,

I want to show a button to open up a submission form, when there are no records found for the selection criteria

and I want to align that button to the right of the form.

The tabular results are shown under the search boxes.

I have attached two pictures that show the current and desired situation for either Records Found and No Records Found

Edited November 4, 2020 by vanderLeest
more detail, adding screenshots

[vanderLeest]

I solved the placement of the button. No luck yet hiding it when no records found.

<div style="display:flex; justify-content:flex-end; width:50%; padding:0;">
    <input class='cbSubmitButton' type="button" onclick="location.href='https://[pagelink]?XC_ID=[@field:XC_ID]';" value="Add Contact" />
</div>

 

[sandy159]

Hello @vanderLeest,

Please check the following article: https://howto.caspio.com/integration/map-mashup/hiding-the-map-when-no-results-are-found/

You may use the same approach as in the article but show the button when 'No records found'.  By default, the button should have the style display: none;

<div id="btn_id" style="display:none; justify-content:flex-end; width:50%; padding:0;">
    <input class='cbSubmitButton' type="button" onclick="location.href='https://[pagelink]?XC_ID=[@field:XC_ID]';" value="Add Contact" />
</div>

Also just make sure that you change the ID in the getElementById to the ID of your button. Here is slightly changed JS than in the article:

<script>
function func_NoRec_Btn(){
if (document.getElementById("norecord"))
          document.getElementById("btn_id").style.display = "flex";
}
document.addEventListener('DataPageReady', func_NoRec_Btn);
</script>

You may check the following forum posts for reference as well:

 

Please let me know if it helps!

[vanderLeest]

Thanks Sandy159,

Your solution and set-up looked very promising. However something in my set up is not exactly right.

According to the 'hiding the map' article, in the used Localization Settings, I customized Element ID #351 (the No Records Found message) by adding div tags around the message to

<div id="norecord"><h1>No records found.</h1></div>.

I changed the entry in the Header of the Results page (i.e. display:none; and added id="btnAdd") to look like 

<div style="display:none; justify-content:flex-end; width:50%; padding:0;">
    <input class='cbSubmitButton' type="button" id="btnAdd" onclick="location.href=''https://[pagelink]?XC_ID=[@field:XC_ID]';" value="Add Contact" />
</div>

and added your function to the footer script

function func_NoRec_Btn()
{
if (document.getElementById('norecord'))
          document.getElementById('btnAdd').style.display = "flex";
}
document.addEventListener('DataPageReady', func_NoRec_Btn);

Sadly the button does not appear (although the extra row is there) when the search gives no records.

By the way, AJAX loading is NOT disabled and the button shows when display is set to flex in its div style. It seems the function is not setting the display.

Any idea where my set-up goes wrong?

[vanderLeest]

I found my error: I inserted the id (id="btnAdd") to the input section instead off as part of the div parameters.

<div  id="btnAdd" style="display:none; justify-content:flex-end; width:50%; padding:0;">
    <input class="cbSubmitButton" type="button" .....

(Before I found this error, I also set the page to be responsive.)

Thanks so much for you great solution, Sandy159

Floris