Course Home Page Layout templating (API version)

Layout description

LMS365 provides an easy way to modify Course home page using templates. Templates are unique per Tenant per Course type. This way, once a template is changed - it is automatically applied for all Courses of the type.

For your convenience, you can use Postman - a powerful GUI platform that provides you with a fast and easy way to work with LMS365 Cloud API.

Let us look at the example below on how to use Postman:

1. Install (you can do it from the official site) and run Postman, select Basic Auth type of Authorization:

Picture1.png

2. After that, type API key for your tenant (provided by support request) both in the Username and Password fields:

Picture1.png

3. Select necessary HTTP method, enter API endpoint (request URL), and then click Send button to send your request:

Picture3.png

4. Now you will get a JSON response:

Picture4.png

 

Now you are able to edit Course Home Page. Please see the examples below.

 

Let's look at the example - we have a "Course Home Page Redesigned" Course type of ELearning:

image2017-7-21_16-53-57.png

 

This page uses a default template for ELearning type of Course. It has the following markup (HTML mixed with special placeholders):

<div class="ef-card-group">
    <div class="ef-card-group--left">
        {COURSE DESCRIPTION}
        <div webpartid2="7b375257-a442-4ce3-bf1b-2fc835fa9d95">
            {LEARNING MODULE}
        </div>
        {ASSIGNMENTS}
        {COURSE COMPLETION BUTTON}
    </div>
    <div class="ef-card-group--right">
        {COURSE INFORMATION}
        {COURSE ENROLLMENT}
        {COURSE CERTIFICATE}
    </div>
</div>

This is a valid HTML markup so it supports all features of HTML and CSS. A div element with class "ef-card-group–left" contains elements which are displayed in the left column, and "ef-card-group–right" is responsible for right column (see the picture above).

Elements in curly brackets (for example {COURSE INFORMATION}) are used to determine special placeholders. Each placeholder element is then transformed into a corresponding informational part related to the Course. Below is the list of supported elements:

 

Placeholder
Element description
{COURSE INFORMATION} Section with Course descriptive information
{COURSE DESCRIPTION} Course description block
{LEARNING MODULE} Learning modules component (Learning paths, Quizzes and Scorms are displayed here)
{ASSIGNMENTS} Assignments component
{COURSE ENROLLMENT} A control which is reponsive for User Enrollment. Shows either "Enroll" button or "Enroll" button and Sessions information depending on the Course Type.
{TRAINING PLAN COURSES} Displays list of Courses inside a Training plan (works for Training Plan only)
{COURSE CERTIFICATE} Displays Certificate if applied
{COURSE COMPLETION BUTTON} Displays "Course completion" button if there are no learning items applied (works only for ELearning)

 

LMS365 has several types of courses:

Name
Type (API value)
ELearning ELearning
ClassRoom ClassRoom
Training Plan TrainingPlan
Webinar Webinar

 

Each of the types from the above has separate layout for Course Home page. This layout is applied to SharePoint page right after Course creation process has been completed.

 

 

Layout update example

Users can use an API endpoint in order to update layouts. All layouts are stored on the Tenant + Course type level. This means once the layout is updated - it affects all Tenant's Courses which use layout-based type of Course pages.

Below is the example of updating ELearning course pages' layout:

API endoint https://api.365.systems/coursePageSettings/update
Authorization Basic using Tenant API key
HTTP Method POST
Request data format
{
    "CourseType": "<Course type>",
    "Layout": "<layout html>"
}

Example of updating ELearning

type of course

POST /coursePageSettings/update HTTP/1.1
Host: api.365.systems
Authorization: Basic REJDNjE5RTktQkUyOS00Rjk1LTg4M0EtMkU2QUExMzRFNDU0OkRCQzYxOUU5LUJFMjktNEY5NS04ODNBLTJFNkFBMTM0RTQ1NA==
Content-Type: application/json
 
