Learner UI Templates

The Accord LMS provides token / template support for the Learning Element Catalog views.

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. Clients can create their own templates or work with the Accord LMS team.

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 Pane Layout

The Accord LMS uses a pane layout for its Catalog view templates. Any of the panes can be used or not. If there is no content in a pane or its associated template file, the pane will simply collapse and not occupy any space on the Catalog view rendered to the user. Each pane has a corresponding template file with the same name except for the Content pane which uses the FolderNode.htm and LENode.htm files.

Template Pane Layout

Template Files

The Template files contain the HTML layout which describes your Catalog view. Tokens are placed into the HTML which are dynamically replaced at run time. If any of the template files are missing, the content for the associated pane will be empty and collapsed.

  • Header.htm – defines the header of the Catalog view. The default TreeView templates use this for the column headers.
  • Footer.htm – defines the footer of the Catalog view.
  • Top.htm – defines the top of the Catalog view. In the default ListView templates the Section Name and QuickLink Tokens are included in this file.
  • Bottom.htm – defines the bottom of the Catalog view.
  • Left.htm – defines the left of the Catalog view. In some of the default ListView templates the navigational Breadcrumb tokens are included in this file.
  • Right.htm – defines the right of the Catalog view.
  • FolderNode.htm - defines the layout for the Folders used in the Content pane of the Catalog view. 
  • CurrentFolderNode.htm - defines the layout for the Folders used in the Content pane of the Catalog view if there is something present in the file and provided a parent folder is found.
  • LENode.htm - defines the layout for the Learning Elements used in the Content pane of the Catalog view.
  • QuickLinks.css - defines the CSS used by the Quick Links in the ListView templates.
  • 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.

