Layout and user interfaces

Identify the user interface

Logged in to the platform, the user accesses their information at the top right of the screen :

• General information: photo, surname, first name, main domain, etc.

• Access to a back office file – based on permissions

• Access to My Profile – based on permissions

• Edit your photo – based on permissions

• Change your password - based on permissions

• Change Domains

• Set language

  Log Out Action

Information available at the top right of the screen

Access the toolkit in the user interface

If authorised, the user accesses the toolbox via the cogwheel to the left of their photo, they will be able to make one:

• Export PDF

• Export Excel

• Print

• Or have access to content traces

View version in the user interface

The number of the installed Xperience LMS version can be found in the bottom right footer.

Access the Notification Center in the UI

If enabled, the user can access the notification centre via the cogwheel to the left of their photo, with an indicator of the number of unseen messages. This makes it possible to centralise all communications in one place.

In this notification centre, you will find information on :

• Badges : Receive a message when you get or update a badge

• Notifications : Receiving a message related to an email received.

• Tasks : Receive one message per user task.

• Skills : Receive a message when a skill is recommended, deleted, updated, validated and acquired through training.

• Community : receiving messages in specific contexts: new internal news, new contribution, new topic of a forum, reply to a message in a forum.

Manage the footer

Open Settings menu > Visual > Footer

Procedure

• Click on the pencil to open the Html editor: you can add or edit text from the Design tab.

• There is no image or link manager in the HTML editor. To add more: click on the Html tab to edit the HTML code.

To add an image :

1. Encode your image in base 64 : Use a site that allows you to encode in base 64. Example : https://www.base64-image.de

2. In the HTML tab, insert the code of your image in the following tag: <img height="110" src="THE CODE HERE" alt=""/> (alt = for accessibility reading the name of the image when hovering with the mouse).

3. Click Save.

Additional Information

If you use the platform in multi-language : update your footer in all languages.

In the context of multi-domain:

• A user sees the footer of the domain on which they are positioned.

• If the domain on which it is positioned does not have a footer : it sees the footer of the parent domain if it exists.

Understand the different types of layouts

Open Settings > Design > Page layouts

Some pages of the platform can be configured in order to adapt to the context of your training system. The layout of the information and the type of information displayed are customisable.

The types of customisable layouts are :

• The Home type: Page available depending on the user's role. A Home page can be directly integrated into the menu or can be accessed from another home page

• Learner Session type: A page that can be accessed by a user who is enrolled in a training session. From this page, they can start their training and access information related to this session. It is possible to customise a learner's Session template at the level of a course.

• The Catalog Training type: A page that is accessible to a user who is viewing a course published to the Front Office Training Catalog. It is possible to customise the Training template in the catalogue at the level of a course.

• The Catalog Rating type: A page that can be accessed by a user who views an assessment published to the Front Office Training Catalog. It is possible to customise the Catalog Evaluation template at the level of an evaluation.

• The Catalog Curriculum type: A page that is accessible to a user who views a course published to the Front Office Training Catalog. It is possible to customise the Curriculum template in the catalogue at the level of a Curriculum.

Additional Information

A community group's page is handled in the Manage community group layout section.

Find and view a layout

Open Settings > Design > Page layouts

Procedure

1. If necessary, fill in the search criteria and click on Search.

   • The list of layouts matching the search criteria is available.

2. Select a layout and click View Layout or click directly on the layout you want to view.

Verification

The layout description sheet appears

Create a description card for a Home layout

Open Settings > Design > Page layouts

Procedure

1. Click New.

2. Fill in the different fields of the page of a layout :

   • Layout Name: Back Office name of the layout so that you can find it more easily.

   • Type: Select the Home type.

   • Page title displayed to the user : The title displayed to the user when viewing this page. If you don't want a title to appear: insert a space in this field.

   • Code: In the case of multi-domain or multilingual, the code allows you to customise the Home pages by domain and/or language. This makes it possible to have different layouts by language and by domain without multiplying menu entries:

   • If the code is the same between a Home layout on a Root Domain and a subdomain: The layout of the subdomain overrides that of the root domain.

   • If the code is the same between two Home layouts, each with a different language: the user will automatically see the layout of their language

   • Priority: No impact for Home layouts.

   • Domain: Automatically completed according to the domain on which the user who creates the layout is positioned.

   • Cover image: The addition of the cover image is only possible after the page has been saved for the first time.

