Thursday, September 17, 2009

Easy Show/Hide items in a Form

For showing and hiding information in a Form you can use a default "Show and Hide Region". But what to do if you want to show/hide some details within a region? The answer is: with a Label Template, some cool jQuery UI stuff and "Stop and Start HTML Table" Items.

1. Create a new Label Template (From Scratch) for Template Class 'No Label'. Call it 'Show/Hide Next Image' or something else you fancy.
2. Edit the Label Template you've just created. Remove everything that's there by default.
3. Set the 'Before Label' to :
<img src="wwv_flow_file_mgr.get_file?p_security_group_id=<your workspace id>&p_fname=
4. Set the 'After Label' to :
" onload="$(this).next().hide();" onclick="$(this).next().toggle('blind');">
5. Now create a "Stop and Start HTML Table" Item just before the items you want to show/hide. Edit that Item and set the label property to the name of the image you want to show (like Info.png) and set the Template to the template you've just created.
6. Run your page... you should see something like this example.

Everything between the "Stop and Start HTML Table" and another "Stop and Start HTML Table" or until the end of your Form will be shown/hidden.

Now you can use this throughout your application to save space or hide information that should only be shown on request. For instance, it is perfect for hiding some detail audit info.
Of course you can tweak the Template and use some other kind of jQuery UI effect, or change it to show/hide on mouse over.
Post a Comment