Contact Blog Register Login 
Support
Free Trial

Blog

Learning Event Catalog Templates 

Posted on Tuesday 08 March 2011 by Tech Team
In: New Features, Feature Focus, Tech Talk | 1 Comments

The Accord LMS provides token / template support for the Learning Event Catalogs in Learner > My Plan, Archive and Catalog; Manager > Catalog and Enrollment.

Note: This blog post is updated as new tokens become available.  Some legacy tokens may no longer be listed, but they are still honored and properly processed in the template rendering.

The Catalog can be customized to your specifications using whatever font, backgrounds, images and layout you need to achieve your desired presentation. Default templates are provided for all of the existing traditional/default presentations. These default templates may be updated over time and each upgrade to the Accord LMS will copy over the existing files. If you want to customize any of the default templates, be sure to copy the template files to a new directory with a unique name. In this article we will show you how to create a new template for the layout shown below:




Templates
The root /Template folder is located under /WWWRoot/DesktopModules/Interzoic.AccordLMS. Each of the /Subfolders contains a full set of template files. The /Subfolder name becomes the “name” of the aggregated template files. You will need to use an FTP client to create and edit your templates.

Template Files
Header.htm – defines the header of the Catalog TreeGrid.  The default templates use this template for the column headers.

Footer.htm – defines the footer of the Catalog TreeGrid. The default templates do not have any footer HMTL, so their Footer.htm file is empty.

Available Header and Footer Tokens:
  • [EXPANDCOLLAPSE] – master expand/collapse control
  • [LISTALL] - link text to restore "List all Learning Events" after displaying Search results
  • [SEARCH] – Search text box and submit button
  • [SELECT] – Select All, Deselect All control ( checkbox )
Available Label Tokens (localizable from associated RESX files):
  • [DURATIONTITLE] - "Duration"
  • [IFSEARCH] - Message displayed when a search is performed
  • [IFNOTSEARCH] - Message displayed when NO search is performed
  • [LEARNERCATALOGMESSAGE] - Message at top of Learner > Catalog page: "Select Learning Events for enrollment, click on Icon for details."
  • [LEARNERMESSAGE] - Message at top of Learner > My Plan and Enrollment pages: "Click on Learning Event to launch, right click for Context Menu, click on Icon for details."
  • [LETITLE] - "Learning Event"
  • [MANAGERENROLLMENTMESSAGE] - Message at top of Manager > Enrollment page: "Select Learning Events to enroll or drop from Roles/Users. Click on Icon for details."
  • [MANAGERMESSAGE] - Message at top of Manager > Catalog page: "Right click for Context Menu, drag and drop to organize, click on Icon for details."
  • [STATUSTITLE] - "Status"

FolderNode.htm – defines the layout of the Folder nodes.

Available Folder Node Tokens:
  • [CONTEXTMENU] [/CONTEXTMENU]– all content within this tag will present the Context Menu with a right mouse click
  • [DATEEND]* – latest end date if more than one
  • [DATESTART]* – earliest start date if more than one
  • [DEPTHAB]* - the depth of the current node, from the top catalog folder
  • [DEPTHREL] - the depth of the current node, relative to the top folder
  • [DETAILS] - from Folder Details
  • [DURATIONCOMPLETED]* – Total Completed Estimated Duration for all LE in Folder and Subfolders
  • [DURATIONCOMPLETED%]* = DURATIONCOMPLETED / DURATIONTOTAL * 100
  • [DURATIONTOTAL]* – Total Estimated Duration for all LE in Folder and Subfolders
  • [EXPANDCOLLAPSE] – expand/collapse control
  • [ICON] - Folder Icon
  • [ICONWITHTIP] - Folder Icon with Folder Details tool tip
  • [IFTRANSCRIPTENABLE][/IFTRANSCRIPTENABLE] - all content within this tag will present if Transcript is enable for a folder
  • [LECOMPLETED] – All Completed LE in Folder and Subfolders
  • [LECOMPLETED%]* – LECOMPLETED / LETRACKED * 100
  • [LEPASSED]* – All Passed LE in Folder and Subfolders
  • [LETOTAL] – All LE in Folder and Subfolders
  • [LETRACKED] – All Tracked LE in Folder and Subfolders
  • [NAME] - from Folder Details
  • [TRANSCRIPTLAUNCH] - Transcript Report icon
  • [TRANSCRIPTACT.TRANSCRIPTINACT] - ACT or INACT displays depending on Transcript status
    * - available in upcoming release

