Advanced Customization

There are multiple places that allow advanced customization. Here we are covering a few examples.   

1.Dashboard Welcome Panel 

Using predefined placements, a welcome panel can be added to the user's dashboard. In the welcome panel, a custom message can be placed. In this panel, conditional messages can be added based upon the user's group membership, course enrollment, program membership, etc.

Example - Adding a Group-specific Message

 Velocity script can be placed to check the user's group membership and based on that, a group-specific message can be presented on the user's dashboard. 

In the screen below a generic message is placed that will be presented to all users, and then a conditional message is placed for sales team members only. 

 

The welcome panel is added using HOME_TOP_PANEL placement and below the message with group membership condition is placed. 

<div class="jarviswidget jarviswidget-color-blue jarviswidget-sortable"
    data-widget-fullscreenbutton="true" data-widget-togglebutton="true" id=
    "welcomeWidget" role="widget">
        <header>
            <div class="jarviswidget-ctrls" role="menu">
                <a class="button-icon jarviswidget-toggle-btn" data-original-title="Collapse" data-placement="bottom" href="#"
                rel="tooltip" title=""><i class="fa fa-minus"></i></a>
                <a class="button-icon jarviswidget-fullscreen-btn" data-original-title="Fullscreen" data-placement="bottom" href=
                "javascript:void(0);" rel="tooltip" title="">
                <i class="fa fa-expand"></i></a>
            </div>
            <h2><strong>Welcome to the Online Learning
            Center</strong></h2><span class="jarviswidget-loader" style= "display: none;"><i class="fa fa-refresh fa-spin"></i></span>
        </header>
        <div role="content">
            <div class="widget-body no-padding">
                <div style="padding-left:10px">
                    <br>
                    <p>Take a few minutes to look around and check out these useful resources to get familier with the site:</p>
                    <ol>
                        <li>Take a <a href="../site/homeNew.do?tour=true&amp;restartTour=true">
                            <i class="fa fa-lg fa-fw fa-car"></i>Custom Tour</a>
                        </li>
                        <li>Check out new print and video <a class="external_link" href="../theme-lms/cms.do?view=Guides">How To Guides</a>
                        </li>
                        <li>Can't find what you are looking for?Submit a question through the <a class=
                        "external_link" href="../site/cms.do?view=contact_us">Help Desk Form</a> and one of our support center team will getback with you.
                        </li>
                    </ol>
                    <hr>
                    #if($UIContext.isActiveGroupMember("d22f0b0d-259c-11e5-aa01-002590f9ff98"))
                    <h3 style="margin: 0 0">Hello Sales Team Members!</h3><br>
                    <p>We recommend all sales team member to get familier with sales strategies and company specific policies pleaseenroll in Sales team course. 
                    <a class="btn btn-md btn-success" href=
                    "/oltpublish/site/program.do?dispatch=showCourseSession&id=83214f0b-76e1-11e6-807c-0cc47a352510">
                    Enroll Now</a></p><br>
                    #else 
                    #end
                </div>
            </div>
        </div>
</div>

There are many other conditions that can be checked including a user's program membership, course membership, and based on that, a specific message can be presented. 

The welcome panel can also be used for placing tutorial/orientation videos or links for user guides etc.

2. My Items widget - Changing the Default Tab

In the My Items panel, by default, enrolled courses appear as the first tab. Using the CMS, a data source can be created using the name 'dashboard.js' and the below code can be added to make Enrolled Program as the first tab. 

Code:

localStorage.removeItem("jarvisWidgets_position_/oltpublish/site/homeNew.do_widget-grid");
$("#tab_MY_PROGRAMS").parent().detach().prependTo("#homeTabs1");

 

3. Custom Navigation

A custom navigation menu can be created using Site Admin -> Placements -> V2 Navigation. That provides flexibility to arrange the menu links in the order you want. It also allows you to create new items in the navigation menu.

Custom menu example:

Example Code for V2 Navigation: In this example, the first default menu items are placed; after that additional links are added in the navigation menu if the user is a guest or learner (ie: Not Admin or Site Admin).

${UIContext.getUiManager().getTopNav().getHtml()}

#if (! $UIContext.isAdminOrSiteAdmin() )
<hr/>  Top Courses 

<ul class="customMenu">
  
  <li><href="/oltpublish/site/program.do?dispatch=showCourseSession&id=f311a22b-6c54-11e4-bc5a-00163e0054ca" target="_parent" ><class="fa fa-lg fa-fw fa-book"></i<span class="menu-item-parent">Sales Training (*****)</span></a></li>   
  
    <li><href="/oltpublish/site/program.do?dispatch=showCourseSession&id=f311a22b-6c54-11e4-bc5a-00163e0054ca" target="_parent" ><class="fa fa-lg fa-fw fa-book"></i<span class="menu-item-parent">Customer Support</span></a></li>
  
      <li><href="/oltpublish/site/program.do?dispatch=showCourseSession&id=f311a22b-6c54-11e4-bc5a-00163e0054ca" target="_parent" ><class="fa fa-lg fa-fw fa-book"></i<span class="menu-item-parent">Computer Basics</span></a></li>
        
 </ul>
#end

 


Rating: