html Calling Hidden Calculated Fields

[Benades]

Hi,

I noticed that the hidden calculated fields on the Configure Details Page once deployed are visible in the inspect tool:

So my question is; is it possible to call those values on the same page via HTML and display them?
The reason why I want to do this is to have one big Datapage with all the values and calculations between  a display:none div and then call each one in their own spot on the page HTML.

[TellMeWhy]

Yeah, you should be able to using JavaScript, here's an example of how to get the Calculated Value's value using JS
 

 

[Benades]

Hi @TellMeWhy,

Not exactly what I'm looking for because I need to call the calculated from from the page source and not within caspio.

[TellMeWhy]

25 minutes ago, Benades said:

Hi @TellMeWhy,

Not exactly what I'm looking for because I need to call the calculated from from the page source and not within caspio.

it should be the same if you put the script in the webpage instead of DataPage, it's JavaScript, as long as the element exists in the page, it will be able to get it

[Benades]

1 minute ago, TellMeWhy said:

it should be the same if you put the script in the webpage instead of DataPage, it's JavaScript, as long as the element exists in the page, it will be able to get it

Would you mind to give me an example on my application please? How do I call for instance the first hidden value of $225.21?

This would be the HTML code of the card I'm using:

<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-success py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>Earnings (annual)</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>$225.21</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>

 

[TellMeWhy]

22 minutes ago, Benades said:

Would you mind to give me an example on my application please? How do I call for instance the first hidden value of $225.21?

This would be the HTML code of the card I'm using:

<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-success py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>Earnings (annual)</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>$225.21</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>

 

Here's a sample HTML Page, embed code for details page is at the top.

 

 

Here's the code that I used
 

window.addEventListener('load', function() {

document.querySelector("input[name='cbParamVirtual1']").addEventListener('change', function() {

  document.getElementById('test3').innerHTML = document.querySelector("input[name='cbParamVirtual1']").value;
});

}, false);

first line is to wait everything to load in the page.

2nd line is change because Calculated Values/ Fields 'loads' when the DataPage is loaded, so it changes during that time,

3rd line is the script, I added id="test3" on the span for 225.21 so I can put the value there.

You don't need to repeat this multiple times, just get the Calculated Value that may take the longest to load and use that for the addEventListener, then set the innerHTML of multiple elements inside just like what I did.

 

 

[Benades]

1 hour ago, TellMeWhy said:

Here's a sample HTML Page, embed code for details page is at the top.

 

 

Here's the code that I used
 

window.addEventListener('load', function() {

document.querySelector("input[name='cbParamVirtual1']").addEventListener('change', function() {

  document.getElementById('test3').innerHTML = document.querySelector("input[name='cbParamVirtual1']").value;
});

}, false);

first line is to wait everything to load in the page.

2nd line is change because Calculated Values/ Fields 'loads' when the DataPage is loaded, so it changes during that time,

3rd line is the script, I added id="test3" on the span for 225.21 so I can put the value there.

You don't need to repeat this multiple times, just get the Calculated Value that may take the longest to load and use that for the addEventListener, then set the innerHTML of multiple elements inside just like what I did.

 

 

I did exactly like you did but still no joy. How did you give the Virtual1 field the value of "test" perhaps there I am messing up?

[TellMeWhy]

4 minutes ago, Benades said:

I did exactly like you did but still no joy. How did you give the Virtual1 field the value of "test" perhaps there I am messing up?

It's a simple Calculated Value with static value

[Benades]

5 minutes ago, TellMeWhy said:

It's a simple Calculated Value with static value

There it is!! Ah thanks!! Ok let me start testing!

[Benades]

One last question @TellMeWhy if you don't mind;

Why is there styling lost? I have set the formatting but none is applied. Is it fetching it before the styling takes place?

I cannot style it on the table itself because it's a formula field.

[TellMeWhy]

3 hours ago, Benades said:

One last question @TellMeWhy if you don't mind;

Why is there styling lost? I have set the formatting but none is applied. Is it fetching it before the styling takes place?

I cannot style it on the table itself because it's a formula field.

What styling specifically? IF you mean the $ then you can simply put add it like

document.getElementById('test3').innerHTML = "$" + document.querySelector("input[name='cbParamVirtual1']").value;

Caspio Formatting is not done through value level, but, only on the 'front' level, so if you take the value, it won't get the currency, percentage, etc of the formatting

[Benades]

5 minutes ago, TellMeWhy said:

What styling specifically? IF you mean the $ then you can simply put add it like

document.getElementById('test3').innerHTML = "$" + document.querySelector("input[name='cbParamVirtual1']").value;

Caspio Formatting is not done through value level, but, only on the 'front' level, so if you take the value, it won't get the currency, percentage, etc of the formatting

Well the $ and also the decimals places

[TellMeWhy]

11 minutes ago, Benades said:

Well the $ and also the decimals places

ah, well, then we have to change the code a little, try this, this should now work depending on the formatting set.

 

document.getElementById('test3').innerHTML = document.querySelector("span[id^='cbParamVirtual1@Data']").innerHTML;

Just change the Virtual1 part with the proper one, Virtual2, 3, etc.

[Benades]

You are magic! Thanks so much @TellMeWhy