Oracle Apex Notebook

Nice filter region template

One of the good things that Oracle APEX Team made to help the new developers are the Packaged Applications. Packaged Applications are working example applications that you can use to get the feel of APEX capabilities. You can also learn how things get done, since you can access all the source.

This leads me to the point of this post. I like very much the way, reports filters and options are organized in these example applications. The person who made this, certainly has a good taste :)

Look at the next screenshot to see what I mean. I'm talking about that gray region where the search field and conditions are.


Since I liked it so much, I've decided to use it in my applications. For instance, I've integrated this region template in our APEX built CRM App (Better.CRM).


How to do it? :) Just copy the code from any of the Packaged Applications and then:

- Shared Components > Templates > Create
- Template Type: Region
- Create Region Template: From Scratch
- Name: Finder Bar
- Template Class: Button Region Without Title
- Template Code:
<br /><style type="text/css"><br />table.TopBarUIFix {<br /> margin:0 0 6px 0;<br /> empty-cells:show<br />}<br />td.TopBarUIFixL {<br /> white-space:nowrap;<br /> border-right:1px solid #cccccc;<br /> border-top:1px solid #cccccc;<br /> border-bottom:1px solid #cccccc;<br /> background:#eeeeee;<br />}<br />td.TopBarUIFixC {<br /> white-space:nowrap;<br /> border-top:1px solid #cccccc;<br /> border-bottom:1px solid #cccccc;<br /> background:#eeeeee url(#IMAGE_PREFIX#htmldb/builder/builder_find.png) no-repeat;<br /> background-position: center;<br />}<br />td.TopBarUIFixC a {<br /> display:block;<br /> height:100%;<br /> width:25px;<br /> text-decoration:none;<br /> cursor:help;<br />}<br />td.TopBarUIFixR {<br /> border:none;<br /> white-space:nowrap;<br />}<br />td.TopBarUIFixL *, td.TopBarUIFixR *, td.TopBarUIFixC * {<br /> vertical-align:middle;<br />}<br /></style><br /><table class="TopBarUIFix" cellpadding="0" cellspacing="0" border="0" summary="" id="#REGION_ID#"><br /><tbody><br /> <tr><br /> <td><img src="#IMAGE_PREFIX#htmldb/builder/builder_find_top.png" width="10" height="8" alt="" /></td><br /> <td rowspan="3" class="TopBarUIFixC" valign="middle"><a style="cursor:default;"> </a></td><br /> <td rowspan="3" class="TopBarUIFixL" valign="middle" style="">#BODY#</td><br /> <td rowspan="3" width="30"><br /></td><br /> <td rowspan="3" class="TopBarUIFixR" valign="middle" ><span style="margin-right:10px;">#CLOSE#</span><span>#EDIT##DELETE##CREATE##CREATE2##PREVIOUS##NEXT#</span></td><br /> </tr><br /> <tr><br /> <td style="background-image:url(#IMAGE_PREFIX#htmldb/builder/builder_find_bg.png);height:60px;"><br /></td><br /> </tr><br /> <tr><br /> <td><img src="#IMAGE_PREFIX#htmldb/builder/builder_find_bottom.png" width="10" height="8" alt="" /></td><br /> </tr><br /></tbody><br /></table>

Now you just need to create an HTML Region in your page, apply the new Finder Template and include the fields in the region.

That's it. I hope this helps you make good looking apps :)

1 comments | Posted in » Oracle Apex, Templates