Show selection on button click in textarea

[Min Su Sun]

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.

[Jose Leviaguirre]

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.

1. Create 3 bookmarks. Set each bookmark to the filtering settings of your choice. 
2. 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:

1. Activate the checkbox "include configuration in bookmark" from the Text Area settings
2. Do 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.
3. Update the corresponding bookmark once the html or button formatting is done

Here 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>

[Min Su Sun]

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?

[Jose Leviaguirre]

yes, try this method that uses only JavaScript

[Min Su Sun]

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?

[Jose Leviaguirre]

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>