[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

[IFEMPTY] [/IFEMPTY] - Displays the content included between them if the Learner Treeview/Listview is empty.

[IFNOTEMPTY] [/IFNOTEMPTY] - Displays the content included between them if the Learner Treeview/Listview is not empty.

[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 Courses and Enrollment pages: "Click on Learning Element link to open."

[LETITLE] - "Learning Element".

[MANAGERENROLLMENTMESSAGE] - Message at top of Manager > Enrollment page: "Select Learning Elements 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".

[TEMPLATEPATH] - Returns the relative path for the template in use. Example of usage: LoadExCanvas('[TEMPLATEPATH]').

Available Top.htm Tokens

[IFDETAILS] - Displays Folder Details.

[IFNOTDETAILS] - Displays when no details are available.

[PARENTFOLDERPLAINTEXTDETAILS] - Displays folder details in plain text. Only the first 255 characters are shown.

[PARENTFOLDERHTMLDETAILS] - Shows Folder details when the "View More" link is clicked.

[PARENTFOLDERCOMPLETION] - Shows Folder percentage completed.

[IFICONCUSTOM] - Displays customized Folder Icon.

[IFNOTICONCUSTOM] - Displays Default Folder Icon.

[ICONCUSTOMURL] - Shows the URL for Customized icon.

[IFPARENTFOLDERDETAILVIEWMORE] - Displays the "View More" link.

[IFPARENTFOLDERCOMPLETED] - Displays if folder attempt is completed.

[IFNOTPARENTFOLDERCOMPLETED] - Displays if folder attempt is not completed.

[SESSIONICONPATH] - Shows the Sessions Home Icon (when Default.Learner.Icon.Session Template applied).

[MYPLANARCHIVEICONPATH] - Shows the My Courses Home Icon (when Default.Learner.Icon.MyPlan Template applied).

[CATALOGICONPATH] - Shows the Catalog Home Icon (when Default.Learner.Icon.Catalog Template applied).

Available Folder Node Tokens

[DEPTHREL] - The depth of the current node, relative to the top folder.

[DETAILS] - From Folder Details.

[EXPANDCOLLAPSE] – Expand/collapse control.

[FOLDERFLATICONSMALL] - Renders the Small Flat icon for Folders.

[FOLDERFLATICONMEDIUM] - Renders the Medium Flat icon for Folders.

[FOLDERFLATICONLARGE] - Renders the Large Flat icon for Folders.

[FOLDERFLATICONXLARGE] - Renders the Extra Large Flat icon for Folders.

[FOLDERICONSMALL] – Renders the Small icon for Folders (formerly called [ICON]).

[FOLDERICONMEDIUM] – Renders the Medium icon for Folders.

[FOLDERICONLARGE] – Renders the Large icon for Folders.

[FOLDERICONXLARGE] – Renders the X-Large icon for Folders.

[FOLDERICONWITHTIP] - Folder Icon with Folder Details tool tip (formerly called [ICONWITHTIP]).

[FOLDERICONMEDIUMWITHTIP] – Renders the Medium icon for Folders.

[FOLDERICONLARGEWITHTIP] – Renders the Large icon for Folders.

[FOLDERICONXLARGEWITHTIP] – Renders the X-Large icon for Folders.

[FOLDERID] - Displays the GUID of a folder.

[FOLDERLOCALID] - Folder's table auto-numbering. Folder creation correlative ID.

[FOLDEROPEN] - Javascript to open a folder. Example of usage, onclick="[FOLDEROPEN]".

[FOLDERREFERENCE1] - Reference 1 folder details field.

[FOLDERREFERENCE2] - Reference 2 folder details field.

[FOLDERSCORE%] - Shows the folder score percentage.

[IFICONCUSTOM] - Displays the customized Folder Icon.

[IFFOLDEREXPANDED] - Shows LE and Child Folders when Learner view is set to expanded.

[IFNOTFOLDEREXPANDED] - If the folder type has not set the expanded property.

[IFHIDEFOLDER] - If the expanded the folder is not shown, only content will be shown.

[IFNOTHIDEFOLDER] - When the folder does not have the hide property set.

[IFFOLDERSCORE] - Shows if folder has score

[IFNOTICONCUSTOM] - Displays Default Folder Icon.

[ICONCUSTOMURL] - Shows the URL for the Customized icon.

[IFTRANSCRIPTENABLED][/IFTRANSCRIPTENABLED] - All content within this tag will present if Transcript is enabled for a folder.

[IFNOTTABTRANSCRIPTENABLED][/IFNOTTABTRANSCRIPTENABLED] - All content within this tag will be present if Transcript is NOT enable for a folder.

[IFNOTHASCHILDWITHTRANSCRIPTENABLED][/IFNOTHASCHILDWITHTRANSCRIPTENABLED] - All content within this tag will be present if any child folder has Transcript disabled.

[IFHASCHILDWITHTRANSCRIPTENABLED][/IFHASCHILDWITHTRANSCRIPTENABLED] - All content within this tag will be present if any child folder has Transcript enabled.

[IFDETAILS][/IFDETAILS] - Display Folder Details.

[IFNOTDETAILS][/IFNOTDETAILS] - Displays No Details Available.

[LECOMPLETED] – All Completed LE in Folder and Subfolders.

[LETOTAL] – All LE in Folder and Subfolders

[LETRACKED] – All Tracked LE in Folder and Subfolders.

[NAME] - from Folder Details.

[MODULEID] - Learner Module ID.

[PARENTFOLDERSCORE%] - Shows the parent folder score percentage.

[TRANSCRIPTLAUNCH] - Transcript Report icon.

[TRANSCRIPTACT.TRANSCRIPTINACT] - ACT or INACT displays depending on Transcript status.

Available Learning Element Node Tokens (General)

[ACTIVITYNAME] - Displays Activity Name. This Token only works when included in [WHILEACTIVITIES] Token. 

[ACTIVITYDESC] - Displays Activity Description. This Token only works when included in [WHILEACTIVITIES] Token. 

[ACTIVITYPOINTS] - Displays Activity Points.This Token only works when included in [WHILEACTIVITIES] Token. 

[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.

[CLICKTRANSCRIPTREPORTMANAGER][/CLICKTRANSCRIPTREPORTMANAGER] - Learner Transcripts enabled for this Folder text string.

[CONDITIONSSMALLWITHTIP] – Small Conditions flag with Tool Tips.

[CONDITIONSMEDIUMWITHTIP] - Medium Conditions flag with Tool Tips.

[CONDITIONSLARGEWITHTIP] - Large Conditions flag with Tool Tips.

[CONDITIONSXLARGEWITHTIP] – X-Large Conditions flag with Tool Tips.

[CONDITIONSICONSMALL] - Small Conditions flag (Icon only) without Tips.

[CONDITIONSICONMEDIUM] - Medium Conditions flag (Icon only) without Tips.

[CONDITIONSICONLARGE] - Large Conditions flag (Icon only) without Tips.

[CONDITIONSICONXLARGE] - X-Large Conditions flag (Icon only) without Tips.

[DEPTHREL] - the depth of the current node, relative to the top folder.

[DETAILS] - from LE Details.

[DURATION] - from LE Details. If attempted (Learner only) shows actual duration reported by either the LE or LMS (selectable).

[EA:EA Name:Start:End] - token that displays Education Activities Name in PDF Template. Optionally, you can indicate a Start and End date filter for the EA.

[ENROLLICONSMALL] - Small plus (+) sign icon displayed in the Leaner's Catalog.

[ENROLLICONMEDIUM] - Medium plus (+) sign icon displayed in the Leaner's Catalog.

[ENROLLICONLARGE] - Large plus (+) sign icon displayed in the Leaner's Catalog.

[ENROLLICONXLARGE] - X-Large plus (+) sign icon displayed in the Leaner's Catalog.

[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.

[ICONLARGE] – from LE Type, renders the large icon image.

[ICONLARGEURL] – from LE Type, URL to the Large icon.

[ICONLARGEWITHTIPS] – from LE Type, renders the Large icon image with LE Details Tool Tip.

[ICONXLARGE] – from LE Type, renders the X-large icon image.

[ICONXLARGEURL] – from LE Type, URL to the X-Large icon.

[ICONXLARGEWITHTIPS] – from LE Type, renders the X-Large icon image with LE Details Tool Tip.

[IFACTIVITIES] - Displays Learning Element Activities

[IFNOTACTIVITIES] - Displays No Activities Available.

[IFDETAILS][/IFDETAILS] - Display Learning Element Details.

[IFNOTDETAILS][/IFNOTDETAILS] - Displays No Details Available

[IFFLAG][/IFFLAG] - all content within this tag will be present if flag is set.

[IFHASATTEMPT][/IFHASATTEMPT] - displays the content only when LE has attempts.

[IFHASNOTATTEMPT][/IFHASNOTATTEMPT] - displays the content only if LE has no attempts.

[IFLISTVIEW] - all content within this tag will present is Learner ListView is active.

[IFNOTLISTVIEW] - all content within this tag will be present is Learner ListView is NOT active.

[IFLOADONDEMAND] - all content within this tag will be present if Load OnDemand is active for Learner Catalog and Manager Module.

[IFNOTLOADONDEMAND] - all content within this tag will be present if Tree Grid view is active for Manager Module.

[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.

[IFSCOREGREATERTHANZERO] [/IFSCOREGREATERTHANZERO] - Shows Score ONLY if greater than zero.

[IFVALIDFOLDERCOMPLETIONSTATUS] - When there is current status, for example, expired enrollment.

[IFNOTVALIDFOLDERCOMPLETIONSTATUS] - When there is no current status, for example, expired enrollment.

[LELAUNCH] - onClick support to launch Learning Event.

[LEREFERENCE] - Reference field from LE Details.

[LEID] - Learning Element ID.

[LELOCALID] - Learning Element local ID. Learning Element correlative creation ID.

[LEEU] - Learning Element Education Units.

[NAME] - from LE Details. 

[RESX][/RESX] - Searches and replaces the text within this tag in the template file.

[SUMMARY] - from LE Details.

[WHILEACTIVITIES][/WHILEACTIVITIES] - All Tokens within these tags will be display if LE has Activities.

Available Learning Element 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.

[COMPLETION] - the completion status value: incomplete or completed.

[IFARCHIVEQUICKLINK][/IFARCHIVEQUICKLINK] - displays Archive content when accessing the Archive Quicklink in Learner My Courses.

[IFFAILED][/IFFAILED] - all content within this tag will present if LE was Failed.

[IFNOTFAILED][/IFNOTFAILED] - all content within this tag will present if LE was NOT Failed.

[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.

[IFINCOMPLETE][/IFINCOMPLETE] - all content within this tag will present if LE is in progress.

[IIFNOTINCOMPLETE][/IFNOTINCOMPLETE] - all content within this tag will present if LE is Not in progress.

[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.

[IFVIEWED][/IFVIEWED] - all content within this tag will present if LE was Started.

[IFNOTVIEWED][/IFNOTVIEWED] - all content within this tag will present if LE was Not Started.

[IFHASATTEMPTS][/IFHASATTEMPTS] - if there are any attempts.

[IFHASNOATTEMPTS][/HASNOATTEMPTS] - if there are no attempts.

[IFILT] [/IFILT] - if Learning Element is of ILT type.

[IFNOTILT] [/IFNOTILT] - if Learning Element is not ILT type.

[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.

[IFSESSIONREGISTER][/IFSESSIONREGISTER] - if ILT has an unique session registered.

[IFSESSIONWAITLISTED] - Shows if there are waitlisted sessions.

[IFSESSIONWAITLISTENABLE] - Shows if session has waitlist enabled.

[IFNOTSESSIONWAITLISTED] - Shows if ILT has no sessions waitlisted.

[WAITLISTCOUNT] - Waitlisted Learners count on selected session.

[IFMULTIPLEREGISTEREDSESSIONS][/IFMULTIPLEREGISTEREDSESSIONS] - if ILT has multiple sessions registered.

[IFNOTMULTIPLEREGISTEREDSESSIONS][/IFNOTMULTIPLEREGISTEREDSESSIONS] - if ILT has not multiple sessions registered.

[IFSESSIONLOCATION][/IFSESSIONLOCATION] - if session has a Location added.

[IFNOTSESSIONREGISTER][/IFNOTSESSIONREGISTER] - if ILT has not a unique session registered.

[IFILTNEXTAVAILABESESSION][/IFILTNEXTAVAILABESESSION] – Shows if there is a session available to register.

[IFNOTSESSIONRECURRANCE][/IFNOTSESSIONRECURRANCE] – shows if session has no recurrences.

[IFSESSIONRECURRANCE][/IFSESSIONRECURRANCE] – shows if session has recurrences.

[ILTSESSIONSOPEN] - link to navigate to ILT sessions. Usage: <button id="btn_[MODULEID][LEID]" type="button" onclick="[ILTSESSIONSOPEN]" ></button>

[ILTNEXTAVAILABESESSIONSTARTDATE] – next session start date, when no session is registered.

[ILTNEXTAVAILABESESSIONSTARTTIME] – next session start time, when no session is registered.

[ILTNEXTAVAILABESESSIONENDTIME] – next session end time, when no session is registered.

[IFPASS][/IFPASS] – shows LE Status if passed.

[IFNOTPASS][/IFNOTPASS] – shows LE Status if not passed.

[IFFAILED][/IFFAILED] – shows LE Status if failed.

[IFNOTFAILED][/IFNOTFAILED] – shows LE Status if not failed.

[IFCOMPLETE][/IFCOMPLETE] – shows LE Status if complete.

[IFNOTCOMPLETE][/IFNOTCOMPLETE] – shows LE Status if not complete.

[ILTREGISTERSESSIONLOCATION] – ILT registered session location.

[ILTREGISTERSESSIONSTARTDATE] – ILT registered session start date.

[ILTREGISTERSESSIONENDDATE] – ILT registered session end date.

[ILTREGISTERSESSIONNEXTDATE] – ILT registered session next recurrence date.

[ILTREGISTERSESSIONSTARTTIME] – ILT registered session start time.

[ILTREGISTERSESSIONENDTIME] – ILT registered session end time.

[ILTREGISTERSESSIONNAME] – ILT registered session name.

[ILTREGISTERSESSIONSTATUS] – ILT registered session status: Open, Full, Started, Ended.

[ILTREGISTERSESSIONTIMEZONE] – ILT registered session time zone.

[ILTREGISTERSESSIONRECURRENCERULE] – ILT registered session recurrence rule.

[ILTREGISTERSESSIONADDTOCALENDARLINK] – ILT registered session calendar link.

[IFSESSIONINSTRUCTOR][ILTREGISTERSESSIONINSTRUCTOR][/IFSESSIONINSTRUCTOR] - shows the Instructor for the registered session.

[ILTREGISTERSESSIONMAXCLASSSIZE] – ILT registered session maximum class size.

[ILTREGISTERSESSIONMINCLASSSIZE] – ILT registered session minimum class size.

[ILTREGISTERSESSIONCURRENTLEARNERS] – ILT registered session current learners.

[LEDETAILSLAUNCH] - onClick support to launch the LE Details UI.

[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.

[STATUS] - Composite of success and completion status using the option set in the LE Type.

[STATUSICONSMALL] - Renders the small icon for LE completion status.

[STATUSICONMEDIUM] - Renders the medium icon for LE completion status.

[STATUSICONLARGE] - Renders the large icon for LE completion status.

[STATUSICONXLARGE] - Renders the X-Large icon for LE completion status.

[STATUSPLAINTEXT] - Composite of success and completion status using only plain text, without style, resx, html tags, etc. 

[SUCCESS] - the success status value: unknown; passed or failed.

[TIPLAUNCH] - onClick support to launch LE Details Tool Tip.

 

Available ILT Sessions Node Tokens (only when presented in the Learner module)

[LAUNCHSESSION] - Token used on the 'onlick' attribute to open the virtual session webinar.

[SESSIONICONSMALL] – ILT sessions small icon.

[SESSIONICONMEDIUM] – ILT sessions medium icon.

[SESSIONICONLARGE] – ILT sessions large icon.

[SESSIONICONXLARGE] – ILT sessions extra-large icon.

[IFSESSIONREGISTER][/IFSESSIONREGISTER] - if ILT session is registered.

[IFNOTSESSIONREGISTER][/IFNOTSESSIONREGISTER] - if ILT session is not registered.

[IFCOMPLETEDPASSEDFAILED][/IFCOMPLETEDPASSEDFAILED] - if session status is Completed, Passed or Failed.

[IFHASATTEMPT][/IFHASATTEMPT] - displays the content only when LE has attempts.

[IFHASNOTATTEMPT][/IFHASNOTATTEMPT] - displays the content only if LE has no attempts.

[IFNOTLEARNERINWAITLIST] - If Learner is not Waitlisted in a session.

[IFNOTSESSIONHASWAITLIST] - If the session has no Learners waitlisted.

[IFSESSIONHASWAITLIST] - If the session has Learners waitlisted.

[IFLEARNERINWAITLIST] - If Learner is waitlisted to a session.

[IFNOTSESSIONWAITLISTENABLE] - Shows if session has waitlist disabled.

[WAITLISTCOUNT] - Waitlisted Learner count.

[IFNOTVIRTUALSESSION][/IFNOTVIRTUALSESSION] - If the session is virtual it will delete everything in between the tokens.

[IFVIRTUALSESSION][/IFVIRTUALSESSION] - If the session is not virtual it will deletes everything in between the tokens .

[IFNOTCOMPLETEDPASSEDFAILED][/IFNOTCOMPLETEDPASSEDFAILED] - if session status is NOT Completed, Passed or Failed.

[IFNOTSESSIONRECURRANCE][/IFNOTSESSIONRECURRANCE] - shows if session has no recurrences.

[IFSESSIONRECURRANCE][/IFSESSIONRECURRANCE] - shows if session has recurrences.

[IFNOTSESSIONFULL][/IFNOTSESSIONFULL] – shows if session is not full.

[IFSESSIONSTARTED][/IFSESSIONSTARTED] – shows if session is started.

[IFSESSIONNOTSTARTED][/IFSESSIONNOTSTARTED] – shows if session is not started.

[IFSESSIONENDED][/IFSESSIONENDED] – shows if session has ended.

[IFSESSIONNOTENDED][/IFSESSIONNOTENDED] – shows if session has not ended.

[IFSESSIONACTIONDISABLED] [/IFSESSIONACTIONDISABLED] – if session is disabled, Learners can not register.

[SESSIONACTIONLINK] - link to register or unregister to sessions. If unavailable it can return en empty value. Example of usage: <button id="btn_[SESSIONID]" type="button" onclick="[SESSIONACTIONLINK]" ></button>

[SESSIONDESCRIPTION] – session description.

[SESSIONID] – session ID number.

[SESSIONNAME] – session name.

[SESSIONSTATUS] – session status: Open, Full, Started, Ended.

[SESSIONSTARTDATE] – session start date.

[SESSIONENDDATE] – session end date.

[SESSIONNEXTDATE] – next session date.

[SESSIONSTARTTIME] – session start time.

[SESSIONENDTIME] – session end time.

[SESSIONRECURRENCERULE] – session recurrence rule.

[SESSIONTIMEZONE] – session time zone.

[SESSIONADDTOCALENDARLINK] – session calendar link.

[IFSESSIONINSTRUCTOR] [SESSIONINSTRUCTOR] [/IFSESSIONINSTRUCTOR] – shows session instructor.

[IFSESSIONLOCATION] [SESSIONLOCATION] [/IFSESSIONLOCATION] – shows session location.

[SESSIONMAXCLASSSIZE] – session maximum class size.

[SESSIONMINCLASSSIZE] – session minimum class size.

[SESSIONCURRENTLEARNERS] – session current learners.

[STATUS] – session status: Completed, Passed, Failed, In Progress, Registered, etc.

Available Learning Element 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.

[CONDITIONTOOLTIP] - launch required conditions tooltip.

[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.

Notes:

TOKENS in HTML - TOKENS can be placed in the LE Details HTML, including LELAUNCH or FLAG. This allows limited or complete free form layout for each LE. Tokens in the 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.

[DEPTHREL] - The value for this token for the top level (selected) Folder (when filtering) is 0. For the immediate child folders and child LE this token has a value of 1. For grandchildren it is 2, etc.

DEPTHREL allows using classes for each level of the Nodes, such as class="izm_tree.folder.level.[DEPTHREL]".

Responsive Layout

The Accord LMS ships with the Cogent responsive skin that can resize and dynamically adapt its layout to any size of viewing device from 300 pixels wide to over 1000 pixels. Part of the magic are the horizontal panes that will automatically stack depending on the width of the browser. Another trick are the 6 classes that we use to either hide or show content depending on the browser width. The 6 classes have different display values depending on the width of the browser. The Default.Response.xxx templates shipped starting with version 2.14 of the Accord LMS make use of these classes to customize the presentation depending on the device viewing the Catalog. These classes are also available in the Cogent skin CSS.

/* 'PC' Width: Greater than 800 pixels */

.DisplayPC { display: visible; }

.DisplayPCNot { display: none;}

.DisplayiPad { display: none;}

.DisplayiPadNot { display: visible; }

.DisplayiPhone { display: none;}

.DisplayiPhoneNot { display: visible;}

/* 'iPad Portrait' Width: Between 600 and 800 pixels */

.DisplayPC { display: none; }

.DisplayPCNot { display: visible;}

.DisplayiPad { display: visible;}

.DisplayiPadNot { display: none; }

.DisplayiPhone { display: none;}

.DisplayiPhoneNot { display: visible;}

/* 'iPhone' Width: Less than 600 pixels */

.DisplayPC { display: none;}

.DisplayPCNot { display: visible;}

.DisplayiPad { display: none;}

.DisplayiPadNot { display: visible; }

.DisplayiPhone { display: visible;}

.DisplayiPhoneNot { display: none;}

 

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.

Notes:

Here is the LENode.htm used in the LEED Certification Learner Catalog example shown at the top of this blog. It includes a CSS “button” that dynamically sizes to the provided Link Text. You may utilize any button you want.

<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 style="padding: 0px 0px 4px 0px;">[NAME]</div>[DETAILS]</td>

<td align="center" valign="center" ><div>[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]" href="javascript:void(0);">Launch Content</a></td>

<td class="izmlms-btntdright"><br /></td>

</tr></tbody></table><br />

</td></tr>

</tbody></table></div>

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. 

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

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.

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:

Endless Possibilities