Layout description
LMS365 provides a posibility 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:
2. After that, type API key for your tenant (provided by support request) both in the Username and Password fields:
3. Select necessary HTTP method, enter API endpoint (request URL), and then click Send button to send your request:
4. Now you will get a JSON response like below:
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:
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)
|
---|---|
e-Learning | ELearning |
Classroom | ClassRoom |
Training Plan | TrainingPlan |
Webinar | Webinar |
Each of the types from the above have two separate layouts for Course Home page. By default, OneColumn layout is applied to SharePoint page right after Course creation process has been completed.
Each course layout has its unique id. You need to know the id to modify the particular layout of the particular course. Using GET method and API request
https://api.365.systems/odata/v2/CourseLayouts
you will get all layout ids for all course types. For example, let's narrow the request output, and get ids for e-Learning course layouts:
https://api.365.systems/odata/v2/CourseLayouts?$filter=CourseType eq 'ELearning'
The same filter can be used with other course types.
Result (you can right-click on the picture and select "Show in new tab" if it is too small for you):
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 of OneColumn type - please keep in mind we already know the id of the layout we are going to modify. We will move Course Description section to the right panel below the Course Information section:
API endoint | https://api.365.systems/coursePageSettings/update?courseLayoutId=<LayoutId> | |
Authorization | Basic using Tenant API key | |
HTTP Method | POST | |
Request data format |
|
|
Example of updating ELearning type of course |
|
After updating the template as in the example from above user will get the following view of the course he created:
Hiding information fields
A 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:
" <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:
Resetting the changes
In case something went wrong and there is a need to use default layout templates users can use special endpoint for this:
API endpoint | https://api.365.systems/coursePageSettings/reset?courseLayoutId=<LayoutId> | |
Authorization | Basic using Tenant API key | |
HTTP Method | POST | |
Request data format |
|
|
Example of updating ELearning type of course |
|
Executing the request from above will return all ELearning Courses' pages to the default view.
Default templates
Course Type
|
Template
|
|
---|---|---|
Course Type
|
Template
|
|
ELearning |
|
|
ClassRoom, Webinar |
|
|
TrainingPlan |
|
Comments
Article is closed for comments.