Rotating Banner on LMS Landing Page

[asjadkhan]

Introduction

One of the most frequent feedbacks we have received from our Clients in terms of their LMS UI experience is to make it a bit more customized.

This specially comes as a result of the contrast that is provided by relatively vibrant experience they have while using the SAP JAM Interface which looks very dynamic thanks to the rotating banner in which we can add multiple Images which move dynamically.

Well, Even with the restriction of using JavaScript on the platform ,it is feasible to build a similar construct on the LMS Landing Page through a Custom Tile with only HTML/CSS.

Solution

The Solution consists of a two-step approach as specified below.

• Configure a Custom tile on the Landing page with the specified target Audience through LMS User Group.


• Add the code in HTML with the CSS’ slideshow Photobanner framework  to dynamically move the tiles providing the effect similar to what we have in SAP JAM.

Below effect as available on the Landing Page.

Rotating Banner

Step 1 : Configuration of the Custom Tile.

1. Navigate to the Landing Page Settings tab on LMS Admin Console under the System               Administration -> Application Administration.



2. Click on Create Custom Tile button on the Screen.



3. Provide the name of the Custom tile that we have created along with adding the required User            group for which the tile is to be made visible.



4. Under the configure Content Editor, Click on the highlighted icon, Upload the image from under          the Upload option of the pop up.



5. Please ensure to copy the URL before clicking OK, as we’ll be using as the Image Source URL in      the HTML/CSS code.We can upload other images in a similar manner and copy their URLs too.

 

 

Step 2 : The CSS Photobanner Framework.

1. The below code provides the manner we use the Image source along with the hyperlinks added     on to the Images in the photobanner Class.The src tag would refer to the image source and href tag   would refer to the required URL, the image would redirect to. This could be a direct link generated   on the LMS as well as any external URL.

CSS Photobanner Framework

 

2. Please also ensure that the photobanner dimension are in accordance with the Custom tile       dimensions that we have configured so we get the optimum UI effect for the Users.



Please note that the Image dimensions as provided in the code and the custom tile layout defines the type of effect. We'll be able to generate on the UI.

Conclusion

The above solution provides a more enhanced view on the Learning Landing Page as opposed to the static images on the Learning Tiles.

These could be used to provide dynamic User navigation by adding hyperlinks that redirect to a particular Learning Item or Course Category or simply to enhance the Organization Branding on the System.

For  further enhancing the User Experience , We can also utilize custom theming. Please refer to the below KBA on more information on the same.

 KBA - https://userapps.support.sap.com/sap/support/knowledge/en/3205475

Feel free to share your thoughts in the comments on the above approach and do let us know of more such customizations possible on the SAP Community.

Please note that the images/GIFs in the above are from internal Demo Instances.