Course Home Page Layout template for Classic experience (API version)

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):

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:

 

 

LMS365 has several types of courses:

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:

 

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:

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:

 

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

 

Default templates