Learning Portal Widgets
In this section we will discuss the various widgets you can use on the Learning Portal Website.
You will notice that the widgets available here are just about all the ones you can use in the Public website, and then several additional ones.
The key difference with this site is that when someone is on this site, they have a user account, and we know a lot about them (who they are, what training they have taken, what usergroups they are in, etc), so we can act on that data, and also modify that data using some widgets.
Articles
There are 2 widgets here, the Article widget, and the Article Listing widget.
Article Widget
This widget is straightforward. Simply pick the article you want to appear in the widget.
Article Listing Widget
This widget renders a list of articles a user can pick from.
You can choose which category of articles should appear in the list, how many should appear, and whether you want just the title of each article to appear, or, the title, date and a portion of the body text.
If you place an Article Listing widget on a page, and you also have an Article widget on the same page, the Article widget will be the target viewport for the articles the user clicks on in this Article Listing. If you do not have an Article widget on the page, then the user will be taken to a new page with just the article on it.
Calendar
The Calendar widgets are Daily Calendar and Monthly Calendar. Both can be sized, and both are viewports to calendar events for the user — but the actual interaction with the events (including users scheduling new events for themselves) occurs on the actual calendar, which is a new window once the user clicks on an area of the Calendar widget.
Checklist
The Checklist widget displays a specific checklist that will appear on the user’s Learning Portal for them to fill out or view depending on the Checklist’s settings.
Course Listing
There are several widgets here for Course Listings:
Course Enrollment Catalog — this displays a catalog of courses which your users can enroll themselves into with added dropdown filtering (use the course settings > user keywords to assign metadata to each course). You can optionally show courses associated with all Certification Programs or just the user's renewable certifications.
Training For Sale — this widget lists products that can be purchased by the visitor. This includes online courses, live classes, and other products.
Settings include the ability to define which kind of products should be shown (courses, other products, live classes, or any combination of these) and which category to show (each widget can display a single category). It also has dropdown filtering (use the course settings > user keywords to assign metadata to each course). You can optionally show courses associated with all Certification Programs or just the user's renewable certifications.
User Courses — this displays a viewport of courses (list view) the user is active in or has at one point been active in or eligible to take.
Settings include what courses to show (completed, in-progress, un-started, upcoming and/or expired), how to show the list, what graphs to show (if any) and what data to show (if any).
By default, courses are listed in alphabetical order. You can set a custom sort order by using the Catalog ID field (set in the Course’s Settings).
NOTE: On mobile, the graphs (if any) are replaced by text percentages
E-Commerce
For this site, there one e-commerce widget:
Order History — this widget lists all orders the user placed.
Forums
There are two forum widgets.
Forum Listing — this renders the entire Forum viewport on the page.
Forum Simple Listing — this renders a listing of each forum, which - upon the user clicking on it - opens up that forum in a new window.
Icon Buttons
Each Icon Button widget allows you to set up the actual icon to use for the button, and apply the caption (or no caption), and if applying a caption, where it should appear (along the bottom, or to the right of the icon - in which case, the button itself will render wider).
Unlike most widgets, these do not have width/height settings — they are a fixed size (either 1x1, or 1x2 depending on where caption is configured to show up).
NOTE: On mobile, if using tiles, the widget will have an auto-height to show a single row of tiles that will scroll left to right.
Here are the icon buttons you can add to this site:
Back Button — This button navigates the user back one page
Calendar Button — this button opens the calendar in a new window.
Cart Button — this button navigates the visitor to their shopping cart (where they can ultimately check out).
Forum Button — this button opens the forums in a new window.
Home Page Button — This takes the visitor to the Home Page of this site.
Messages Button — this button opens the messages interface in a new window.
Next Button — this button navigates the user forward one page
Notebook Button — this button opens the notebooks interface in a new window.
Online Store Button — this button navigates the visitor to the storefront.
UserConnect Button — this button opens the UserConnect site in a new window.
Libraries
The library widgets allow you to display lists of resources to your users.
You can build libraries in the File Manager in the /_other/libraries/ folder (each folder beneath that one is essentially a library you can use).
You place files in the folders to use, naming them the way you want them to appear in the list (for example, a video file named “important_things_about_safety.mp4” would be listed as “Important Things About Safety”).
To assign a specific icon to the item in the list (as opposed to using the default icon), you can add a .png file of the same name (so, ‘safety101.png’ would be used as the icon for a video named ‘safety101.mp4’).
If you want a description to appear, you can also add a text file of the same name, with the description inside the file. For example, the contents of ‘safety101.txt’ would be used as the description for a video named ‘safety101.mp4’.
Each widget has settings to show the listing as tiles or as a list, and whether or not to display a search bar to filter the displayed results.
NOTE: On mobile, if using tiles, the widget will have an auto-height to show a single row of tiles that will scroll left to right.
Here are the icon buttons you can add to this site:
Resource Library — this will list multiple resource types in a single view (you can select which kinds of resources — audio, documents, and/or videos). Note that if this contains audio resources, only one can exist on a page.
Instructor Led Training
There are 3 widgets in this category:
ILT Enrollment Catalog (self enroll) — displays a list of ILT programs available in which a user can enroll/register themselves.
ILT Upcoming Training — displays a list of ILT meetings in sessions the user is currently enrolled in.
ILT User Listing — displays a list of ILT programs the user is enrolled in.
Messages
The one widget in this category renders a viewport for the Messages interface.
Navigation (and Sidebar)
For this site (and the others as well), you can add a navigation side bar, navigation tab strip, a navigation bar or slide-in navigation.
As a general rule, if the navigation widget is going to list a lot of pages, you should use the navigation bar or slide-in navigation as opposed to the tab strip - since the navigation bar and slide-in navigation can display more pages as you can adjust the height accordingly (the tab strip runs out of space, and pages do not get shown).
Recommendation - if you are designing with mobile viewing in mind, use the slide-in navigation.
While Sidebars have no settings, the settings for other navigation widgets are the same.
Color — this is the color/theme for the widget. There are a number of selections that you can pick from, and also a custom option that allows you to create the exact CSS so you can match it up with your exact desired branding if needed.
Page Group — The Auto option (which is the default) will show pages in the page group of the current page. For example, if the page resides in Page Group 10, then all pages in Page Group 10 will be shown (if you move your pages around into different page groups, this option is a good one since the navigation widget is ‘smart’).
The All Pages option means all pages the user has access to will be shown - across all page groups. If you have a complex site with lots of pages, this may not be a good option to use since the list of menu items can be quite large.
The remaining options (Default Page Group, and Page Group 1 though 99) will show pages specific to that Page Group.
Notebooks
The one widget in this category renders a viewport for the Notebooks interface.
Other
This category of widgets contains various widgets that do not fit into their own category, but are quite useful nonetheless.
Embedded Web Page — use this option to embed a webpage from another website into the page.
Line — add a line to the page (several configurations enable you to set up the visual aspects of the line).
Page CSS — use this to add CSS to the page. The actual widget will not appear to the user.
Page Javascript — use this to add Javascript code to the page. The actual widget will not appear to the user.
Redeem Keycode — use this to enable users to redeem keycodes (from the keycode function) issued to them by their managers or instructors.
Text Passage — use this to add textual content (including images) to the page.
Whitespace — use this to add whitespace. This can be quite useful if you are trying to create widget layouts to force widgets ‘down’ instead of having them float to the top — you can add whitespace widgets as placeholders.
Portal Triggers
There are a variety of widgets in this category.
None of them are visually displayed to the user, but instead, are used to perform an action (a data change for the user) based on if certain data is true about the user (what usergroup they are a member of, what organization or branch they are apart of, or what that value is for a specific field in their profile). If the data is true, then the action will occur.
Note: For system variables, you can enter your own variable name, or enter in one of the LMS pre-defined variables (see the tool-tip).
Add to Organization — adds the user to a branch within an organization you specify.
Add to Usergroup — adds the user to the usergroup you specify.
Award Badge — awards a badge you specify to the user.
Disenroll from Course — dis-enrolls the user from the course you specify.
Enroll in Course — enrolls the user into the course you specify.
Extend Access — extends access to the system or a course you specify for the user - based on the length you specify.
Remove from Organization — removes the user from a branch within an organization you specify.
Remove from Usergroup — removes the user from the usergroup you specify.
Set Master Variable — sets up a name/data pair value for the user.
Set User Locaization — sets up a user’s localization/language
Set User Profile Fields — sets the data fields you specify with the value you specify for the user.
NOTE: You can use dates and date math in the Master Tracking Variables. For examples and ideas on how to use these variables please reference the Knowledge Base and Videos.
Reports and Scores
This category has several reporting widgets.
NOTE: On mobile, due to space limitations, comprehensive average and time spent in course are not displayed.
Archived Reports — displays a listing of all archived reports for the user (which includes course resets, and imported data from other sources).
My Certifications — displays a listing of all certifications for the user has achieved, and the ones they are working towards.
My CEUs — displays all Continuing Education Units the user has earned.
Report Card — displays scores and progress for all courses the user is enrolled in.
User Certificate Listing — provides access to the user to all of their course and quiz certificates.
UserConnect
This category has a few widgets.
Badge Leaderboard — this shows the badge/gamification leaderboard rankings.
Post to Wall — allows a user to submit a quick post to their UserConnect wall without having to open up the full UserConnect window.
User Badges — allows a user to see the badges they’ve been awarded, and also the badges that can be awarded that they have not yet received.
UserConnect Chat Messenger — renders a viewport for the UserConnect Chat/Messenger interface.
UserConnect Viewport — renders a viewport for the UserConnect full interface.
User Summary — displays a summary of the users UserConnect details.
Video
This category contains several widgets enabling you to add videos to this site.
Amazon S3 — add a video hosted on Amazon S3.
Other — add a video hosted on any other website (often they will provide you with an embed code for the video, which gets pasted here).
Uploaded Video — add a video you have uploaded into your LMS system.
Youtube Video — add a YouTube video.