3. Click Save.

Verification

A confirmation message appears on the screen.

Additional Information

Multi-domain case:

• A Home page is created at the root domain with code A1.

• This page is duplicated with the same A1 code or a new page with the same A1 code is created at a subdomain level

• Subdomain users will see the page created at their subdomain, not the root domain.

The case of the multilingual  

• A Home page is created in French with the ACC code and another is created in English with the ACC code.

• French-speaking users will view the home page in French and English-speaking users will view the English-language homepage.

There are several ways to manage multilingual :

• Create a home by language (useful if you want to post messages) using the same layout code: indicate the target language here, so you can modify the title of the web parts and post messages in each language.

• Create a common welcome for all : leave the field blank and use the Web parts without changing the titles (they will be automatically translated), finally post messages in the language of your company.

Create a Learner Session Layout Listing

Open Settings > Design > Page layouts

Procedure

1. Click New.

2. Fill in the different fields of the page of a layout :

   • Layout Name: Back office name of the layout so that you can find it more easily.

   • Type: Learner's session.

   • Page title displayed to the user: No impact for learner's Session layouts

   • Code: In the context of multi-domain, the code allows you to customise a learner's Session pages.

   • If the code is the same between a learner's session layout on a Root Domain and a subdomain : The layout of the subdomain overrides that of the root domain.

   • If the code is different between two learner session layouts on a Root Domain and a subdomain : Both layouts are available.

   • Language: Complete the language for which this Learner Session page applies

   • Priority: Complete the priority from 0 to 10. Priority is used to order all of a learner's Session layouts in the drop-down list, with the highest priority being 0. The highest priority page is the one that appears by default when creating a Training card.

   • Domain: Automatically completed according to the domain on which the user who creates the layout is positioned.

   • Cover image: Adding the cover image is only possible after you first save the Understand how the cover image and thumbnail works page.

There are three levels of image management:

• Depending on the learning method:

  • Thumbnail image: Applies if the image has not been customised on the training sheet.

  • Cover image: Applies if no cover image has been defined on either the layout template associated with the course or the course card.

• Depending on the layout template applied to the training:

  • Cover image: When creating layouts such as Learner Session, Catalog Training, Catalog Assessment, Catalog Curriculum: You can associate a cover image with them. This will apply if no cover image has been defined on the training sheet. If you do not insert a cover image and no cover image is defined at the training level: the cover image of the learning modality will not be visible.

• Depending on the training:

  • Image Thumbnail: Possibility to insert a custom thumbnail to the training by embedding an image in Image for the catalogue.

  • Cover image: If customised, the cover image uploaded to the course will apply to the Catalog and Session page. If there is no customisation: The customisation of the Session layout applies.

• To understand when the cover image of a learner's Session page applies.

• Click Save.

Verification

A confirmation message appears on the screen.

Additional Code Information

A learner session layout is created on the root domain with the APP1 code

• If a layout with the code APP1 is created on a subdomain : At the level of a Training card, a user of the subdomain will only be able to select the layout created on their subdomain.

• If a layout with the APP2 code is created on a subdomain : At the level of a Training sheet, a user of the subdomain will be able to select, as desired, one of the two layouts.

Create a description of a Catalog Training layout

Open Settings > Design > Page layouts

Procedure

1. Click New.

2. Fill in the different fields of the page of a layout :

   • Layout Name: Back office name of the layout so that you can find it more easily.

   • Page title displayed to the user: No impact for learner's Session layouts

   • Code: In the context of multi-domain, the code allows you to customise a learner's Session pages.

   • Type: Catalog formation.

   • Language: The language to be used for the layout.

   • Priority: Complete the priority from 0 to 10. Priority is used to order all the proposed layouts in the drop-down list. The highest priority is 0.

