Jump to content

Calling Hidden Calculated Fields


Recommended Posts

Hi,

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

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

 

image.thumb.png.7f606c30afeca3d395f1069b8a0b91e0.png

 

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.

 

image.png.82074cb394b60d234ca309caca18e617.png

 

Link to comment
Share on other sites

1 hour ago, TellMeWhy said:

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

 

image.thumb.png.7f606c30afeca3d395f1069b8a0b91e0.png

 

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.

 

image.png.82074cb394b60d234ca309caca18e617.png

 

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?

Link to comment
Share on other sites

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?

screenshot-127.0.0.1_5500-2021_07.02-12_15_15.png.a2bad6be11c642924ab60e5e1dbefdb5.png

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

image.png.6bc896bd03a0e20f36e49b961397fce8.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...