Jump to content

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


Recommended Posts

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

Slide1.JPG

Slide2.JPG

Edited by vanderLeest
more detail, adding screenshots
Link to post
Share on other sites

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!

Link to post
Share on other sites

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?

Link to post
Share on other sites

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

Link to post
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
Reply to this topic...

×   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...
×
×
  • Create New...