Executive Dashboard Template - Oxygen


Phosphorus

Version minimum Product name - ev sas.png : Oxygène 2.1

Ce modèle est également disponible avec le thème standard.

NewFeatures_MajorVersion_Oxygen21_Variant1

Update wiki button.png Dernière version majeure : Oxygène 2.1 - Plus d'informations

  • Accessibilité web :
    • Utilisation de contrastes élevés des couleurs sur les pages, boutons, fenêtres superposées.
    • Hiérarchisation des informations via les balises h1 à h6 appliquées aux titres des contenus.
    • Indications alternatives sur les entrées de menu et les images.
    • Remplacement de tous les widgets Menu par des widgets Secured Html.
  • Variables CSS : Variabilisation des polices et des couleurs via le widget dédié __ROOT.
TemplateDescription

Ce modèle, destiné aux responsables des systèmes d’informations de l’entreprise, présente les différentes possibilités d'affichage des tableaux de bord du système d’information.

Il est livré en version Poste de travail et en version Mobile. Certains éléments du thème Oxygène sont configurables - Open url.png voir Liste

CIO Dashboard - Oxygen - All devices.png

Remarques

TemplateNotes
  • Chaque tableau de bord est différent et doit être construit en essayant de répondre aux questions que vous vous posez dans votre environnement. 
  • Le modèle est avant tout destiné à vous proposer des exemples graphiques vous assurant un rendu professionnel.

Version Poste de travail

Page d’accueil

    Desktop - Home page.png

Elle est constituée des parties suivantes :

  • (1) Bandeau supérieur, affiché sur toutes les pages : Titre de la page, informations sur l'utilisateur connecté, bouton de déconnexion Apps - Logout icon.png
  • (2) Menu latéral gauche, affiché sur toutes les pages :
  • (3) Synthèse des indicateurs des tableaux de bord.
  • (4) Météo des services de chaque filière de l’entreprise

Page Météo des services

         Desktop - Health status.png

HealthStatusPage
  • (1) Pourcentage de la disponibilité générale des services sous forme de jauge, avec indicateur de variation
  • (2) Météo des services par pays
  • (3) Services actuellement indisponibles. Cliquez sur un service pour contacter le responsable.

Page Service Desk

         Desktop - Service Desk.png

ServiceDeskPage
  • (1) Indicateurs sur le Service Desk : Incidents en cours et en attente, demandes de changement en cours, satisfaction clientèle
  • (2) Diagramme à secteurs représentant la part des demandes par catégorie
  • (3) Tableau des charges de travail par groupe

Page Gestion des biens

         Desktop - Asset management.png

AssetManagementPage
  • (1) Indicateurs et pourcentages de variation : Contrats, biens, serveurs, employés
  • (2) Carte de géolocalisation des biens
  • (3) Tableaux de répartition (avec possibilité de filtrer) : Fournisseurs, consommation par fabricant, consommation par bien

Page Projet

         Desktop - Project.png

ProjectPage
  • (1) Nombre de projets en cours, avec pourcentage de variation
  • (2) Météo des services par projet (avec possibilité de filtrer)
  • (3) Diagrammes à secteurs représentant la part des projets par localisation et par catégorie

Version Mobile

Page d’accueil

    Mobile - Home page.png

Elle est constituée des parties suivantes :

  • (1) Bandeau supérieur, affiché sur toutes les pages : Titre de la page, bouton de déconnexion Apps - Logout icon.png
  • (3) Météo des services de chaque filière de l’entreprise

Page Météo des services

         Mobile - Health status 1.png

HealthStatusPage
  • (1) Pourcentage de la disponibilité générale des services sous forme de jauge, avec indicateur de variation
  • (2) Météo des services par pays
  • (3) Services actuellement indisponibles. Cliquez sur un service pour contacter le responsable.

Page Service Desk

         Mobile - Service Desk 2.png

ServiceDeskPage
  • (1) Indicateurs sur le Service Desk : Incidents en cours et en attente, demandes de changement en cours, satisfaction clientèle
  • (2) Diagramme à secteurs représentant la part des demandes par catégorie
  • (3) Tableau des charges de travail par groupe

Page Gestion des biens

         Mobile - Asset management 1.png

AssetManagementPage
  • (1) Indicateurs et pourcentages de variation : Contrats, biens, serveurs, employés
  • (2) Carte de géolocalisation des biens
  • (3) Tableaux de répartition (avec possibilité de filtrer) : Fournisseurs, consommation par fabricant, consommation par bien

