Client Scripts and Utilities

By

January 17, 2010

The Client Script Utilities are provided as an inclusive javascript function set that provides some typical runtime essentials for use with OpenWebStudio. These utility functions provide aspects of visual appeal, as well as utilitarian functionality. These functions consist of Expand/Collapse logic, meant to prevent easy layout functionality for hiding and showing group levels at runtime. Additionally, a set of functions are used for automatically selecting Combo items and setting Text values through javascript. Along with the Utilities scripts, support for Microsoft.Net style form validation has been added. Both of these libraries can be added or removed at any time by Checking and Unchecking their inclusion in the View Options.

Tip: When using the lxExpander functionality, be sure to pay close attention to the custom Attribute which is used to provide identification of all tag elements which should be hidden or displayed. Additionally, the STYLE DISPLAY attribute MUST be set in order to avoid javascript errors. A display style left un-set will result in an undefined javascript error.

 Library 

ows.Fetch

Instead of calling a form submit when you want to either post information to the server or refresh one module based on configuration or value changes in another – WITHOUT – refreshing the entire page, you may call the ows.Fetch function, whether or not you are using AJAX within the module originally. This is handled very simply. ows.Fetch forces the module to post back to our ajax library, and update itself without affecting the rest of the page. Two specific examples are provided for Status bars and for event driven Country/Region selection – so refer to them for complete functionality.

SYNTAX

ows.Fetch(

  Module ID of the module to be refreshed (required),

  Current page of the module (required),

  Query Variables to append to the URL (required),

  Target - id of receiving element or tag (optional)

);

ows.Fetch takes three required and a fourth optional parameter. The first – the ModuleID of the module you want to refresh. If you are refreshing OpenWebStudio module, you can just use [ModuleID,System]. The second parameter, the CURRENT page of the module – if you are refreshing a form, its probably safe to use 0. If you don’t want to lose context, use the existing page information for the target module CURRENTPAGE[ModuleID] (like CURRENTPAGE445), a javascript variable. The final parameter consists of any additional query variables you would like to append to the URL when the ows.Fetch requests the new page results. We typically use this when we want some actions to execute ONLY when the page is requested via AJAX.

Target Object – Pump data from one OpenWebStudio into any object on your page
The optional 4th parameter allows you to specify the id value of any element on the page, within which you would like the AJAX result to be rendered. Without this parameter, the content will be displayed with the standard container for the module. For instance, take the following statement.

Onchange=”ows.Fetch('[ModuleID]',0,’’);”

If I wanted ows.Fetch to pump data into a specifically targeted tag, I could do so like this:

<div id=myDiv></div>
<a onclick=’”ows.Fetch('[ModuleID]',0,’’,’myDiv’);return false;” href=”#”>Refresh</a>

For the described Country/Region selection, here is the resulting conceptual HTML:

<select onchange="document.getElementById('frmRegion').selectedIndex = 0;   ows.Fetch('[ModuleID]',0,'r=1');" id="frmCountry" name="frmCountry" >

    <option value="">Select</option>

           {SUBQUERY,

             Name="frmCountry",

             Query="Select EntryID,Text from Lists where listName ='Country' order by text ",

             Format="<option value='\[EntryID\]'>\[Text\]</option>",

             SelectedFormat="<option value='\[EntryID\]' SELECTED>\[Text\]</option>",

             SelectedField="EntryID",

             SelectedItems="[FORMAT,[frmCountry,Form],{ISEMPTY:221}]",

             UseCache="False"}

</select>

<select id="frmRegion" name="frmRegion">

    <option value="">Select</option>

             {SUBQUERY,

             frmRegion,

             Query=" Select EntryID,Text

                   from Lists where listName ='Region' and 

                   ParentID='[FORMAT,[frmCountry,Form],{ISEMPTY:221}]' order by text ",

             Format="<option value='\[EntryID\]'>\[Text\]</option>",

             SelectedFormat="<option value='\[EntryID\]' SELECTED>\[Text\]</option>",

             SelectedField="EntryID",

             SelectedItems="[frmRegion,form]",

             UseCache="False"}

</select>

NOTE: OpenWebStudio will execute the Action script on EVERY request. So – when you are using AJAX, the request will execute first when the page loads initially (module load), then when the AJAX executes the ows.Fetch (data load). Be very aware of this, and you will craft the proper handling methods with ease.

