Drop down prompt

#1

Hello,

Is it possible to modify the look and feel of the dropdown prompts using scripting. If so, could you please provide me a sample script that would allow me to change the colour of the drop-down prompt.


Regard's

Sam

#2

You can modify the look and feel of the dropdown filter using its CSS properties.

For example, add the following script on the Ready action of the dashboard to modify the background:

$(".parameterHierarchyInnerWrapper").css({'background': 'gray'});


Image title

Similarly, the following script on the Ready action would modify the boarder style:

$(".parameterHierarchyInnerWrapper").css({'border-color': 'red'})

Image title


For more information on selecting and modifying styles, see the white labeling article.

#3

Thankyou!

Sam


#4

It is also possible to do this via css in an HTML label.


Place an HTML label off canvas and set the text to be


<style>

.parameterHierarchyInnerWrapper

{

background: gray;

border-color: red;

}

</style>



#5

how do you find the object name to use in the code ? I would like to do this for component dropdown lists. Also can I apply css formatting to specific buttons when clicked ?

#6

Doug,
You apply it to the objects ready action. There for it know what object to apply it on.
If you are putting it in the ready action for the entir controll then use the script name and or do the debugger trick to find what you are looking for.

#7

Hello James, I am looking for the dropdownlist version of '.parameterHierarchyInnerWrapper' property. I am using the debugger functions, but have not been able to find it.

#8

The drop-down list is a regular HTML selector, so it does not have a unique property like the filter control. You can target it by locating the correct selector using the developer tools.


As for the formatting when the button is clicked, you can do that but will have to include some JavaScript code to identify when it is clicked and when not. Instead, I recommend using layers and an on-click layer interaction instead.

#9

Have you tried the inspector functionality in chrome?

At the top left of the debugger console, click the 'arrow on a screen' icon. You can then mouse over the dashboard and see what the css element names are.

If you click, the console will drop into the webpage HTML and you can expand the levels to get the element type or class id.


Hope this helps

#10

, that is just what I was looking for. The 'arrow on a screen' icon was just the nudge I needed. It turns out the class name is ".dropDownList-select"