If the code is the same between a learner's session layout on a Root Domain and a subdomain : The layout of the subdomain overrides that of the root domain.

If the code is different between two learner session layouts on a Root Domain and a subdomain : Both layouts are available.

• Language: Complete the language for which this Catalog Training page applies.

• Priority: Complete the priority from 0 to 10. Priority is used to order all of a learner's Session layouts in the drop-down list, with the highest priority being 0. The highest priority page is the one that appears by default when creating a Training card.

• Domain: Auto-populated based on the domain on which the user who creates the layout is positioned

Cover image: The addition of the cover image is only possible after the page has been saved for the first time. (See below : " Understanding how the cover image and thumbnail that applies " works.)

There are three levels of image management:

• Depending on the learning mode

  • Thumbnail image: Applies if the image has not been customised on the training sheet.

  • Cover image: Applies if no cover image has been defined on either the layout template associated with the course or the course card.

• Depending on the layout template applied to the training:

  • Cover image: When creating layouts such as Learner Session, Catalog Training, Catalog Assessment, Catalog Curriculum: You can associate a cover image with them. This will apply if no cover image has been defined on the training sheet. If you do not insert a cover image and no cover image is defined at the training level: the cover image of the learning modality will not be visible.

• Depending on the training:

  • Image Thumbnail: Possibility to insert a custom thumbnail to the training by embedding an image in Image for the catalogue.

  • Cover image: If customised, the cover image uploaded to the course will apply to the Catalog and Session page. If there is no customisation: The customisation of the Session layout applies. To understand when the cover image of a learner's Session page applies.

• Click Save.

Verification

A confirmation message appears on the screen.

Additional code information

A Catalog Training layout is created on the root domain with CAT1 code

• If a layout with CAT1 code is created on a subdomain : At the level of a Training record, a user of the subdomain will only be able to select the layout created on their subdomain.

• If a layout with the CAT2 code is created on a subdomain : At the level of a Training sheet, a user of the subdomain will be able to select, as desired, one of the two layouts.

To understand when the cover image of a learner's Session page applies.

The way to create a Catalog Assessment or Catalog Curriculum layout is the same as that of Catalog Training.

Understand the concept of structure or layout of a layout

For the layout, you can choose different Structure to organise the content (Web parts).

Understanding the concept of content/web part

Additional code information

Example of a back-office view of a web part

There are different web parts depending on the associated layouts. You can find :

• The homepage web parts.

• Webparts about a learner's session.

• Webparts for the training published in the catalogue.

• Webparts for Catalog Evaluation.

• Webparts for the curriculum in the catalogue.

Create or edit the content of a layout using web parts

Open Settings > Design > Page layouts

Procedure

1. If necessary, fill in the search criteria and click on Search.

   • The list of layouts matching the search criteria is available.

2. Select a layout and click View Layout or click directly on the layout you want to view.

3. Click on the Layout icon at the top right.

4. Click on the Content tab.

   • You can see all the web parts that you can integrate into your layout.

5. From the Content tab of your layout, select and drag and drop a web part into the block of your choice.

Verification

The web part appears on the home page.

Create or change the structure or layout of a layout

Open Settings > Design > Page layouts

Procedure

1. If necessary, fill in the search criteria and click on Search.

   • The list of layouts matching the search criteria is available.

2. Select a layout and click View Layout or click directly on the layout you want to view.

3. Click on the Layout icon at the top right.

4. Click on the Structure tab.

5. Select the structure of your choice. There are 12 different structures:

Verification

The structure of your page changes.

Additional code information

Each structure is made up of different blocks :

• Each block can contain multiple web parts

• It is not mandatory to put a web part in each block.

If you change the structure when you have web parts in your content : this rearranges the location of your web parts in each block.

Configure the content of a layout using webparts