Page Projet

         Mobile - Project 1.png

ProjectPage
  • (1) Nombre de projets en cours, avec pourcentage de variation
  • (2) Météo des services par projet (avec possibilité de filtrer)
  • (3) Diagrammes à secteurs représentant la part des projets par localisation et par catégorie

Procédures

Comment installer et utiliser le modèle

Étape 1 : Importation du thème du modèle dans Product name - ev sas.png

1. Téléchargez les fichiers ci-dessous sur votre ordinateur, suivant les versions souhaitées.
         Download icon.png  Thème version Poste de travail
         Download icon.png  Thème version Mobile

2. Importez les fichiers téléchargés dans Product name - ev sas.png via Apps - Gallery - Import icon.png Import dans la barre d'outils de la galerie.

3. Vérifiez que le thème est déclaré public dans l'éditeur de thème Product name - ev sas.png :

  • Cliquez sur Apps - Gallery - Theme design icon.png Theme Design dans la barre d'outils de la galerie.
  • Sélectionnez le thème via Apps - Manage themes icon.png.
  • Affichez ses propriétés générales via Apps - Application properties icon.png.
  • Sélectionnez, pour la propriété Published, l'option Published Padlock open icon.png.
  • Cliquez sur [ OK ].

4. (Optionnel) Adaptez le thème à votre charte graphique.

5. Sauvegardez le thème via EVApps - GUI - Save icon.png.
 

Étape 2 : Importation du modèle dans Product name - ev sas.png

1. Téléchargez les fichiers ci-dessous sur votre ordinateur, suivant les versions souhaitées.
         Download icon.png  Modèle version Poste de travail
         Download icon.png  Mdèle version Mobile

2. Importez le fichier téléchargé dans Product name - ev sas.png via Apps - Gallery - Import icon.png Import dans la barre d'outils de la galerie.

3. Vérifiez que le thème est bien pris en compte par le modèle :

  • Affichez les propriétés générales de l'application via Apps - Gallery - Edit properties icon.png en regard de son nom sur la galerie.
  • Sélectionnez, dans la liste Theme, le thème importé précédemment.
  • Cliquez sur [ OK ].
     

Étape 3 : Création de vos propres données

1. Créez les reportings, fichiers CSV, fichiers CSV Online selon les besoins de vos tableaux de bord.

Note : Ce modèle ne contient pas de reportings à télécharger. Les données affichées sont juste fournies à titre d'exemple.

 

Étape 4 : Création de vos applications Product name - ev sas.png

Best Practice icon.png  Travaillez toujours avec une copie du modèle. Vous pouvez ainsi importer les nouvelles versions améliorées fournies par Logo - EasyVista.png sans avoir à remplacer vos applications.

1. Dupliquez le modèle importé précédemment.

2. Renommez-le.

3. Associez-lui une image.

4. Créez le raccourci pointant vers votre application.

5. Répétez ces actions pour chaque nouvelle application utilisant le même modèle.
 

Étape 5 (Optionnelle) : Configuration des éléments du thème Oxygène

    Open url.png voir :

Comment configurer les éléments avec le thème Oxygène

         Open url.png voir Liste des éléments configurables

CommonProcedure

Étape 1 : Ouverture de l'application Product name - ev sas.png

1. Ouvrez votre application dans l'éditeur graphique, via Apps - Application properties icon.png sur la galerie.
 

Étape 2 : Ajout des personnalisations Oxygène

1. Cliquez sur le widget à personnaliser.

2. Allez sur la section Content > propriété Html Code.

3. Copiez-collez les instructions CSS et HTML indiquées dans les procédures ci-dessus pour chaque élément du thème Oxygène.

4. Adaptez le code à votre environnement.

5. Cliquez sur EVApps - GUI - Save icon.png.

Étape 3 : Test de l'application

1. Exécutez l'application via EVApps - GUI - Execute icon.png.

2. Vérifiez que vos personnalisations sont bien prises en compte.


Liste des éléments personnalisables via le thème Oxygène

Page Élément configurable Procédure (codes Html et CSS à ajouter)
Version Poste de travail
Toutes Menu latéral gauche Menu - Poste de travail
Tous les éléments cliquables Liseré
Gestion des biens (3) Graphique Bar Chart
Version Mobile
Toutes Tous les éléments cliquables Liseré
Menu - Mobile
Gestion des biens (3) Graphique Bar Chart
Tags:
Modifié par Christine Daussac le 2020/01/18 13:16
Créé par Administrator XWiki le 2018/04/27 10:03

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020