LENode.htm - defines the layout of the Learning Event nodes.

Available Learning Event Node Tokens (General):
  • [CONDITIONSWITHTIP] – Conditions flag (red or green in learner, always red in manager) with tooltips.  Tool Tips in Learner shows actual Satisfied and Unsatisfied Conditions for the Registered User, in Manager shows a list of all conditions associated with the LE.
  • [CONTEXTMENU] [/CONTEXTMENU]– all content within this tag will present the Context Menu with a right mouse click
  • [DEPTHAB]* - the depth of the current node, from the top catalog folder
  • [DEPTHREL] - the depth of the current node, relative to the top folder
  • [DETAILS] - from LE Details
  • [DATEEND]* – from role (latest date if more than one role)
  • [DATESTART]* – from role (earliest date if more than one role)
  • [DURATION] - from LE Details.  If attempted (Learner only) shows actual duration reported by either the LE or LMS (selectable)
  • [FLAG] - sets Flag status to true (default is not true).  When set, allows conditional processing later in the Template.
  • [NOTFLAG] - sets Flag status to false (default).  When set, allows conditional processing later in the Template.
  • [ICONMEDIUM] – from LE Type, renders the medium icon image
  • [ICONMEDIUMURL] – from LE Type, URL to the medium icon
  • [ICONMEDIUMWITHTIP] – from LE Type, renders the medium icon image with LE Details Tool Tip
  • [ICONSMALL] – from LE Type, renders the small icon image
  • [ICONSMALLURL] – from LE Type, URL to the small icon
  • [ICONSMALLWITHTIP] – from LE Type, renders the small icon image with LE Details Tool Tip
  • [IFFLAG][/IFFLAG] - all content within this tag will present if flag is set
    [IFNOTFLAG][/IFNOTFLAG] - all content within this tag will present if flag NOT set
  • [IFLETYPE:Name of LE Type][/IFLETYPE:Name of LE Type] - all content within this tag will present if LE Type Name
    [IFNOTLETYPE:Name of LE Type][/IFNOTLETYPE:Name of LE Type] - all content within this tag will present if NOT LE Type Name
  • [LELAUNCH] - onClick support to launch Learning Event
  • [NAME] - from LE Details 
  • [SUMMARY] - from LE Details
    * - available in upcoming release

Available Learning Event Node Tokens (only when presented in the Learner module):
  • [ACT.INACT] - if the LE is launchable it will present ACT.  If the LE is NOT launchable it will present INACT.  Used to specify different CSS Classes depending on launchability, such as: <a class="[ACT.INACT]" onClick="[LELAUNCH]">[NAME]</a>
  • [ATTEMPHISTORYURL] - URL to open Attempt History directly, without the Context Menu
  • [COMPLETION] - the completion status value: incomplete or completed
  • [IFCOMPLETE][/IFCOMPLETE] - all content within this tag will present if LE is Complete
    [IFNOTCOMPLETE][/IFNOTCOMPLETE] - all content within this tag will present if LE is NOT Complete
  • [IFCONDITIONSSATISFIED][/IFCONDITIONSSATISFIED] - all content within this tag will present if ALL Conditions are Satisfied or if NO Conditions
    [IFNOTCONDITIONSSATISFIED][/IFNOTCONDITIONSSATISFIED] - all content within this tag will present if ANY Condition is NOT Satisfied
  • [IFHASATTEMPTS][/IFHASATTEMPTS] - if there are any attempts
    [IFHASNOATTEMPTS][/HASNOATTEMPTS] - if there are no attempts
  • [IFLOCATION][/IFLOCATION] - all content within this tag will present if there is a Location value
    [IFNOTLOCATION][/IFNOTLOCATION] - all content within this tag will present if there is NOT a Location value
  • [IFLOCATIONTOCOMPLETE][/IFLOCATIONTOCOMPLETE] - all content within this tag will present if there is a Location to Complete value
    [IFNOTLOCATIONTOCOMPLETE][/IFNOTLOCATIONTOCOMPLETE] - all content within this tag will present if there is NOT a Location to Complete value
  • [IFPASS][/IFPASS] - all content within this tag will present if LE is Passed
    [IFNOTPASS][/IFNOTPASS] - all content within this tag will present if LE is NOT Passed
  • [LEDETAILSLAUNCH] - onClick support to launch the LE Details UI, without the Context Menu
  • [LOCATION] - the Location (slide position) value 
  • [LOCATIONTOCOMPLETE] - from LE Details 
  • [LOCATION%] - Location / LocationToComplete * 100 if Location to Complete is greater than 0 and location is numeric.  If not then value is “?”.
  • [PARENTFOLDER] - Parent Folder name
  • [SCORE] - scaled score value between 0.00 and 1.00
  • [SCOREPERCENTAGE] - percentage score value between 0% and 100%
  • [SCOREDETAILSURL] - URL to open Score Details directly, without the Context Menu
  • [STATUS] - composite of success and completion status using the option set in the LE Type
  • [SUCCESS] - the success status value: unknown; passed or failed
  • [TIPLAUNCH] - onClick support to launch LE Details Tool Tip

