Carl Backstrom's Blog

In HTML DB there are Show / Hide Region Templates herein known as SHR. And everybody just loves the SHR there just isn't anything better than putting a SHR around a ton of content and making it just go away, look ma no page refresh !

The problem with the SHR is it has no memory in fact you might even say it's downright stupid, in this howto I'll document one of the ways that you can give your SHR the IQ of the common goldfish.

In this example I'm assuming you have file system access to the images directory, you don't need it but I have it, You can absolutely use the file upload utilities in HTML DB all you have to do is change the respective file paths.

I'm breaking up the steps into two sections Site wide/Template steps and Page by Page steps.

Site wide and Template changes.
<br/>This section is about the changes that you will make to your templates and to page 0, in case you don't know items and regions on page 0 appear on every HTML DB page which can be very useful.

1. Download this file and install into your image directory stickyshowhide.js


2. If you do not have a page 0 in your application then create it.


3. Create a region of type "HTML Text" on page 0 and set it's template to "No Template" and set it's Display Point to be "Page Template Body (3. items above region content)".
   
   
   
   



4. Place this code inside the head tags in header section of all your page templates.
   
   
   
   
   <script src="#IMAGE_PREFIX#stickyshowhide.js" type="text/javascript"></script>
   
   
   
   
   


5. 
   Place this code right before the closing body tag in the footer section of all your page templates.
   
   
   
   
   
   <script language="JavaScript" type="text/javascript">
   
   <!--
   
   cShowHideOnLoad();
   
   //-->
   
   </script>
   
   
   
   
   
   Yes, I know that your supposed to put the function call in the onload attribute of the body tag or by overriding the onload attribute using Javascript , but I don't know what you have there and your not going to blame me for breaking your javascript, Lets just call this the brute force method.
   


6. Replace your current SHR template with this. You will of course need to edit if you've made some changes to your template. The important points to notice on the new template is the new javascript in the href attribute and the id's on the img and the div respectively. Heads Up! in upcoming version 1.6 I will be posting be a different region template that will work much better because of how the id attribute is obtained.
   
   
   
   
   
   
   
   
   
   
   
   

   #TITLE# #BODY#

   
   
   
   


7. And thats it for the site wide changes. Next the detail work.

Page by Page changes.
<br/>
The reason to make changes on page by page basis is so that each page can have a distinct memory taking advantage of how HTML DB keeps track of page item values. It also allows you to choose to activate SHR memory on a page or even region basis.

1. 
   In the pages that you want region memory to work create two items of type "Hidden" in the region you created on page 0. You can name them whatever you want but I like to keep it consistent I name them P1_SHOW_HIDE_CSV and P1_SHOW_HIDE_IGNORE_CSV and change the P1 portion to match the page number ex.(P4_SHOW_HIDE_CSV and P4_SHOW_HIDE_IGNORE_CSV)
   
   
   


2. On the "Page Definition" page choose "Edit" in the "Page" section of the "Page Rendering Region"
   
   In the "HTML Header" paste the following code, remember to change the variable values of vShowIds and vHideIds to match the item names that you just put in the page.
   
   
   
   <script language="JavaScript" type="text/javascript">
   
   <!--
   
   var vShowIds = 'P4_SHOW_HIDE_CSV'; /* page item name that saves the interactive states of the regions */
   
   var vHideIds = 'P4_SHOW_HIDE_IGNORE_CSV'; /* page item name of item that sets regions to ignore */
   
   var vHideImg = '#IMAGE_PREFIX#rollup_minus_dgray.gif';
   
   var vShowImg = '#IMAGE_PREFIX#rollup_plus_dgray.gif';
   
   //-->
   
   </script>
   
   
   
   


3. And repeat these steps on all the pages that you want this functionality on.

Hopefully at this point you should have something that acts like this demo.


I've changed the hidden page elements into text fields so you can see the DHTML magic at work.

Tips.

• This only works with on page navigation that do's a doSubmit which is most buttons and tab navigation.


• "Redirect to URL" based buttons or links DO NOT WORK


• But you can build redirect links that do work using the htmldb URL syntex and some javascript
  ex. javascript:redirect('f?p=21931:1:::NO::P1_SHOW_HIDE_CSV:'+ document.getElementById(vShowIds).value)


• You can use all of the usual ways for HTML DB to set the item values for both the vShowIds and vHideIds items they just need to be a CSV string.


• By setting a CSV values of region id's in the vHideIds item you can set certain regions to ignore whatever setting they have


• They only major gotcha that I have come across when using the ignore region item, The region id is based of the region position in the page so if you move the region around the page you changes not only it's id but can affect other region id's.
  The best thing to do is to finalize the page layout before you start putting in id's of regions to ignore, this has be fixed in HTML DB 1.6.

Looking toward the future there have been some changes in 1.6 with will greatly simplify the setup and processing of this along with allowing for an easy way to save the state of all the SHR between user logins, once 1.6 is released I will be updating this article and writing a new one with all sorts of fancy new features.