Trouble Selecting Value From Calculated Field in Details Page

[kpcollier]

I have a webpage that has a bunch of data pages embedded in it. One of these pages is a Details page.

The Details page has a datasource of my Job Table and it is automatically being filtered by Job Number on load of the page. So, the details page is already showing results for 1 Job when the user loads the page.

I have a calculated field in this Details page that is querying another table to see if any records exist with the same Job Number. If no records exist, then the calculated field equals 0. If there are related records, then the value will be 1.

Now, on my webpage, I am trying to select this value in JS and run a function depending on the calculated value from the Details page. If the value = 0, then I want a modal to pop up. If value = 1, then ignore the function.

I am having trouble getting the value from the calculated field in my JS variable to run the condition on. 

At first glance, it seems it is not possible to select the actual calculated field value from the Details Datapage. It seems the 'EditRecord' element and the actual value are in different elements, and there are no IDs I can make use of to select the value.

 

To combat this, I created a span element with an ID, and just put the calculated value in it.

<span id="puID" style="display:none;">[@calcfield:2]</span>

 

And now I am trying to select the value from id 'puID' to use in my script. But, it doesn't work. When I create a variable and set it to the newly created Span element, console.log successfully shows the entire element. But, when I try to set it as the .value of the element, I get 'undefined'. 

var loadCheck = function(){
  var mmCF = document.getElementById("puID").value;
  console.log(mmCF);
  if (mmCF == 0){
    modalT.style.display = "block";
  }
}

window.onload = function(){
  setTimeout(loadCheck, 1000);
}

 

Any help would be appreciated.

[kpcollier]

I think I figured out the issue.

I could be wrong, but it seems you cannot access the 'value' of a span or div element via JS. I switched '.value' to '.innerText' in my script and it is now working correctly. 

Hope this helps someone.

[AveEd]

I have been struggling with this issue for weeks! Please provide full code and elaborate. PLEASE!!

Thank you in advance!

[Wikiwi]

@AveEd Getting the value of a virtual/calculated filed can be done in 2 ways either via its span or its input tag of the field. Basically a virtual/calculated field uses 2 HTML tags one input and one Span I usually use the Input tag to get my data, but the below codes shows how you can get the value on both Span and Input

Input Tag:

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

Span Tag:

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

 

[kpcollier]

Alright. This is what I did, step by step. This workflow is for having a custom Modal pop up on your webpage, depending on the value of a calculated field in a details page that is embedded on that same webpage. It might be over the top, but it works

First things first - Create the details page with a calculated field you want to reference.

Next, add an HTML block, go to Advanced and uncheck 'Enable HTML Editor', then back to the Standard tab. Enter in this code:

<div id="puID" style="display:none;">[@calcfield:2]</div>

This is so we can get the value of our calculated field into an element with an ID that we can use. Hide this div however you want, I personally use the 2 HTML block method (1 above and 1 below the fields you want to hide, easily found on these forums).

Next, go to your webpage or wherever you want the Modal to be and add the Modal HTML code.

  <!-- Modal -->  
  <div id="myModal" class="modal1">

  <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <h3 style="font-weight: 700 !important;">Is this a new job?</h3>
      <p style="color: white !important;">Please start by filling out the Takeoff List.</p>
      <a class="takeoffLink" id="goBtn" href="#">TAKEOFF LIST</a>
    </div>

  </div>

And the CSS to style it:

/* The Modal (background) */
.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: darkblue;
  color: #fff;
  text-align: center;
  margin: auto;
  margin-top: 10%;
  padding: 5px 10px 20px 10px;
  width: 40%;
  border: 4px solid #fff;
}


/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

 

Finally, we need to add the JS to make it do something.

modalT = ID to your custom Modal

cBtn = ID to your close button in custom Modal

puID = ID to your div in the Details datapage that has the value of your calculated field

var modalT = document.getElementById("myModal");
var cBtn = document.getElementsByClassName("close")[0];

cBtn.onclick = function() {
  modalT.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modalT) {
    modalT.style.display = "none";
  }
}

var loadCheck = function(){
  var puID = document.getElementById("puID");
  if (puID.innerText === "0"){
    modalT.style.display = "block";
  }
}

window.onload = function(){
  setTimeout(loadCheck, 1000);
}

 

In this example, if puID = 1, the Modal will not pop up. If puID = 0, the Modal will pop up.