Open Settings > Design > Page layouts

Procedure

1. If necessary, fill in the search criteria and click on Search.

   • The list of layouts matching the search criteria is available.

2. Select a layout and click View Layout or click directly on the layout you want to view.

3. Click on the Layout icon at the top right.

4. Select the web part in the block of your choice.

5. Click on the cogwheel of the web part you want to configure.

6. Configure title, visibility, style and CSS. The configuration common to all web parts is as follows :

   • Edit the title of a web part: By default, each web part has a name, but it is possible to rename it by entering a title.

   • Apply a style to a web part: Each web part can have a different layout depending on the style chosen. There are four different styles for each web part :

     • Title, frame and content

     • Title and content

     • Frame and content

     • Content only

• Give personalised visibility to this web part : It is possible to make the content of a web part visible to only a part of your users.

Publish to one or more roles

1. In the Visibility field, select Role.

2. Select the role(s) you want to broadcast to:

   • Has role

   • Is in group

   • Doesn’t have role

   • Isn’t in group

Publish to one or more groups :

1. In the Visibility field, select Group.

2. Select the group(s) you want to broadcast to.

   • If no role or group is selected : All users with access to this page will view the content of the web part.

3. Click Save.

Remove content from a layout using webparts

Open Settings > Design > Page layouts

Procedure

1. If necessary, fill in the search criteria and click on Search.

   • The list of layouts matching the search criteria is available.

2. Select a layout and click View Layout or click directly on the layout you want to view.

3. Click on the Layout icon at the top right.

4. Select the web part in the block of your choice.

5. Click on the cross on your web part.

6. Confirm your deletion by clicking OK to the question Do you want to delete this topic ?

Associate a learner's session layout with a course

Open Administration > Training > Training session

Procedure

1. Find the course for which you want to apply a specific learner session page.

2. In the Layout field for a learner's session in the training sheet: Select the layout you want to apply.

3. Save and preview the new formatting.

Verification

Users registered for this training sessions will now view the content present in this layout.

Associate a Catalog Training layout with a course

Open Administration > Training > Training session

Procedure

1. Find the course for which you want to apply a specific catalogue training page.

2. In the Layout field for the catalogue of the training record: Select the layout you want to apply.

3. Save and preview the new formatting.

Verification

Users clicking on this course in the catalogue will now access the content present in this layout.

Additional Information

The same way works to associate a Catalog Assessment layout with an Assessment or a Catalog Curriculum layout with a Curriculum.

Understand how the cover image works and the thumbnail that applies

There are three levels of image management:

Depending on the learning mode

• Thumbnail image: Applies if the image has not been customised on the training sheet.

• Cover image: Applies if no cover image has been defined on either the layout template associated with the course or the course card.

Depending on the layout template applied to the training :

• Cover image: When creating layouts such as Learner Session, Catalog Training, Catalog Assessment, Catalog Curriculum: You can associate a cover image with them. This will apply if no cover image has been defined on the training sheet. If you do not insert a cover image and no cover image is defined at the training level: the cover image of the learning modality will not be visible.

Depending on the training :

• Image Thumbnail: Possibility to insert a custom thumbnail to the training by embedding an image in Image for the catalogue.

• Cover image: If customised, the cover image uploaded to the course will apply to the Catalog and Session page. If there is no customisation: The customisation  of the Session layout applies.

Understand where thumbnails appear

• In My Registrations: Current tab.

• In My Registrations: Coming Soon.

• In My Registrations: Tracking tab.

• In a Catalog Search.

• In some Web parts: Featured Training, Description.

Additional Information

Recommended thumbnail format: 120px, avoid images larger than 250kB.

Change the default tiles according to the learning mode

1. Open Settings > Design > Thumbnails

2. Select the learning mode for which you want to change the thumbnail and cover image.

3. Click Configure Thumbnail.

4. Click on the camera to edit the thumbnail or cover image.

5. Click Select and choose an image from your computer.

6. Click on Submit.

7. Click Save.