The lxModule function allows you to either Hide or Show an entire Module, either OpenWebStudio or non-OpenWebStudio based, by simply passing the ID of the module, and a Boolean variable identifying that you either Do or Do Not want the module to be visible on the page:

lxModule Syntax:
lxModule(ModuleId,isVisible)

  • ModuleId – The physical ID of the module which should be displayed or hidden. 

  • isVisible – a true or false value, identifying whether the module should be visible or not.

Example:

<A onclick="lxModule(122,false);">Hide the Module</A>        
<A onclick="lxModule(122,true);">Show the Module</A> 

ows.Module Syntax provides the same functionality for any OWS based module:
ows.Module(ModuleId,isVisible)

  • ModuleId – The physical ID of the module which should be displayed or hidden. 

  • isVisible – a true or false value, identifying whether the module should be visible or not.

Example:

<A onclick="ows.Module(122,false);">Hide the Module</A>        
<A onclick="ows.Module(122,true);">Show the Module</A> 

 

The lxExpander Script provides the ability to quickly and easily add expand and collapse DHTML capabilities to your website. With the lxExpander function - the Object which is to be expanded or collapsed must provide a style attribute value for "display:". To set it to expanded - "display: block;"and collapsed - "display: none". Finally, with the attributeName and value parameters for the script, you can easily expand and collapse at a nested level, because you can have multiple attributes which control the expand/collapse abilities.

lxExpander Syntax:
lxExpander(SourceText, ParentElementID, TagType, AttributeName, AutoCollapse, All)

  • SourceText - the Text Value that is checked against the attributes of each of the child elements to determine if the expand/collapse action is meant for them. 

  • ParentElementID - the HTML Tag ID of the base element where the expand/collapse will be initiated. 

  • TagType - identifies the type of tags which will contain the specified attribute. You can use * which means all tags below this parent, or a specific element name, which in our sample was *TR*, this simply limits the focus of the function, so that not all elements need processing.

  • AttributeName - identifies the name of the custom attribute which  is to be checked for the value specified by *SourceText* - when a match is located, the item is flagged as requiring action, and the item is therefore expanded (if collapsed) or collapsed (if expanded) 

  • AutoCollapse -   identifies that the item will automatically Collapse if a different item is expanded, collapsing everything that is not the currently expanded group. 

  • All -   identifies that you want to perform the action on All items - meaning that instead of performing the expand/collapse on items matching the SourceText, it will be performed on all items containing the attribute and identified with the assigned TagType.

Example:

<table width=100% ID="tblMain">
         <TR onclick="lxExpander('Group A','tblMain','TR','mygroup',false,false);"><td>GROUP A</td></TR>
         <TR mygroup="Group A" style="display: none;"><td>ITEM 1</td></TR>
         <TR mygroup="Group A" style="display: none;"><td>ITEM 2</td></TR>
         <TR mygroup="Group A" style="display: none;"><td>ITEM 3</td></TR>
         <TR onclick="lxExpander('Group B','tblMain','TR','mygroup',false,false);"><td>GROUP B</td></TR>
         <TR mygroup="Group B" style="display: none;"><td>ITEM 4</td></TR>
         <TR mygroup="Group B" style="display: none;"><td>ITEM 5</td></TR>
         <TR mygroup="Group B" style="display: none;"><td>ITEM 6</td></TR>

</table>

Because lxExpander had its limitations at times because it was unable to remember the expansion or collapse state between each request, lxToggle was created.

lxToggle Syntax:
lxToggle(objectid, trackingType, trackingName, trackOn, trackOff, visualObjectId, visualAttribute, visualOn, visualOff)

  • objectId – the object that will be shown or hidden based on the current module selection.. 

  • trackingType –tracking the result of the item which was clicked is simple, and provides two options. First,  “F” would provide the ability to store th e current status in a form variable. “C” would allow the variable to be stored more permanently with the cookie collection.

  • trackingName – based on the trackingType, the trackingName identifies the Name of the element or cookie which will contain the value (either TrackOn or TrackOff). 

  • trackOn – the representation of the selected Track item.

  • trackOff – the representation of the unselected Track Item. 

  • visualObjectId -   If you are used to dealing with expandable and collapsible objects, the visualObjectId is the name of the physical web object which displays the current  current state of the item, either via Text of by Image.

  • visualAttribute -   When set or unset the trigger will assign the value to the attribute itself. Typical use of this would include  visual change. Inb general you would need to change an image based on he status (like the expand collapse butons). For images, src is the visualAttribute value. For replacing the content, use innerHTML:. Additionally, when the visualAttribute is assigned as Script the visualOn and visualOff will be executed.

  • visualOn -   the physical value to be written into the visualObjects.visualAttribute value when the item is turned on..

  • visualOff -     the physical value to be written into the visualObjects.visualAttribute value when the item is turned off..

