Show alert message when criteria met - InlineEdit Report

[Catra]

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!

[Kurumi]

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:

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>

[Catra]

Thank you @Meekeee! I'll try this out