Jump to content

Show alert message when criteria met - InlineEdit Report


Recommended Posts

Hi everyone - I would like to ask for assistance in my Report DataPage. I have two fields that need to be checked before editing or submitting the data in the checkbox. Basically, if Field1 is blank and the Field2 is equal to a certain word then the user should not be able to check a checkbox and an alert will show. 

Any ideas are appreciated. Thanks!

Link to comment
Share on other sites

Hi @Catra - to achieve this, it will require you to have a calculated field, JS and CSS.

First, create a Calculated field that will compare the two fields or set the criteria. For example this:

CASE WHEN [@field:Name] ='' AND [@field:Comments] = 'Candidate'
THEN 'Show'
ELSE
'No show'
END

Next, add Header and Footer. Make sure to disable it first on the Advanced Tab. 

In the Footer, copy and paste this code:

<script type="text/javascript">

document.addEventListener("change", function(event){
event.stopImmediatePropagation();


//check if input that is being changed is an Inline Edit Field
if(event.target.getAttribute("name").includes("InlineEditFIELDNAME")){

//first calc field occurrence value
var calc = event.target.parentNode.parentNode.parentNode.querySelectorAll('td[class*="cbResultSetCalculatedField"]')[0].innerHTML;

//check if Calculated field is Show - means show the alert message
if(calc =='Show'){

alert("Please change");
document.querySelector('input[name="InlineEditFIELDNAME"]').checked=false;
}

}


});
</script>

this code will check the behavior of the checkbox and then make it unchecked and show the message when the user ticks the checkbox. 

Result:

image.png

If you want it to be equal to only one field in the InlineEdit, you can use this:

 

<script type="text/javascript">

document.addEventListener("change", function(event){
event.stopImmediatePropagation();


//check if input that is being changed is an Inline Edit Field
if(event.target.getAttribute("name")=="InlineEditFIELDNAME"){

//first calc field occurrence value
var calc = event.target.parentNode.parentNode.parentNode.querySelectorAll('td[class*="cbResultSetCalculatedField"]')[0].innerHTML;

//check if Calculated field is Show - means show the alert message
if(calc =='Show'){

alert("Please change");
document.querySelector('input[name="InlineEditFIELDNAME"]').checked=false;
}

}


});
</script>

If you want to HIDE the calculated field, you can insert this CSS in the Header:

<style>
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(4),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(4) /* replace 4 with the number position of column you want to hide */
{
display:none !important;
}
</style>

image.png

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

×
×
  • Create New...