Example:

In the following sample – vis is the visual object which will be modified by changing its src value, ob1 is the targetobjectid and fob1 is the form variable which will contain the current status. Notice that IIF checks the state of fob1 whenever rendering occurs.

<img id=vis src="http://[ALIAS,System]/images/{IIF,"'[fob1,F]'='1'","dn","up"}.gif">

<span onclick="lxToggle('ob1','F','fob1','1','0','vis','src','http://[ALIAS,System]/images/dn.gif','http://[ALIAS,System]/images/up.gif');">Click Me!</span>

<input type=hidden id=fob1 name=fob1 value="[fob1,F]">

<div id=ob1mso-bookmark:_Toc152757814'>,"'[fob1,F]'='1'","block","none"};'>TEST</div>

In the following sample – vis2 is the visual object which will be modified by changing its src value, ob2 is the targetobjectid and fob1 is the cookie variable which will contain the current status. Notice that IIF checks the state of fob1 whenever rendering occurs.


<img id=vis2 src="http://[ALIAS,System]/images/{IIF,"'[fob1,C]'='1'","dn","up"}.gif">

<span onclick="lxToggle('ob2','C','fob1','1','0','vis2','src','http://[ALIAS,System]/images/dn.gif','http://[ALIAS,System]/images/up.gif');">Click Me!</span>

<div id=ob2mso-bookmark:_Toc152757814'>,"'[fob1,C]'='1'","block","none"};'>TEST2</div>

In the following sample – vis3 is the visual object which will be modified by changing its innerHTML value, ob3 is the targetobjectid and fob2 is the cookie variable which will contain the current status. Notice that IIF checks the state of fob2 whenever rendering occurs.

<span id=vis3>{IIF,"'[fob2,C]'='1'","(Expanded)","(Collapsed)"}</span>

<span

onclick="lxToggle('ob3','C','fob2','1','0','vis3','innerHTML','(Expanded)','(Collapsed)');">Click Me!</span>

<div id=ob3mso-bookmark:_Toc152757814'>,"'[fob2,C]'='1'","block","none"};'>TEST3</div>

 

Dynamic Aggregators within OpenWebStudio

There are times which require you to create a specific structure for display a set of sub items, based on clicking options buttons on the toolbar, or elsewhere on your site. The lxContainer function provides the ability for you to identify a module by one or more Container flags, and through this, provide the ability to Hide and Show entire modules and containers, by groups and by name, quickly and easily. It is important to note that these aggregated modules DO NOT need to be OpenWebStudio modules, but in fact can be anything at all. To identify the name, group and moduleID of the target modules, the following tag structure must be provided for each of your elements:

<lxContainer ModuleId=”MODULEID” Name=”NAME” Group=”GROUP”  Marker=”MARKER”  ActiveCSS=”ACTIVECSS”  InactiveCSS=”INACTIVECSS”/>      

Whenever the lxContainer or lxContainerGroup functions are called, they automatically look for all the lxContainer objects on the page, and identify the appropriate functionality. Additionally, the hiding and showing of the modules is remembered within the Users Cookie, so you can show a specific module, leave the page and return, and that module will be the default (when lxContainerGroup is called to initialize the page).

The examples provided for these functions are generalized, but provide the true functionality you would ordinarily see within the OpenWebStudio Aggegation capacity. To reflect this structure into your own site, you would want to do the following:

In the Module-Settings-Header of each your of Modules, place the lxContainer tag which cooresponds to the module itself. When using OpenWebStudio, you can specificy the ModuleID as [ModuleID,System], or can hard code the ModuleID if the module is either Non-OpenWebStudio, or a hard coded value is preferred.

In the Toolbar or Links you would like to Hide and Show the modules from. The onclick functionality should simply be the call to lxContainer for the cooresponding names. Follow the example to see how we normally call the functions.

