Change visual of radio button filter

[Hesloan Viana]

How can i change the basic visual of radio button filter(vertical) to something like this(side by side)

[B I]

You can make a radio button in HTML and style it however you want in CSS:

https://www.w3schools.com/html/tryit.aspfilename=tryhtml_radio(delete the tags to get them in a line)

You can then listen to changes to the radio buttons in JavaScript and write the value selected to a document property (by updating an input field, then focusing and then blurring):

https://www.w3schools.com/jsref/event_onclick.asp

You can then add a script to that document property that will update the radio filter in Spotfire itself. The below will need tweaking and some error handling, e.g. when the page is reset or left then you will need to make sure the Spotfire filter matches the HTML control).

from Spotfire.Dxp.Application.Filters import *

 

#Choose a page number that has the filtering scheme that you want and the columns showing within the tables

pageNumber = 20

 

#Refer to the filtering scheme

page = Application.Document.Pages[pageNumber]

filteringScheme = "FITLERING_SCHEME_NAME"

filterPanel = page.FilterPanel

for fs in Document.FilteringSchemes:

if fs.FilteringSelectionReference.Name == filteringScheme:

filterPanel.FilteringSchemeReference = fs

 

columnName = "COLUMN_NAME_AS_RADIO_FILTER"

radioButtonValue = Document.Properties["DOC_PROP"] #Get the value selected in the HTML radio buttons from the document property you updated through JavaScript

 

filterPanel.InteractiveSearchPattern = columnName

for filter in filterPanel.FiltersMatchingSearchPattern:

if filter.FilterReference.Name == columnName:

columnNameFilter = filter.FilterReference.As[RadioButtonFilter]()

columnNameFilter.Value = radioButtonValue