Display Message in Details Page Based on Two Fields

[ChristianM]

Hi All,

I am trying to display a message in the Details Page when users edit records based on two fields:

1. Field 1 is a dropdown list that users don't change 99.9% of the time but could potentially change
2. Field 2 is a date/time field that users will change frequently.

 

 

If a certain combination occurs, for example IND (IN) for 02/10/2023, I'd like to flash a message on the screen (field, HTML, or popup) BEFORE the user clicks the Update button.

I've tried the following but can't seem to come up with a solution:

1. Rules don't seem like they will work because I have 9 items in the list for Field 1, probably 20 dates that I want to check for Field 2, a different message will apply by date, and different dates in Field 2 will apply to different records in Field 1.
2. I built a separate table with three fields to join in a Calculated Field with a select query....however the Calculated Value joins based on the current record value whereas I want to do the join on what the value is changed to but not yet committed as an Update.

3. I used a Case Statement in a Calculated Field but again, the Case statement checked based on the current record's value whereas I want to do the join on what the value is changed to but not yet committed as an Update.

 

Has anyone done anything like this yet? Is this a solution that can be done in HTML/Javascript?

[Kronos]

Hello @ChristianM,

For you to be able to do that kindly replace the code in your HTML block with this:

<div id='loc'></div>
<div id='date'></div>

And put this code to your footer block:

<script type = "text/javascript">

//Displays the on load data
document.addEventListener('DataPageReady', function (event) {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;

if (first == "IND (IN)") {
loc.innerHTML = "test IND";
} else {;
loc.innerHTML = "not IND";
}

if (second == "7/4/2023") {
date.innerHTML =  "Please Confirm Date";
} else {;
date.innerHTML = "";
}

});

document.addEventListener('DataPageReady', function (event) {

///1st field onchange
document.getElementById("EditRecords_Orientation_Location").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
if (first == "IND (IN)") {
loc.innerHTML = "test IND";
} else {;
loc.innerHTML = "not IND";
}

if (second == "7/4/2023") {
date.innerHTML =  "Please Confirm Date";
} else {;
date.innerHTML = "";
}

});

//2nd field onchange
document.getElementById("EditRecordo_Orientation_Date").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
if (first == "IND (IN)") {
loc.innerHTML = "test IND";
} else {;
loc.innerHTML = "not IND";
}

if (second == "7/4/2023") {
date.innerHTML =  "Please Confirm Date";
} else {;
date.innerHTML = "";
}

});

});

</script>

 

You may also separate the two divs to their own HTML blocks so you can achieve an output like this:

[Kronos]

Hi @ChristianM,

Based on your desired output, I believe it can't be achieve using the provided platform features. You will have to use Javascript for this one.

Here is what I can suggest:

1. Create an HTML block and disable HTML editor. Then put a div inside it, like this one:

2. Next insert a Header and Footer block. On the footer block, disable HTML editor and insert this code:

<script type = "text/javascript">

//Displays the on load data
document.addEventListener('DataPageReady', function (event) {
var first = document.getElementById("EditRecordFIRSTFIELDNAME").value;
var second = document.getElementById("EditRecordSECONDFIELDNAME").value;
var third = document.getElementById("EditRecordTHIRDFIELDNAME").value;

text.innerHTML = first + ' ' + second + ' ' + third;
});

document.addEventListener('DataPageReady', function (event) {

//1st field onchange
document.getElementById("EditRecordType").addEventListener('change', function() {
var first = document.getElementById("EditRecordFIRSTFIELDNAME").value;
var second = document.getElementById("EditRecordSECONDFIELDNAME").value;
var third = document.getElementById("EditRecordTHIRDFIELDNAME").value;
text.innerHTML = first + ' ' + second + ' ' + third;
});

//2nd field onchange
document.getElementById("EditRecordAgree").addEventListener('change', function() {
var first = document.getElementById("EditRecordFIRSTFIELDNAME").value;
var second = document.getElementById("EditRecordSECONDFIELDNAME").value;
var third = document.getElementById("EditRecordTHIRDFIELDNAME").value;
text.innerHTML = first + ' ' + second + ' ' + third;
});

//3rd field onchange
document.getElementById("EditRecordTime").addEventListener('change', function() {
var first = document.getElementById("EditRecordFIRSTFIELDNAME").value;
var second = document.getElementById("EditRecordSECONDFIELDNAME").value;
var third = document.getElementById("EditRecordTHIRDFIELDNAME").value;
text.innerHTML = first + ' ' + second + ' ' + third;
});

});

</script>

3. Change the FIRSTFIELDNAME, SECONDFIELDNAME, and THIRDFIELDNAME in the code depending on the name of your fields

 

Here is a sample output when the method is applied:

 

I hope this helps!

[ChristianM]

Hi @Kronos

I implemented the following code because I only need to be able to compare the two fields to a certain combination:

 

<script type = "text/javascript">

//Displays the on load data
document.addEventListener('DataPageReady', function (event) {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
text.innerHTML = first + ' ' + second + ' ';
});

document.addEventListener('DataPageReady', function (event) {

//1st field onchange
document.getElementById("EditRecordType").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
text.innerHTML = first + ' ' + second + ' ';
});

//2nd field onchange
document.getElementById("EditRecordTime").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
text.innerHTML = first + ' ' + second + ' ';
});

});

</script>

 

On-load it pulls in the current values:

 

 

 

However if I change the two fields, it does not change the display:

 

 

Any idea? Thanks!

 

[Kronos]

Hi @ChristianM,

My bad, I forgot to change something on the code. Can you please try to replace the codes for the 1st and 2nd field onchange with the code below?

//1st field onchange
document.getElementById("EditRecords_Orientation_Location").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
text.innerHTML = first + ' ' + second + ' ';

});

//2nd field onchange
document.getElementById("EditRecordo_Orientation_Date").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
text.innerHTML = first + ' ' + second + ' ';

});

[ChristianM]

@Kronos

Great catch there. Works fine now when I change the record. Thanks!

 

Is it possible in Javascript to then compare these variables to then spit out a custom message? Not sure if this is the correct syntax for the if/else

 

//Displays the on load data
document.addEventListener('DataPageReady', function (event) {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
});

document.addEventListener('DataPageReady', function (event) {

 //1st field onchange
document.getElementById("EditRecords_Orientation_Location").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
});

//2nd field onchange
document.getElementById("EditRecordo_Orientation_Date").addEventListener('change', function() {
var first = document.getElementById("EditRecords_Orientation_Location").value;
var second = document.getElementById("EditRecordo_Orientation_Date").value;
});

if (first = "IND (IN)") {
   text.innerHTML = "test IND";
} else {
   text.innerHTML = "not IND"';
}

if (second= "07/04/2023") {
   text.innerHTML = "Please Confirm Date";
} else {
   text.innerHTML = ""';
}

});

 

[ChristianM]

@Kronos

With your assistance I've got it setup now to display my message using an IF statement:

 

if (first == "MAC (MA)" && second.substring(0,10) == "07/04/2023") {
text.innerHTML = "This is a blacked out date. Please confirm date before proceeding";
} else {;
text.innerHTML = "";
}

 

 

Now I just need to build the rest of IF statements to the combinations I need.

Thank you very much for your help, you're awesome!

 

 

 

 

 

[ChristianM]

@Kronos

I've got the code setup so I can track if specific text is selected and it works great. Do you have a suggestion to be able to display a message if any change is made to a field?

For example, if the var second changes from 7/12/2023 to 7/13/2023, I'd like to display a message.