I wanted to make the title of a Frame object display custom text based on the selection in a dropdown box.
It's pretty straight forward, but it took me a while to get it to work exactly the way I wanted so I thought I'd post it as an example.
Basically the Frame label is made up of 3 DIVs with a little bit of styling applied.
The 1st and 3rd DIVs are each 40% of the Frame width and static text.
The middle DIV is 20% of the Frame width and changes when a selection is made from the dropdown box.
The onClick event of the dropdown box fires off the following code which gets the selected value and injects the content into the Frame.
This javascript could easily be placed wherever needed.
Screencast : https://www.screencast.com/t/JH21m4gVLxc
As I say, it's pretty basic, I'm sure there may be others who know how to do this. But this is intended to help those who don't know.
Sample component is attached ..
It's pretty straight forward, but it took me a while to get it to work exactly the way I wanted so I thought I'd post it as an example.
Basically the Frame label is made up of 3 DIVs with a little bit of styling applied.
The 1st and 3rd DIVs are each 40% of the Frame width and static text.
The middle DIV is 20% of the Frame width and changes when a selection is made from the dropdown box.
Code:
<div style="width:40%; color: white; background-color: #16365c; text-align: center; display:inline-block;">Left DIV Centered</div> <div id="frameTitle" style = "width:20%; color: white; background-color: #16365c; text-align: center; display:inline-block;">Initial Title</div> <div style="width:40%; color: white; background-color: #16365c; text-align: center; display:inline-block;">Right DIV Centered</div>
This javascript could easily be placed wherever needed.
Code:
//Get the value selected in the Selection dropdown box and insert it into the HTML of the middle DIV of the Frame label. var vSelect = {dialog.Object}.getValue('Selection'); vSelect = vSelect+' New Title'; $('frameTitle').innerHTML = vSelect;
As I say, it's pretty basic, I'm sure there may be others who know how to do this. But this is intended to help those who don't know.
Sample component is attached ..
Comment