Corporate Directory Template - Oxygen


Minimum Product name - ev sas.png version: Oxygen 2.1


Update wiki button.png Latest major version: Oxygen 2.1 - Find out more

  • Web accessibility:
    • Use of sharp color contrasts on pages, buttons, popups.
    • Hierarchy of information using tags h1 to h6 are applied to titles.
    • Text alternatives provided for menu items and images.
  • CSS custom properties: Variability of fonts and colors via the dedicated __ROOT widget.

This template is used to:

  • access the corporate directory;
  • quickly find information on an employee: name, email address, landline phone number, mobile phone number, etc.

It is delivered in a single, responsive version which automatically adapts to the viewing device used (workstation, smartphone, tablet, etc.). Certain items associated with the Oxygen theme can be configured. Open url.png See the list.

Corporate Directory - All devices.png

Home page

Screens by device


Desktop - Home page 1.png   Desktop - Home page 2.png


Mobile - Home page 1.png   Mobile - Home page 2.png

List of information

  • Top banner.
Desktop icon.png   Workstation format Mobile icon.png   Mobile format
Page title, information on the logged-in user, logout button Apps - Logout icon.png

Note: Click the photo to view user information.

Page title, logout button Apps - Logout icon.png
  • Employee search field.

1. Enter your criteria: name, position, department, phone number, email address, location, address.
2. Click Display popup icon.png to run your search.
3. (Optional) Filter the list of colleagues.

  • List of colleagues that satisfy the search criteria and the filter.
    • Each object contains information on the employee: photo, name, position, login, location, ID number. 
    • Click a tile to display additional information: address, phone number, mobile number, email address, region.
    • Certain items can be clicked: address, email, phone number, mobile number, etc.


How to install and use the template

Step 1: Importing the template theme to Product name - ev sas.png.

1. Download the file below to your workstation.
         Download icon.png Theme Responsive version

2. Import the downloaded file to Product name - ev sas.png by clicking Apps - Gallery - Import icon.png Import in the Gallery toolbar.

3. Check that the theme shows as public in the theme editor Product name - ev sas.png:

  • Click Apps - Gallery - Theme design icon.png Theme Design in the App Gallery toolbar.
  • Click Apps - Manage themes icon.png to select the theme.
  • Click Apps - Application properties icon.png to display the general properties.
  • In the Published property, select Published Padlock open icon.png.
  • Click OK.

4. (Optional) Modify the theme in line with the style guide of your company.

5. Click EVApps - GUI - Save icon.png to save the theme.

Step 2: Importing the template to Product name - ev sas.png.

1. Download the file below to your workstation.
         Download icon.png  Template Responsive version

2. Import the downloaded file to Product name - ev sas.png by clicking Apps - Gallery - Import icon.png Import in the Gallery toolbar.

3. Check that the theme is correctly displayed by the template:

  • Click Apps - Gallery - Edit properties icon.png next to the app name in the Gallery to display the general properties.
  • Select the theme you just imported from the Theme list.
  • Click OK.

Step 3: Importing reports to Product name - ev itsm.png.

1. Download the file below to your computer.

Note: Parent queries are not exported with the reports. This means that the items you update will not be overwritten when reports are imported.

        Download icon.png Batch of reports

  • APPS – Employee List

2. Import the downloaded file to Product name - ev itsm.png by selecting Administration > Import/Export > Import in the menu.

Step 4: Creating your Product name - ev sas.png apps.

Best Practice icon.png You should always work on a duplicate of the template. This enables you to import new improved versions provided by Logo - EasyVista.png without having to replace your apps.

1. Duplicate the template you just imported.

2. Rename the duplicated template.

3. Associate an image with it.

4. Create the shortcut pointing to your app.

5. Repeat this procedure for each new app created using the same template.

Step 5 (optional): Configuring items using the Oxygen theme.

   Open url.png See:

How to configure items using the Oxygen theme

        Open url.png See the list of configurable items.


Step 1: Opening the Product name - ev sas.png app.

1. Open your app in the graphic editor via Apps - Application properties icon.png in the App Gallery.

Step 2: Adding Oxygen customizations.

1. Click the widget you want to customize.

2. Select the Content > HTML Code section.

3. Copy-paste the CSS and HTML instructions indicated in the procedures below for each Oxygen theme item.

4. Adapt the code to your environment.

5. Click EVApps - GUI - Save icon.png.

Step 3: Testing the app.

1. Run the app via EVApps - GUI - Execute icon.png.

2. Check that your customization is correctly displayed.

List of items customizable using the Oxygen theme

Page Configurable items Procedure (HTLML and CSS codes to add)
All All clickable items Border
User details Standard Tile
Last modified by Christine Daussac on 2020/01/18 13:15
Created by Administrator XWiki on 2019/07/04 10:43


Powered by XWiki ©, EasyVista 2020