Available Learning Event Node Tokens (only when presented in the Learner module WITH conditions):
  • [ATTEMPTLIMIT] - max number of attempts allowed
  • [ATTEMPTLIMITCOUNT] - number of current attempts towards the ATTEMPTLIMIT (can be reset via Limit Reset)
  • [ATTEMPTLIMITCOUNTREMAINING] - number of attempts remaining until Limit is reached
  • [IFATTEMPTLIMITCOUNTLAST] [/IFATTEMPTLIMITCOUNTLAST] - if one attempt remaining
    [IFNOTATTEMPTLIMITCOUNTLAST] [/IFNOTATTEMPTLIMITCOUNTLAST] - if not one attempt remaining
  • [IFHASATTEMPTLIMIT][/HASATTEMPTLIMIT] - if there is an attempt limit
    [IFHASNOATTEMPTLIMIT][/HASNOATTEMPTLIMIT] - if there is no attempt limit

Template.css – allows CSS customization for the Catalog TreeGrid. This file has precedence over the default CSS that ships with the Accord LMS. Colors for mouse over, selected, header colors, failure and success font can all be easily defined.

Notes:
TOKENS can be placed in the LE Details HTML, including LELAUNCH.  This allows limited or complete free form layout for each LE. Tokens in HTML are processed before the rest of the template.

[FLAG] - If FLAG is set, then IFFLAG will be true for the following HTML.  If NOTFLAG is set, then IFFLAG will not be true for the following HTML.  Flag status can be set and unset at different locations.  The logic testing and  processing of IFFLAG true/false logic is sequential.

DEPTHABS
  • My Folders (root folder) has node level = 0
  • First level of Folders (top level folders) that Learner can see have node level = 1
  • All LE and child folders of Top Level folders will have node level = 2
  • All LE will be one node level lower than their parent folder.
DEPTHREL
  • Top Level (selected) Folder (when filtering) is 0 and all child folders and child LE of top level folder are 1, etc.
DEPTHABS and DEPTHREL will allow using classes for each level of the Nodes, such as class="izm_tree.folder.level.[NODELEVEL]"

Demo.LEED
We will create a new template for a fictional course on LEED (Leadership in Energy & Environmental Design) certification. There will be 5 Learning Events: 3 Webinars, an exam and a certification. The LEED template, shown in the image at the top of this page, does not have a header, footer or present any folders. Therefore, all the template files are empty except for LENode.htm.

For this example we will create a copy of the Learner.MyPlan template and rename to Demo.LEED. We will edit the template files locally and then copy back to the web server. Often this in an iterative process where you make edits locally, upload to the server, refresh a browser opened to your Learner module, see how the updates look and then edit some more. From the FTP client you can see we have the four default templates and one demo template: Demo.LEED.



Here is the initial HTML. It is very basic and allows us to easily test our layout design:
    [CONTEXTMENU]<table width="100%"><tr>
    <td valign="top" width="70%">
    <div class="SubHead">[NAME]</div>[DETAILS]
    </td><td align="center">
    <div class="SubHead">[STATUS]</div>
    <img onclick="[LELAUNCH]" src="button.gif" />
    </td></tr>
    </table>[/CONTEXTMENU]

