Need help choosing the right field on Submission DP - Applying Conditional Colors

[Lynda]

I need to apply conditional colors to a series of fields prior to the user adding the record. For example, when Calories > 400, Calories.color = '#FF9900' else Calories.color = '#2F5597'

The fields being manipulated are calculate record fields.

This is the inspect for Calories:

 

I guess I'm asking: Can this be done? I've done it on Report DP's and List DP's. I need to do this on Submission and Edit DP's. And if so, any clue as to how to go about it?

Lynda

[DrSimi]

Hi Lynda,

Yes, you can also select those fields with JavaScript.

This post contains information about the selector syntax needed depending on the DP type:

With your field above, the selector syntax may be something like document.querySelector("span[id*='InsertRecordCalories']"), which should select the element that displays "639". You can use this in a variable to color it depending on its value.

Hope this helps!

 

[Lynda]

Thank you so much!

[Lynda]

OK... so I have this script (Did I tell ya I'm NOT a java programmer... I'm a programmer, just not JS).

So I have this script. I started to test it. But I am having a fundamental problem. I can't get ahold of the InsertRecordCalories field.

I initially tried the script by adding an EventListener but took that out, as other similar type scripts didn't use it and it didn't make a difference in my current results.

<script>

 //Define your Goal ThreshHolds