The lxContainerGroup function should be called for the Groups whenever the modules appear on the page, so that only one is displayed by default.

The Marker identifies the NAME of the object or objects within your page which act as the Marker for the current tab, meaning – if you have an element which is clicked in order to show the current tabbed items, the name of that element is your Marker. This allows the system to automatically set the ACTIVECSS and INACTIVECSS classes to the elements, depending on which Aggregated Group is currently Activated.

Execution of the lxContainer function will automatically locate the lxContainer tag within the page which containes the Name identified, then, locate all other lxContainer tags with the same Group setting. The lxContainer object will automatically SHOW the module matching the ModuleId setting for the lxContainer tag. All other Modules matching the Group assignment will be hidden.

lxContainer Syntax:
lxContainer(Name)

  • Name – The Name of the lxContainer object, identified by the aforementioned lxContainer Tag. Within your lxContainer  object tag you can use the following attributes:
  • ModuleId – the ModuleID that is the target module to be hidden or displayed
  • Name – the name as you will refer to this item within the lxContainer executions
  • Group – the name of the Group of elements which will be hidden when this item is shown.
  • Marker – to help aid the use of this tag, the Market tag identifies which Object will change visually when this item is hidden or shown, the lxContainer logic supports the automatic change of the following Class assignments based on the state.
  • ActiveCSS – the name of the CSS class which will be assigned to the Marker when the state changes to the Active element in the Group
  • InactiveCSS – the name of the CSS class which will be assigned to the Marker when the state changes to the the unselected  element in the Group
  • OnInit –especially when manual loading is assigned to the general settings, the OnInit function fires the first time lxToggle is executed for the current page. The value should be a javascript name.
  • OnLoad – Operates the same as the OnInit attribute, only this execute each an every time the module is displayed, instead of only when requrested
  • OnUnload – when the object is switched to another, the javascript value assigned to the OnUnLoad tag will be executed.

Example:

<lxContainer ModuleId="122" Name="Projects" Group="EmployeeItems" Marker=”tabProjects” ActiveCSS=”Selected” InactiveCSS=”Unselected”/> 
<lxContainer ModuleId="156" Name="Tasks" Group="EmployeeItems" Marker=”tabTasks” ActiveCSS=”Selected” InactiveCSS=”Unselected”/> 
<A onclick="lxContainer(‘Projects’);return false;" name=tabProjects href=#>Projects</A> |
<A onclick="lxContainer(‘Tasks);return false;" name=tabTasks href=#>Tasks</A>
<script language=javascript>
         lxContainerGroup(‘EmployeeItems’);
</script>

Execution of the lxContainerGroup function will automatically locate the lxContainer tags which contain the specific Group attribute value provided. The javascript will then automatically Hide all modules which contain the group name. Either the FIRST defined lxContainer of that Group will be displayed, or the item identified by the Cookie value, matching that group name, will be displayed. The typical utilization of this function is to call the function as an initialization function, as seen in the example.

lxContainerGroup Syntax:
lxContainerGroup(Group,optional SkipCookies)

  • Group – The Name of the lxContainer Group which cooresponds to one or more lxContainer objects, identified by the aforementioned lxContainer Tag.
  • SkipCookies – at times you may want to keep the assigned value out of the cookie. For this scenario, you will want to specify the SkipCookies as true.

Example:

<lxContainer ModuleId="122" Name="Projects" Group="EmployeeItems" Marker=”tabProjects” ActiveCSS=”Selected” InactiveCSS=”Unselected”/> 
<lxContainer ModuleId="156" Name="Tasks" Group="EmployeeItems" Marker=”tabTasks” ActiveCSS=”Selected” InactiveCSS=”Unselected”/> 
<A onclick="lxContainer(‘Projects’);return false;" name=tabProjects href=#>Projects</A> |
<A onclick="lxContainer(‘Tasks);return false;" name=tabTasks href=#>Tasks</A>
<script language=javascript>
         lxContainerGroup(‘EmployeeItems’);
</script>

The LxSetValue Script sets the value of an input element. 

lxSetValue Syntax:

lxSetValue(objectName, Value, emptyValue)

The lxComboSelect Script sets the value of a combo box element.

lxComboSelect Syntax:

lxComboSelect(objectName, CurrentValue)

Average (1 Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share