Additional Information

Depending on the configuration setting chosen, you will have the option to have a cover image enabled by default according to the learning mode.

Customize the tile according to a particular formation

1. Open Administration > Training

2. Find the course for which you want to update the tile.

3. On the Training card, click on the camera in the Image field for the catalogue to change the layout thumbnail.

4. Click on Select and choose an image on your computer and click on Validate

5. Click Save.

Understand where cover images appear

Cover images are visible in several places on the platform:

• Learner Session page when you are registered for a training session

  • (Access from the My Registrations menu, My Personalized Registrations Web Part, etc.).

• Catalog Training page when viewing a course in the catalogue

  • (From the Catalog menu or a Web part linked to the catalogue) (same as Catalog Evaluation and Catalog Curriculum).

• My sessions > Training.

• In My Registrations : Tracking tab.

Additional Information

Recommended format for cover images: 2000 * 490 px, avoid images larger than 800kb.

Manage the cover image visible on the My Profile page

Open Directory > Groups > Domains

Procedure

1. Position yourself on the domain for which you want to change the cover image.

2. Click on the camera to change the cover image.

3. Click Select and then choose an image from your files.

4. Click on Submit.

5. Click Save.

Additional Information

Avoid images larger than 800kB.

In the context of multi-domain:

• A user with roles on multiple domains always sees the image of their primary domain even if they are positioned on a different domain.

• If there is no image on a subdomain: Users in that domain inherit the image from the parent domain.

Add or edit a cover image on a page

Open Settings > Design > Page layouts

1. Find the layout for which you want to update the cover image (Learner Session or Catalog Training or Catalog Assessment or Catalog Curriculum).

2. On the layout description sheet, click on the camera in the Cover Image field to change the cover image of the layout.

3. Click on Select and choose an image on your computer and click on Submit.

4. Click Save.

Remove a cover image from a page

Open Settings > Design > Page layouts

1. Find the layout for which you want to update the cover image (Learner Session or Catalog Training or Catalog Assessment or Catalog Curriculum).

2. On the layout description sheet, click on the trash can in the Cover Image field to remove the cover image from the layout.

3. Click Save.

Customize the cover image according to a particular formation

Open Administration > Training

1. Find the course for which you want to update the cover image.

   • On the Training card, click on the camera in the Cover Image field to change the layout image.

2. Click on Select and choose an image on your computer and click on Submit.

3. Click Save.

Manage the layout of a community group

1. Open Directory menu.

2. Select from the Groups submenu: Communities.

3. Fill in the desired search criteria on the search page, then click the Search button.

4. Select the desired community group from the list, then click the View Group Page button to go to the community group's home page

5. Depending on the privileges you have, 3 icons may appear to the right of the group label:

   • Pencil icon for Edit Title & Description: Click this icon to edit the community group name, community group description, and keywords.

   • Cog on layout icon for Edit page structure: click on this icon to change the page formatting : the home page switches to edit mode with : at the bottom of the screen, the configuration menu of the group page.

6. From the list of usable layout templates (structures), choose the template that works best for you.

7. In the list of Webparts that are available: you just have to select the Webpart, then drag from the list of Webparts to the centre of the page where the different Webparts already selected are located. The homepage is then refreshed with the new layout.

8. Clicking on the button symbolised by a gear (Configure) allows you to set up the Web part (e.g . title, display, etc.).

9. To switch back to viewing the layout, click the View Page Rendering button to the right of the group label. Users are immediately taken to this edited page.

10. Click the right arrow layout icon to set the current layout as a template for future groups. The latter privilege is usually for an administrator.

Understanding a Community Group's webparts

Open the home page of a community group.

Webparts such as information tools, proposed and managed by the administrator or group manager:

• The Webpart List of Community Group Leaders

• The Webpart List of Community Group Members

• The Webpart Description of the Community Group

• The Message Webpart: html editor allowing the administrator to provide more or less rich editorial content with images, videos, text :

It is possible to place the Message Web part several times in a layout, to rename the message title.