var CalorieGoal = [@Calories]*[@ThreshHoldCalc#];

// Used for Console Testing

var MyLabel = "Calories (Before) = ";

var MyLabel1 = "Calories (After) = ";

var MyColorBlue = "Color = Green";

var MyColorOrange = "Color = Orange";

var MyGoal = "Goal = ";

 

console.log(MyGoal,CalorieGoal);

// Got the CalorieGoal <== script is executing to here

 

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

 

//Define the fields

const CaloriesField = document.getElementById('InsertRecordCalories');

 

console.log(MyLabel,CaloriesField);

// CalorieField isNull <== haven't got the record field

 

if (CaloriesField.value != '') {    

 

    if (CaloriesField.value < CalorieGoal) {

        console.log(MyLabel1,CaloriesField.value,MyGoal,CalorieGoal,MyColorBlue);

        CaloriesField.style = 'color: #669900; fontWeight: bold';

        }

    else {

        console.log(MyLabel1,CaloriesField.value,MyGoal,CalorieGoal,MyColorOrange);

        CaloriesField.style = 'color: #FF9900; fontWeight: bold';

        }

    };

 

The script (a snippet of it's entirety) is really straight forward, but I can't see or know enough to see the problem.

If you wouldn't mind, can someone take a look at this and point me in the right direction?

I would be eternally grateful.

 

Lynda

 

[Lynda]

I REALLY NEED HELP.  (In more ways than one...)

I have worked on this now for four days straight and still cannot get the InsertRecordCalories field by id. I have other scripts that use this method and they function as designed. But when I copy their code into this data page (also a submission), modify the field name (yes I checked it), I am unable to get the field. I have stripped the code to it's very basics. No logic, just get the field and display some console msgs so I know I have it.

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

//Define your records: Select Calories FormBlock; Return
//const CaloriesField = document.querySelector("div[class*='cbFormBlock62'] span"); <== This was alternate attempt
const CaloriesField = document.getElementById('InsertRecordCalories');

console.log('Calories ID = ',CaloriesField.id);

 

I received:

 

I need the <input> line. I should be able to get the InsertRecordCalories by Id and then access '.value'. When I compare it to my other scripts, the difference is in the <input>. In the working scripts, the type=text.  Whereas, for this data page the type="hidden". I looked at the documentation for hidden inputs and didn't think they would pose a problem.

I have tried getting the cbFormBlock62 and had success, but even with a span, was unable to access the value.

I really don't know what to try next.

I really could use some help.

Lynda

[Lynda]

Day 5: I have given up on using the InsertRecord technique. Tried everything, couldn't get the field and elements to return.

I have switch back over to retrieving the FormBlock. I have success in reading both the span and input elements. But... what I am returning is not consistent with what I see when I inspect the form, specifically the two elements.

Code:

<script>
    
//Define your Goal ThreshHolds
var CalorieGoal = [@Calories]*[@ThreshHoldCalc#];

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

//Define your records 
const CaloriesField = document.querySelector("div[class*='cbFormBlock62'] span");
const CaloriesInput = document.querySelector("div[class*='cbFormBlock62'] input");

if (CaloriesInput.value != '') {    
    if (CaloriesInput.value < CalorieGoal) {
        CaloriesField.style.color = '#669900';
        CaloriesField.style.fontWeight = 'Bold';
        }
    else {
        CaloriesField.style.color = '#FF9900';
        CaloriesField.style.fontWeight = 'Bold';
        }
    }; 
});

</script>

I can return the span.id and span.class, but all other attributes (innerHTML, outerHTML, innerText, etc.) come back '', even though when inspected I can see the value.

The same thing is happening on the input.  At least I am consistent. I am sure that I am missing something, I just don't know what.

Please help.

 

[DrSimi]

Hi Lynda,

This seems like either an issue with the selector or with timing (less likely if you are using the DataPageReady event).

I find this page useful to build the selectors needed:

CSS Selectors Reference (w3schools.com)

With your page structure above:

To select the span element highlighted in gray:

document.querySelector("span[id*='InsertRecordCalories']")

or

document.querySelector("div>span[id*='InsertRecordCalories']")

 

To select the input element below the span element which is highlighted in your screenshot:

document.querySelector("input[id*='InsertRecordCalories']")

or

document.querySelector("div>input[id*='InsertRecordCalories']")

 

If the above doesn't work, maybe having the DP URL to check out the full page structure would be more beneficial.

[Lynda]

OK... some progress, but still the same results. I applied (one by one) the various selectors, knowing that my results would change with each selector. 

In ALL instances I was able to retrieve the element. YEAH!

In ALL instances, I was NOT able to retrieve the information shown in the Inspect Properties window that would allow me to process.

I set const CaloriesField = document.querySelector("div>input[id*='InsertRecordCalories']");

I can successfully retrieve CaloriesField.id and CaloriesField.outerHTML, so I know I have the element. But even when I retreive the CaloriesField.outerHTML, what I display in the console msg does not include the value attribute, even though the CaloriesField.outerHTML shows it in the inspect window and in the properties window.

I can see the CaloriesField.value in both the inspect window and in the properties window and they have the values that match back to the form values.

But when I go to access CaloriesField.value, it is a null value. It is the same for innerHTML and defaultValue. 

This is consistent across all five querySelectors I have tried, so I don't believe it is a querySelector problem. 

So I tried: I added a virtual fld and assigned the [@Calories] value to it. I then selected that virtual fld element for processing, successfully retrieved the element and ended up with the same results. No values to process against.

I have looked at each attribute on the input and on the span elements to see if any of them would prohibit/block to use of the data, and did not see anything.

These are the last two pages (add/edit) that need custom code. My Soapbox: If Caspio had implemented Conditional Color Formatting like every other platform provider I wouldn't be in this situation. I have +80 data pages. All of my custom code, except for 2 pieces, have been manipulating color and formatting. This is not an item "to be voted on", it is an industry standard.

Back to busness: I don't know what or where to look next. This is not a logic issue. I don't believe this is a selector issue. But this is an issue.

Does anyone know what might be causing this, have an idea where to turn next, or have seen this behavior in the past? I can't be the first...

Lynda

[DrSimi]

Hi Lynda,

This sounds like a timing issue to me. If the selector has the element, it should have all the values unless there is something else modifying the attributes after. I see the fields are Calculated, and those aren't always populated right away. Are these using SQL formulas? Or how do you populate the value in the field? Are you testing in the DP Preview?  What if you just use CaloriesField = document.querySelector("div>input[id*='InsertRecordCalories']").value in your code instead?

Sorry, it is quite difficult to suggest more things without having access to the actual HTML page.