fangsnclaws / Main / Brio Examples

fangsnclaws.com


"We'll sink our fangs and claws into your project!"

Brio Tip # 1 - Blending Checkboxes and Radio Buttons into your Background

This is a pretty standard problem that many people struggle with. In "design" mode you can right-click on your EIS page and easily set the background color using the gui interface. Now your report front end is more colorful ... but your checkboxes and radio buttons stick out like sore thumbs!

Here is a "cookbook" technique for getting your checkboxes and radio buttons to blend in nicely with your solid EIS background color:

Step 1:
Add another command button to your EIS page. While you're at it, add another checkbox or radio button too. It doesn't matter which one you add, but for this example we'll say we added a radio button. That will save some confusion when we get to the sample code.

Step 2:
Right-click on your new radio button. Select the "font" tab, set the font color to the same color you've used in your background and click "okay". See where we're going?

Step 3:
Right-click on your new command button. We're going to add a little bit of JavaScript to execute with the OnClick event. Ready? Here is the JavaScript: "Alert(RadioButton99.Font.Color);"

[Naturally, if the "new" radio button you added was the third radio button on that particular EIS page then the code would read "blah, blah ... RadioButton3.Font ... blah, blah".]

Step 4:
Now press "Ctrl-D" to toggle "design" mode off and click on that newly added command button to execute that single line of JavaScript. Take a pencil and write that number down. That is the internal numeric "name" that Brio uses to select that color. Now we can use it to our advantage!

Step 5:
Press "Ctrl-D" again to get back into "design" mode. Now right-click on your nice solid background color, (without clicking on any object), and select "scripts..." in order to allow us to enter another little piece of JavaScript ... this time associated with the section OnActivate event. Here is the little snippet of JavaScript we are going to add: "RadioButton33.Fill.Color = 10066431;"

[Once again, substitute the number of the radio button you'd like to blend into the background where I've used "33" above. Also, substitute the number you wrote down from our last piece of JavaScript. (Unless you really like the medium lavender that 10066431 will give you!)]

Step 6:
You're an old pro now, so press "Ctrl-D" to get out of design mode. Click on some other section to get out of our EIS screen and then click back into our EIS screen in order to "fire" the section OnActivate event.

The background of the radio button should now 'blend in' nicely to our solid EIS background color.

Step 7:
Now it's time to "clean up". Save the report. [This will make sure our radio button background color stays at the color we set it to.] Throw away that "dummy" command button and "extra" radio button.

And ... (this part is important) ... go back into the EIS screen OnActivate JavaScript and remove or comment out the lines that set the fill colors. e.g. "// RadioButton33.Fill.Color = 10066431;"

If you don't comment these lines out, then any OnActivate JavaScript below these lines may not execute.

And there you have it folks, with a little bit of practice this should take you all of about 5 minutes.

Enjoy!

RonL.