It is also possible to insert an embedded video, to do so click on the HTML tab (at the bottom of the pop-up), copy and paste the embed code and return to the Design tab. Don't forget to save before closing the pop-up.

• The video web part: allows you to upload a video to the platform. Viewing browsers that are compatible with the video format. Ability to upload multiple videos in different formats.

• The Carousel Web Part: images that scroll across the screen to make the page more dynamic. Ability to add links and text per image.

• The External News Feed webpart : The external news feed allows you to display an RSS feed in the community group's page, the feed being managed outside Syfadis.

• The News Feed Web Part (see Understanding a Community Group's News Feed Web Part)

• The Contribution Web Part (see section Understanding the Contribution Web Part of a Community Group)

• The Wiki Web Part (see Understanding a Community Group's Wiki Web Part)

• Understand and create a news feed web part of a community group

News feeds aim to offer regular news like tweets. They are published by an administrator and can be viewed by users without the ability to reply to them.

In news creation mode

1. Click on New News to access the edit mode in the News Feed.

2. Fill in Tags in order to find the news from a Tag Cloud Web Part.

3. Highlight this news in a specific web part (featured news) by checking Feature.

In news viewing mode

1. Comment on the news (can be activated or not).

2. Rate by stars (activation by type) this news.

Additional Information

The Featured News Feed webpart: among all the news feeds of this community group, it is possible to highlight a news item : it will then appear alone in the Featured News Web part.

The news feeds are all contextualised and linked to the community group.

Understanding and creating a news contribution web part from a community group

Contributory (or collaborative) webparts will allow members to contribute :

The Forum Webpart : Forums allow you to create discussion topics that are fed by successive responses. Anyone who views a forum can create a topic or write a reply.

1. Click on New Topic to enter the edit mode.

   • You can pin the topic to find that topic at the top of the list.

   • The forum topic is created.

2. To access it, click on the topic title.

1. View the contribution web part within the page.

2. Click Contribute at the Contribution Web Part.

3. Select a document from your computer or website to add, or a link to a website.

4. Add tags, or even a briefing note.

5. The contribution is visible as soon as you register.

In contribution visualisation mode

1. Comment on the contribution (can be activated or not).

2. Evaluate this contribution with stars (activation by type).

3. Bookmark this contribution.

Additional Information

The forums and contributions are all contextualised and linked to the community group.

Understand and create a Wiki web part of a community group

Wikis allow you to work together on pages that are put online.

The Wiki's home webart is displayed directly on the page. It is not mandatory.

The Wiki Pages Web part allows you to create a new page and access pages that have already been created. It is possible to navigate through links between wiki pages or from wiki, search, or tag web pages.

1. To create a new wiki page, click New Page.

2. To edit a wiki page, click on the page title.

3. Then use the functions of the editor (HTML).

4. You can link to another wiki page using the Link icon.

5. It is possible to highlight a page by checking Wiki on the front page. It will appear alone in this Featured Wiki Web Part.

6. You can view a page's edit history and revert to a previous version if you have edit rights to wiki pages.

Additional Information

Possible uses: Produce a practical case in training, a reference guide on a subject, practical cases by group, reflections and feedback from a group of trainers, FAQs.

The Featured Wiki Webpart : among all the pages that are uploaded to the community group's wiki, it is possible to highlight one page : it will then appear alone in the Featured Wiki Webpart.

The wikis are all contextualised and linked to the community group.

Export a layout

Open Settings > Design > Page layouts

Procedure

1. Search for the layout you want to export (to re-import it to another server).

2. Click on its name to view the page

3. Click on the Export button

Verification

A ZIP file is generated for this layout, with the web parts and image files

Import a layout

Open Settings > Design > Page layouts

Procedure

• Click on the Import button and import the ZIP file corresponding to the layout you previously exported.

• The layout is then created, with the web parts and image files

Additional Information

When you import a layout, if you had images with the same name, then those images would be overwritten on import because we use the same generic directory.