1. Knowledge Base
  2. Customizations
  3. User Interface
  4. Creating Custom Dashboard using CMS page

Creating Custom Dashboard using CMS page

A custom dashboard page can be created by adding dynamic content in a custom cms page. This example covers adding enrolled courses panel in a cms page. A script is added to show enrolled courses panel to a logged in user and register panel to guest user.

CMS page view for anonymous user

 

CMS page view for logged-in user

For logged in user register panel is replaced with enrolled courses panel.

Page Source

<div class="col-sm-4">
          <div class="panel panel-default pricing-big">
                  <div class="panel-heading">

/* Separate Panel heading for guest user and nonguest user   */ 
                      <h3 class="panel-title hide-nonguest">Register</h3>
                      <h3 class="panel-title hide-guest">My Courses</h3>
                  </div>
                  <div class="panel-body no-padding text-align-center">

/* Separate div for guest ( hide this for nonguest)  */ 
                    <div class="price-features hide-nonguest">
                      <a href="../site/signup.do" role="button"><span class="fa fa-user fa-4x"></span></a>
                      <br/><br/>
                      <p>No credit card needed for signup.</p>
                    </div>

/* Separate div for nonguest ( hide this for guest)  */ 
                    <div class="price-features hide-guest text-left" id="pnl_personal" style="overflow:scroll; height:230px;"></div>
                  </div>
                  <div class="panel-footer text-align-center">

/* Separate button href for guest and nonguest users  */ 
                      <span class="hide-nonguest">
                          <a href="../site/signup.do" class="btn btn-primary btn-block" role="button">Go</a>                        
                      </span>
                      <span class="hide-guest">
                        <a href="../site/homeNew.do" class="btn btn-primary btn-block" role="button">View All</a>
                      </span>
                  </div>
          </div>
    </div>
  </body>
 /* script to hide elements having class hide-guest is user id Guest/Admin/Instructor otherwise hide hide-nonguest */   
  <script>
    if(eb_IsGuest || eb_IsAdminSiteAdmin || eb_IsTeacher){
      $(".hide-guest").hide();
    }else{
      $(".hide-nonguest").hide();
    }

 /* script to call java script API to get enrolled courses  */   
    if(!eb_IsGuest && !eb_IsAdminSiteAdmin && !eb_IsTeacher){
       $(document).ready(function(){
          EB_V2_UI.my_enrolled_courses("pnl_personal");
       });  
    }
  </script>    

List of JavaScript APIs

Here is link to detailed documentation 

      EB_V2_UI.site_leaderboard("ldrboard");
      EB_V2_UI.my_enrolled_courses("enrolledCourses");
      EB_V2_UI.my_enrolled_programs("enrolledPrograms");
      EB_V2_UI.my_expired_courses("expiredCourses");
      EB_V2_UI.my_awarded_courses("completedCourses");
      EB_V2_UI.my_awarded_programs("completedPrograms");
      EB_V2_UI.my_subscribed_events("subscribedEvents");
      EB_V2_UI.my_assignments("assignments");
      EB_V2_UI.my_inbox("inbox");
      EB_V2_UI.calendar("cal");
      EB_V2_UI.nw_updates("activitiesContainer");

 

Rating:
Previous
Next

Related Pages

Certificate
User Interface
Javascript
Custom Properties
Email
all

User Interface

Custom Properties

Email Customization

Certificate Customization

Certificate
User Interface
Javascript
Custom Properties
Email
all

User Interface

Custom Properties

Email Customization

Certificate Customization