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

Show selection on button click in textarea


Min Su Sun
Go to solution Solved by Jose Leviaguirre,

Recommended Posts

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

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.

buttons.thumb.gif.c501e604195984dbc34b314da6c7b821.gif 

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. bookmarks.png.a3295503ab63d1024a6e084a7dd55d3e.png
  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"actioncontrol.png.a04d2a10e87c139c7caa4fcb097d08ba.png

To make them appear different:

  1. Activate the checkbox "include configuration in bookmark" from the Text Area settingsproperties.png.b7fb43263fbab58d360c801e030417ab.png
  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>
Link to comment
Share on other sites

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

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

  • Solution

Hello Min,

Here is an example of a reset button on one text area that resets the other on the second text area

resetbutton.thumb.gif.9f9a238f2bb266aaee15adce4057d32a.gif 

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

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