Priyank Dwivedi Posted April 26, 2023 Share Posted April 26, 2023 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 More sharing options...
Solution Jose Leviaguirre Posted April 27, 2023 Solution Share Posted April 27, 2023 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 <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 More sharing options...
Priyank Dwivedi Posted April 28, 2023 Author Share Posted April 28, 2023 Thanks, Jose! It worked. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now