Blog

Use Case – You would like a button or other Dashboard component to change its formatting when another action, like a button click, happens.

For example, you want to change the background color of one button when another button is clicked. I had a client request to change the background color of a button to indicate that it had been clicked already.

I had another instance, at a client, where a dashboard had several combo boxes on it acting as filters that would change the contents of a Table View on that dashboard only after an additional “Search Button” was clicked. The search button refreshed the Table View contents based on the changed combo box filters. Since the dashboard was setup so the users had to click on the Search Button after all the combo box filters where selected, the client asked that the moment a combo box had been changed that the Search Button background color would change to indicate that it needed to be clicked on, then once it was clicked on (and the Table View refreshed) that the background color of the Search button would reset.

I accomplished all this using a Dashboard Extender Rule.

The screenshot below displays the dashboard example that I set up to demonstrate how to go about this. It is a dashboard with 4 buttons on it, 3 of them represent different colors that when clicked on will change the background color of the button labeled “Reset”. When the Reset button is clicked on it will change the background color of that button back to white.

Step 1 – I created 3 dashboards, 4 buttons, 1 parameter and a supplied parameter.

Step 2. I embedded 2 of the dashboards into the Main dashboard. Note how I also added a Supplied Parameter to this dashboard. This is an important step (they are all important steps) that ensures that the parameter value that will hold the background color “flows” to all the dashboards.

Step 3. To the main dashboard I added a server task that runs a Dashboard Extender Function. This function will run when the dashboard loads and resets the color of the reset button on the dashboard back to white. In a further step I will outline the dashboard function that does this.

Step 4. On one of the embedded dashboards, I added the 3 buttons created previously, that represent colors.

Step 5. On the other dashboard I added the “Reset Button”.

Step 6. I then created an Input Value Parameter. This parameter will hold the color of the background of the “Reset Button”.

Step 7. It was necessary to create a Supplied Parameter that was bound to the parameter previously created in Step 6.

Step 8. On the “Reset Button” I set the background color format property equal to the parameter that I created in Step 6. This will drive the background color of the button as the other buttons are clicked.

Step 9. To reset the background color of the “Reset Button” back to white, I added a selection changed server task that runs a Dashboard Extender Function that changes the parameter value that the background format property is set to. I will outline that function in a further step. In addition, I set the Selection Changed User Interface action on this button to refresh the dashboard that this button is in, so that the user will see the refreshed/reset background color.

Step 10. Each of the "Color Buttons", Blue, Red and Yellow, need to have a Selection Changed Server Task added to them that will run a Dashboard Extender function that will change the value of the parameter that the “Reset Button” uses to set its background color. In addition, these buttons need to be set to refresh the dashboard that contains the “Reset Button”. Notice how in the call of the Dashboard Extender Function I am passing the color as a parameter that the function will use.

Step 11. Create the "On Load" Dashboard Extender function that will reset the background color of the "Reset button" to its default background color. If you don’t do this when the dashboard loads, the background color of the "Reset Button" will be the color of whichever “Color Button” was last clicked.

This function is placed in the Load Dashboard section of the Dashboard Extender and sets the value of the parameter used in the background format property of the “Reset Button” using a XFLoadDashboardTaskResult object.

Step 12. In the Component Selection Changed section of the Dashboard Extender I then created the function that is called by the "Color Buttons". It gets the value of the "BackgroundColor" parameter passed in the function call from the button. This parameter contains the background property color that the "Reset Button" needs to be set to. Using a XFSelectionChangedTaskResult object the function returns and updates the parameter used.

Now when a user clicks on one of the "Color Buttons" the background color of the "Reset Button" changes to the color of the "Color Button" clicked.

If the "Reset Button" is clicked, it changes the background color of the "Reset Button" back to White.

Although this example changed the background color of a Button, it is the same principle if you want to change the color of any other component that has a formattable option upon a button click.