Min Su Sun Posted April 18, 2023 Share Posted April 18, 2023 Created 5 buttons in textarea.I made it so that a specific filter is applied when this button is clicked.I want to indicate that when a certain button is clicked out of 5, that button is selected. I want to change the color of the button and display a specific message in the textarea that the button is selected. And if you click another button, the previous selected button should return to its original color.Any way?If you have samples, please share. Link to comment Share on other sites More sharing options...
Jose Leviaguirre Posted April 19, 2023 Share Posted April 19, 2023 One way you can easily achieve this is through bookmarks. Just make sure you "include configuration in bookmark" on your text area from the Text Area settings. Here is an example with 3 buttons that applies some filters when clicked. It indicates which button was clicked and a message on a text area indicating what the button did. Note that the button is a Spotfire Control that can perform any other action such as running a data function, or Iron Python script. Create 3 bookmarks. Set each bookmark to the filtering settings of your choice. Create 3 Action Control Buttons on a Text Area and link them to the corresponding bookmark. If you want only to apply the filters and text area state, select "Filtering Settings" first and then "Page Layout and Visualizations"To make them appear different:Activate the checkbox "include configuration in bookmark" from the Text Area settingsDo not apply any bookmark, but rather make changes on the text area by changing the format of the button or editing the html and update each bookmark individually. If you are using the button to change the filters, change the filters as well. Update the corresponding bookmark once the html or button formatting is doneHere is a sample html code for Button B<div id="buttons"> <SpotfireControl id="85e,,,833" /> ►<SpotfireControl id="26dd,,,,ba33e" /> <SpotfireControl id="35b4c,,,167e" /><BR>Button B was selected. This button displays Euros and Pounds <style>#buttons input:nth-child(2){background:orange;color:white !important}</style> Link to comment Share on other sites More sharing options...
Min Su Sun Posted April 19, 2023 Author Share Posted April 19, 2023 Thank you very much for the detailed answer.This situation is difficult to solve with bookmarks because there are multiple filters such as slider filters and checkboxes as well as buttons in the textarea within the spotfire page.Is there any other way? Link to comment Share on other sites More sharing options...
Jose Leviaguirre Posted April 19, 2023 Share Posted April 19, 2023 yes, try this method that uses only JavaScript Link to comment Share on other sites More sharing options...
Min Su Sun Posted April 19, 2023 Author Share Posted April 19, 2023 I have an additional question for you.Currently, I added JavaScript to the Textarea and set it to be highlighted by selecting a button. I want to create a button called reset in another textarea and reset all selected buttons to their original state when that button is clicked.How can I do it?Any help please? Link to comment Share on other sites More sharing options...
Solution Jose Leviaguirre Posted April 19, 2023 Solution Share Posted April 19, 2023 Hello Min, Here is an example of a reset button on one text area that resets the other on the second text area 1st text area has buttons that are kept highlighted when pressed <style>.on { background-color: #ABFF00; box-shadow: rgb(0 0 0) 0 0px 0px 0px, inset rgb(49 54 56) 1px 1px 1px 1px, rgb(223 223 223) 0 0px 7px;}</style> <span id='myButtons'> <SpotfireControl id="button goes here" /> <SpotfireControl id="replace with button" /> <SpotfireControl id="must be a spotfire button control" /></span> <script>function lightsOff(cssSel){$(cssSel).removeClass("on")} //make day selection buttons highlight when clicked$("#myButtons input").click(function(){ $("#myButtons input").removeClass("on"); $(this).addClass("on"); window.localStorage.setItem("daysBtns",this.id);}) //highlight saved itemsdocument.getElementById(window.localStorage.getItem("daysBtns"))?.classList.add("on")</script>2nd text area with a reset button<div id='resetButton'> <SpotfireControl id="183c1cb350f346bca91a0e94d837f026" /></div> <script>$("#resetButton input").click(function(){ $("#myButtons input").removeClass("on");})</script>In case you want to have the reset button, you can combine them both:<style>.on { background-color: #ABFF00; box-shadow: rgb(0 0 0) 0 0px 0px 0px, inset rgb(49 54 56) 1px 1px 1px 1px, rgb(223 223 223) 0 0px 7px;}</style> <span id='myButtons'> <SpotfireControl id="spotifre button control" /> <SpotfireControl id="spotifre button control" /> <SpotfireControl id="spotifre button control" /></span><hr><div id='resetButton'> <SpotfireControl id="7f49c19796e943868e8d4b8c31458c87" /></div> <script>function lightsOff(cssSel){$(cssSel).removeClass("on")} //make day selection buttons highlight when clicked$("#myButtons input").click(function(){ $("#myButtons input").removeClass("on"); $(this).addClass("on"); window.localStorage.setItem("daysBtns",this.id);}) $("#resetButton input").click(function(){ $("#myButtons input").removeClass("on");}) //highlight saved itemsdocument.getElementById(window.localStorage.getItem("daysBtns"))?.classList.add("on")</script> 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