Here is the final HTML used in the LEED Certification Learner Catalog example shown at the top of this blog.  It includes a CSS “button” that dynamically resizes to the provided Link Text. The CSS is shipped with the Accord LMS and is available for you to utilize:
    [CONTEXTMENU]<div style="border: 3px solid rgb(32, 146, 196); padding: 2px;">
    <table width="100%"><tbody><tr>
    <td valign="top" width="70%" style="white-space:normal;padding: 1px 1px 2px 10px;""><div class="HeaderMedium2" style="padding: 0px 0px 4px 0px;">[NAME]</div>[DETAILS]</td>
    <td align="center" valign="center" ><div class="SubHead">[STATUS]</div><br />
    <table align="center" border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
    <td class="izmlms-btntdleft"><br /></td>
    <td class="izmlms-btntdmiddle"><a onclick="[LELAUNCH]">Launch Content</a></td>
    <td class="izmlms-btntdright"><br /></td>
    </tr></tbody></table><br />
    </td></tr>
    </tbody></table>
    </div>[/CONTEXTMENU]
    <HR style=" border:0; border-top: 1px solid #eeeeee; background: #eeeeee; height: 0; width : 95%; text-align: center;" />

Select your Template
After you have uploaded your template to the web server, you can specify which LE Catalog TreeGrids use the new template from Learner > Configuration > Templates and Manager > Configuration > General Details > Templates.



To complete the desired LEED presentation in the Learner module we also a) filtered the Catalog to just the LEED Certification Parent Folder and b) selected to hide the Folder Nodes which also removes the indentation used for nested folders. 

A live example of the LEED demo template can be seen at the Free Demo Site.

Custom Layout depending if Conditions are Satisfied

Manager > Configuration > LE Types
Make a new LE Type called "Confirmation" (for this example)

LE Details HTML for the Confirmation LE
Use [IFCONDITIONSSATISFIED], [IFNOTCONDITIONSSATISFIED], [IFCOMPLETE] and [IFNOTCOMPLETE] to customize three different messages, depending if the conditions have been satisfied and if the LE is completed  - similar to the nested logic shown in the Template example below.

Start Template Example 1
All formatting for Conditions is in the template, only the text is customized in the DETAILS
    [IFLETYPE:Conditions]
    <div style="border: 3px solid rgb(32, 146, 196); width:605px; padding: 2px 2px 2px 2px;">
    <table width="100%"><tbody><tr>
    [IFNOTCONDITIONSSATISFIED]
         <td valign="top" width="100%" style="white-space:normal;padding: 1px 1px 2px 10px;"">[DETAILS]</td>
    [/IFNOTCONDITIONSSATISFIED]
    [IFCONDITIONSSATISFIED]
        [IFNOTCOMPLETE]
         <td valign="top" width="75%" style="white-space:normal;padding: 1px 1px 2px 10px;"">[DETAILS]</td>
         <td align="center" valign="center" >
              <table align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
                     <td class="izmlms-btntdleft"><br /></td>
                     <td class="izmlms-btntdmiddle"><div style="cursor:hand; cursor:pointer;"> <a onClick="[LELAUNCH]">Submit</a> </div></td>
                     <td class="izmlms-btntdright"><br /></td>
              </tr></tbody></table>
         </td>
        [/IFNOTCOMPLETE]
        [IFCOMPLETE]
         <td valign="top" width="100%" style="white-space:normal;padding: 1px 1px 2px 10px;"">[DETAILS]</td>
        [/IFCOMPLETE]
    [/IFCONDITIONSSATISFIED]
    </tr></tbody></table></div>
    <HR style="border:0;  border-top: 1px solid #eeeeee; background: #eeeeee; height: 0; width : 98%; text-align: left;" />
    [/IFLETYPE:Conditions]

    [IFNOTLETYPE:Conditions]
    ...
    ... Standard LE Template (not shown)
    ...
    [IFNOTLETYPE:Conditions]
End Template Example 1

Start Template Example 2
Layout is determined by each LE Details (FLAG is set to true, does not require LETYPE: token).  All formatting, text and Submit [LELAUNCH] is customized in the DETAILS.
    [IFFLAG]
    <div style="border: 3px solid rgb(32, 146, 196); width:605px; padding: 2px 2px 2px 2px;">
    [DETAILS]
    </div>
    [/IFFLAG]

    [IFNOTFLAG]
    ...
    ... Standard LE Template (not shown)
    ...
    [IFNOTFLAG]
End Template Example 2

Endless Possibilities
Token/Template architecture opens up endless possibilities for LE Catalog presentation. Once created, the templates can be used by any other Catalog on your portal and the template files can be FTPed to other Accord LMS sites as well.

An example that only shows Learning Events and utilizes different CSS depending on the Status:


An example that uses the Folder HTML and DEPTH tokens:



Comments


Only Registered Users may post comments.
Interzoic Media LLC    1810 W. State St. #213    Boise ID 83702 USA    Tel. 208.713.5974    Fax. 208.713.5795