Jump to content
We've recently updated our Privacy Statement, available here. ×

How to assign a boolean document property to a CSS slider


Priyank Dwivedi
Go to solution Solved by Jose Leviaguirre,

Recommended Posts

I am building a show/hide 'toggle switch' functionality for lines and curves.

I know how to set the visibility of lines and curves in IronPython. Where I am struggling is to assign a boolean document property to a CSS slider implemented as in the attached code snippet.

Is there a sample example for assigning document property (true/false) to a CSS slider state?

<html><style>/* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 60px; height: 34px;} /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0;} /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;} .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;} input:checked + .slider { background-color: #2196F3;} input:focus + .slider { box-shadow: 0 0 1px #2196F3;} input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}  </style></html>  <!-- Rectangular switch --><label class="switch"> <input type="checkbox"> <span class="slider"></span></label>
Link to comment
Share on other sites

  • Solution

You can achieve the same thing without using any JavaScript with calculated values. The calculated value toggles a document property when clicked so when the document property changes, you can trigger your script that hides or shows the lines and curves. The calculated value can display a way to indicate the status of the Boolean document property

"lines and curves are: " & if(${cb},"[on]","[off]")

The JavaScript route is a similar approach. Just wrap the calculated value with an identified tag

cb.gif.aee4b8ec686eef38f04ec842047771d9.gif 

<a id='myCheckbox'> <SpotfireControl id="091b854f588b407ea376e0f8e3d1a7f8" /></a>

and add this script

/*usage:just wrap a calculated value with: <a id="myCheckbox"><spotfire calculated value goes here></div> requirements for the calc val spotfire control: The calc val drives a boolean doc prop "sw1" that toggles its state when clicked To change the bool doc prop sw1 when clicked, assign the ironpython script: Document.Properties["sw1"] = now Document.Properties["sw1"] The calc val custom expression can be just the bool doc prop: ${sw1} or something more descriptive: "lines and curves are: " & if(${sw1},"[on]","[off]") Make sure the calcValOutput script param here matches the sw1 output*/  //script parametersid = "myCheckbox";calcValOutput = "lines and curves are: [on]";  //get doc prop value that comes from calc value expressioncv = document.getElementById(id); //add a placeholder for the custom expression html to render as a sibling of the idcb = document.createElement('div');  //set default value according to doc prop. Wait a bit for the actionControl to rendersetTimeout(()=>{ isChecked = cv.innerText==calcValOutput;  html = ` <label class="switch"><input type="checkbox" ${isChecked?"checked":""}><span class="slider"></span></label>`   cb.innerHTML = html; cv.insertAdjacentElement("afterend",cb);  //set the slider to click the calculated column cb.querySelector(".slider").onclick = ()=>{cv.querySelector(".actionCell").click()}; //hide the calc val cv.hidden = true; },1500); //adjust milliseconds accordingly  //add style for look and feel. This can be placed on a different scriptcss=`<style>/* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 60px; height: 34px;} /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0;} /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;} .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;} input:checked + .slider { background-color: #2196F3;} input:focus + .slider { box-shadow: 0 0 1px #2196F3;} input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);} </style>`; cv.insertAdjacentHTML("afterend",css);
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...