{
    "CourseType": "ELearning",
    "Layout": "
        <div class=\"ef-card-group\">
            <div class=\"ef-card-group--left\">
                <div webpartid2=\"7b375257-a442-4ce3-bf1b-2fc835fa9d95\">
                    {LEARNING MODULE}
                </div>
                {ASSIGNMENTS}
                {COURSE COMPLETION BUTTON}
            </div>
            <div class=\"ef-card-group--right\">
                {COURSE INFORMATION}
                {COURSE DESCRIPTION}
                {COURSE ENROLLMENT}
                {COURSE CERTIFICATE}
            </div>
        </div>
    "
}

 

After updating the template as in the example from above user will get the following view of the course he created (Course description section is moved to the right panel below the Course Information section):

image2017-7-21_17-31-25.png

 

 

Hiding information fields

Layout can be changed in any way, not only by changing the components' positions but also by removing them or adding extra HTML or even CSS tags.

For example, users can add CSS styles and hide informational fields. Course page components contain special CSS modificator-classes:

  • ef--course-category
  • ef--course-type
  • ef--course-duration
  • ef--course-id
  • ef--course-trainers
  • ef--course-ceu

The layout In the example below is configured so that all course pages will not show category and trainers info:

{
    "CourseType": "ELearning",
    "Layout": "
        <div class=\"ef-card-group\">
            <div class=\"ef-card-group--left\">
                <div webpartid2=\"7b375257-a442-4ce3-bf1b-2fc835fa9d95\">
                    {LEARNING MODULE}
                </div>
                {ASSIGNMENTS}
                {COURSE COMPLETION BUTTON}
            </div>
            <div class=\"ef-card-group--right\">
                {COURSE INFORMATION}
                {COURSE DESCRIPTION}
                {COURSE ENROLLMENT}
                {COURSE CERTIFICATE}
            </div>
        </div>
        <style>
            .ef--course-category,
            .ef--course-trainers{
                display: none !important;
            }
        </style>
    "
}

Result:

image2017-7-21_17-42-16.png

 


Resetting the changes

In case something went wrong and there is a need to use default templates users can use special endpoint for this:

API endpoint https://api.365.systems/coursePageSettings/reset
Authorization Basic using Tenant API key
HTTP Method POST
Request data format
{
    "CourseType": "<Course type>"
}

Example of updating ELearning

type of course

POST /coursePageSettings/reset HTTP/1.1
Host: api.365.systems
Authorization: Basic REJDNjE5RTktQkUyOS00Rjk1LTg4M0EtMkU2QUExMzRFNDU0OkRCQzYxOUU5LUJFMjktNEY5NS04ODNBLTJFNkFBMTM0RTQ1NA==
Content-Type: application/json
 
{
    "CourseType": "ELearning"
}

 

Executing the request from above will return all ELearning Courses' pages to the default view.

 

 

Default templates

Course Type
Template
Course Type
Template
ELearning
<div class="ef-card-group">
    <div class="ef-card-group--left">
        {COURSE DESCRIPTION}
        <div webpartid2="7b375257-a442-4ce3-bf1b-2fc835fa9d95">
            {LEARNING MODULE}
        </div>
        {ASSIGNMENTS}
        {COURSE COMPLETION BUTTON}
    </div>
    <div class="ef-card-group--right">
        {COURSE INFORMATION}
        {COURSE ENROLLMENT}
        {COURSE CERTIFICATE}
    </div>
</div>
ClassRoom, Webinar
<div class="ef-card-group">
    <div class="ef-card-group--left">
        {COURSE DESCRIPTION}
        <div webpartid2="7b375257-a442-4ce3-bf1b-2fc835fa9d95">
            {LEARNING MODULE}
        </div>
        {ASSIGNMENTS}
    </div>
    <div class="ef-card-group--right">
        {COURSE INFORMATION}
        {COURSE ENROLLMENT}
        {COURSE CERTIFICATE}
    </div>
</div>
TrainingPlan
<div class="ef-card-group">
    <div class="ef-card-group--left">
        {COURSE DESCRIPTION}
        {TRAINING PLAN COURSES}
    </div>
    <div class="ef-card-group--right">
        {COURSE INFORMATION}
        {COURSE ENROLLMENT}
        {COURSE CERTIFICATE}
    </div>
</div>
Was this article helpful?
3 out of 3 found this helpful
Have more questions? Submit a request

Comments

Please sign in to leave a comment.