Jose Leviaguirre

Add a tool to select columns even when in viewing mode How it works An Iron Python script updates the columns from a Table visualization with the selection from a Multiple Selection List Box. There are buttons to reset to the default view or from a pre-defined preset. Steps to create this tool Basic Functionality Step 1: Create a text area and add a List Box (Multiple Select). and assign a document property called dataTableColumnSelection Step 2: Click on the [Script...] button and add the following script so when the value of the document property changes, The script requires a table visualization parameter called 't1' IronPython Script from Spotfire.Dxp.Application.Visuals import TablePlot, VisualContent from Spotfire.Dxp.Data import DataPropertyClass #Script Parameters #t1 is a script parameter data table visualization #Script Settings multiSelectColumnsPropertyControl = "dataTableColumnSelection" #multiselect doc prop control dataTable = Document.Data.Tables.DefaultTableReference #reference to the default data table def updateColumns(tablePlotvisualRef): tablePlotVisual = tablePlotVisual=tablePlotvisualRef.As[VisualContent]() cols = tablePlotVisual.Data.DataTableReference.Columns tablePlotVisual.TableColumns.Clear() # 2.2 get document property selection = Document.Data.Properties.GetProperty(DataPropertyClass.Document, multiSelectColumnsPropertyControl).Value # 2.3 Parse columns from selection and add to tablePlotVisual for property in selection: for col in property.split(","): tablePlotVisual.TableColumns.Add(cols[str(col)]) updateColumns(t1) #updateColumns(t2) Step 3: Test the script. It should work adding or removing columns Create the reset button The reset button sets the table with a predefined number of columns Create a text area and add a List Box (Multiple Select). and assign a document property called defaultPreset. Select the columns you want to be as the default view You can now hide or delete the control. The document property should remain with the selected column values Add a button that triggers the following script. Document.Properties["dataTableColumnSelection"]=Document.Properties[selectedPreset] The selectedPreset is a script parameter to pass the name of the document property name. This script transfers the value from the defaultPreset to the dataTableColumnSelection Create different presets Presets are useful to create groups of different columns. The approach is similar to the reset button Create a 3 text area and add a List Box (Multiple Select). and assign a document property called preset1, preset2 and preset3. Make sure you also select some default columns for each preset Delete the 3 text areas, The preset1,2 and 3 document properties are created as String List data type Add a Drop-down list and assign a document property called presets. Link the preset document property so when it changes it runs the setPreset script. Set the selectedPreset script parameter to the presets property Create the save preset button This button updates the column settings saved on each of the presets from the dropdown. It copies the current dataTableColumnSelection values to the corresponing preset Create a button to update the selected preset and add this script called savePreset to it Document.Properties[preset4update] = Document.Properties["dataTableColumnSelection"] set the preset4update as a script parameter pointing to the presets property Create a popup Format the multiselect control to make it wider and accommodate for the column width and height as well as the buttons Follow the instructions from here

Here are different ways to enhance a Dropdown-list Property Control. It requires a new filtering scheme just to update the document property A simple Dropdown-list property control looks like this: The map below is limited by a document property expression: upper([Store Name]) ~= Upper("${selection}") But it is hard to find or search for a value in a long dropdown list, so with a little tweak on the text area html and a script, we can use filters to help get the value This code enhances a dropdown list with a search filter. HTML sets up the structure, JavaScript manages interactions (show/hide filter on button clicks and updates input on selection), and CSS controls visibility. This allows easier searching and selection in long dropdown lists. html <div id="myInput" > <span class="ddown"><SpotfireControl id="dropdown list property control" /> <span class='srchBtn'>⋯</span> </span> <span class="sfFltr hidden"><SpotfireControl id="filter item" /> <span class='closeBtn'>✕</span> </span> <div class="sfCalcVal hidden"><SpotfireControl id="label with First([Store Name])" /></div> <div class="sfInput hidden"><SpotfireControl id="hidden input field prop:'selection' /></div> </div> JavaScript //script params target = "myInput" //node elements container = document.getElementById(target); dropdown = document.querySelector(".ddown"); filter = document.querySelector(".sfFltr"); searchButton= document.querySelector(".srchBtn"); closeButton = document.querySelector(".closeBtn"); selection = document.querySelector(".sfCalcVal"); sfInput = document.querySelector(".sfInput input"); //events searchButton.addEventListener("click",()=>{ dropdown.classList.add("hidden") filter.classList.replace("hidden","visible") oldValue = sfInput.value }) closeButton.addEventListener("click",()=>{ dropdown.classList.remove("hidden") filter.classList.replace("visible","hidden") sfInput.focus(); sfInput.blur(); }) //monitor selection observer = new MutationObserver((x)=>{ sfInput.value = selection.innerText; closeButton.click(); }) observer.observe(selection, {childList: true,subtree: true}); //apply styling and attributes css = `<style> .closeBtn, .srchBtn, .resetBtn, .okBtn{ vertical-align:top; cursor:pointer; } .visible{ position:fixed; z-index:1; } .hidden{ position:fixed; z-Index:-1; } </style>` container.insertAdjacentHTML('afterend',css) The same script can be use even if we change the Property Control to a regular input But if we want more filters with additional functionality with buttons to cancel, apply or reset filters we need to tweak the code html <div class="sfInput hidden"><SpotfireControl id="input field" /></div> <div class="sfCalcVal hidden"><SpotfireControl id="First (StoreName) Calculated value" /></div> <div id="myInput" > <span class="ddown"><SpotfireControl id="Input field property: selection" /> <span class='srchBtn'>⋯</span> </span> <span class="sfFltr hidden"> <SpotfireControl id="region filter" /> <SpotfireControl id="state filter" /> <SpotfireControl id="city filter" /> <SpotfireControl id="store name filter" /> <span title="cancel" class='closeBtn'>✕</span> <span title="cancel" class='okBtn'>✓</span> <span title="reset" class='resetBtn'><SpotfireControl id="reset all filters action control" /> </span> </span> </div> JavaScript //node elements container = document.querySelector("#myInput"); dropdown = document.querySelector(".ddown"); filter = document.querySelector(".sfFltr"); searchButton= document.querySelector(".srchBtn"); closeButton = document.querySelector(".closeBtn"); okButton = document.querySelector(".okBtn"); selection = document.querySelector(".sfCalcVal"); sfInput = document.querySelector(".sfInput input"); oldValue = null //events searchButton.addEventListener("click",()=>{ dropdown.classList.add("hidden") filter.classList.replace("hidden","visible") oldValue = sfInput.value }) closeButton.addEventListener("click",()=>{ dropdown.classList.remove("hidden") filter.classList.replace("visible","hidden") sfInput.value = oldValue sfInput.focus(); sfInput.blur(); }) okButton.addEventListener("click",()=>{ dropdown.classList.remove("hidden") filter.classList.replace("visible","hidden") }) //monitor selection observer = new MutationObserver((x)=>{ sfInput.value = selection.innerText; sfInput.focus(); sfInput.blur(); }) observer.observe(selection, {childList: true,subtree: true}); //apply styling and attributes css = `<style> .closeBtn, .srchBtn, .resetBtn, .okBtn{ vertical-align:top; cursor:pointer; } .visible{ position:fixed; z-index:1; } .hidden{ position:fixed; z-Index:-1; } </style>` container.insertAdjacentHTML('afterend',css) The Action control for the icon to reset filters is: filteringSchemeName= "filtersForPropertyControls" dataFilteringSelectionCollection = Document.Data.Filterings[filteringSchemeName] filteringScheme = Document.FilteringSchemes[dataFilteringSelectionCollection] filteringScheme.ResetAllFilters() If we need