IT Portal Template


Failed to execute the [include] macro

Ce modèle est un portail permettant de suivre les incidents/demandes, faire les validations, consulter la base de connaissance, ...

Il est livré en version Poste de travail et en version Mobile.

IT Portal - All devices.png

Remarques

  • Le modèle est fourni avec le thème Green_Blue-OpenSans qui peut être personnalisé pour s'adapter à votre charte graphique.
  • Les surcharges CSS sont regroupées dans un widget css overwrite présent sur toutes les pages où il est nécessaire : couleur des boutons de recherche et Nouvelle demande, couleur du filtre sélectioné, ...

Attention

  • Le widget Sliding Page de la page d'accueil contient une surcharge CSS permettant un affichage correct dans différentes résolutions. Cette surcharge, calculée en fonction de la hauteur du widget, rend invisible les icônes de navigation sur l'autre widget News du même type.

Page d'accueil

      Home page.png

 Affichage sur mobile
         2.4Home_mobile.png

Messages de la DSI

Les messages sont affichés via un widget Sliding Page permettant l'accès au catalogue des services et de la base de connaissance, via un bouton (4).

Le widget permet d'afficher également une image (1), un logo (2) et un texte (3).

         2.4Home - IT message.png

Indicateurs

3 indicateurs sont affichés :

  • Incidents ouverts
  • Demandes de service en cours
  • Validations self service à faire

      2.4Home - Indicators.png

News

Les news sont affichées via un widget Sliding Page : visualisation d'un texte fixe et des 3 premières news du menu Accueil de Product name - ev itsm.png.
      2.4Home - News.png

Espace réservé pour le chat

Le widget tawk.to (Chat) est affiché via un widget Html Script. Il utilise un code Javascript configuré pour discuter avec un compte de démo Product name - ev itsm.png et peut être personnalisé à votre besoin  - Open url.png voir Procédure
         2.4Home - Chat.png

 Affichage sur mobile
         2.4Home_mobile - Chat.png

Page Suivi des incidents

La page utilise un filtre basé sur le menu Accueil > Mes incidents.

  • (1) Liste des incidents de l'utilisateur
  • (2) Une barre d'onglets (widget Tab Incident's Details) affiche pour chaque incident sélectionné :
    • Une fiche Détail avec un bouton qui ouvre un assistant permettant la mise à jour de l'incident
    • L'historique des actions
    • Les pièces jointes (onglet Attachments)
    • Les questions/réponses

      2.6 My Incidents.png

L'onglet Attachments permet l'ajout et la suppression de documents. Note : L'icône Delete icon.png de suppression s'affiche pour les documents publics, non téléchargés via questionnaires.

      2.6 Documents.png

Page Catalogue des services

La page affiche un modèle de catalogue des services et un bouton Nouvelle demande sur la fiche Détail (Form) d'une entrée du catalogue.
         2.4Store.png

La balise Status Notification est utilisée sur le widget Data Viewer EasyStore Catalog items.

  • Elle permet de conserver l'affichage du numéro (1) et du statut (2) de la demande créée.
  • Pour revenir au message standard qui s'affiche brièvement, supprimez la balise #[EZVTAG-NEW-REQUEST-STATUS]# en mode Form.
             2.4 Sticky Status.png

Haut de page

Le haut de chaque page comprend un widget Secured Html Logo affichant le logo, et un widget Authentication Login & Logout & User Info, dans la même couleur que l'extérieur de la page pour avoir un effet de transparence.
         2.6 Logo-User-Logout.png

Bas de page

Le bas de chaque page comprend un widget Menu Social Bar affichant la barre de boutons. L'option Contact IT permet de créer un incident.
         2.4Store - Footer.png

Procédure : Comment installer et utiliser l'application modèle

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

1. Téléchargez le fichier ci-dessous sur votre ordinateur.
         Download icon.png  Thème IT Portal (Green_Blue-OpenSans)

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. (optionnel) Personnalisez le thème.

  • Éditez le thème via Apps - Gallery - Theme design icon.png dans la barre d'outils de la galerie.
  • Remplacez les couleurs par celles de votre charte graphique.
  • Publiez le thème.
     

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

1. Téléchargez le fichier ci-dessous sur votre ordinateur.
         Download icon.png  Modèle IT Portal 

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.

Étape 3 : Importation des vues, filtres et rapports dans Product name - ev itsm.png

1. Téléchargez les fichiers ci-dessous sur votre ordinateur.

  • Lot de 2 vues

    Attention : Si vous avez personnalisé les requêtes des 2 menus ci-dessus et pour ne pas écraser vos modifications, n'importez pas ces vues mais adaptez les vôtres.

        Download icon.png Vue Opération > Actions > Toutes les actions
        Download icon.png Vue Accueil > Validations

  • Un filtre
            Download icon.png Filtre pour les actions d'étapes internes
  • Lot de 2 rapports

    Attention :  Si vous avez personnalisé la requête parente Erreurs connues et pour ne pas écraser vos modifications, n'importez pas ces reportings mais adaptez les vôtres.

        Download icon.png Questions/Réponses : Questions triées par ordre d'affichage
        Download icon.png Erreurs connues et Connaissance : Reporting de détail d'un élément après une recherche full-text

2. Importez les fichiers téléchargés dans Product name - ev itsm.png via le menu Administration > Import / Export > Import.

É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 : Configuration des datasources et des widgets de vos applications

1. Configurez les datasources.

  • Allez sur l'éditeur graphique Product name - ev sas.png.
  • Éditez le datasource New Request Catalog.
  • Remplacez le filtre par celui correspondant à la partie du catalogue à mettre en avant sur le portail.
  • Vérifiez les datasources pointant sur l'alias EasyVista : champs Query, Filter et View.
  • Renseignez le contexte d'exécution dans les propriétés générales de l'application.
     

2. Configurez les widgets.

Page d'accueil - Widget tawk.to (Chat) -  Open url.png voir Intégration Tawk.to

  • Logguez-vous à votre compte tawk.to (si vous n'en avez pas, créez-en un via le formulaire du site tawk.to).
  • Configurez le chat widget via le site.
  • Copiez le code JavaScript.
  • Allez sur l'éditeur graphique Product name - ev sas.png.
  • Éditez le widget tawk.to (Chat).
  • Collez le code JavaScript dans la zone Html Code.

Best Practice icon.png   Collez le code du chat widget dans la section Header et non dans le champ Html Code. Cela permet d'afficher le chat widget sans être limité à la hauteur du widget (même lorsque le panneau de discussion est ouvert), et de le faire apparaître en bas de toutes les pages de l'application.

Widget Logo

Widget css overwrite

  • Dans l'éditeur graphique Product name - ev sas.png, allez sur chaque page de l'application où vous avez modifié les couleurs du thème.
  • Éditez le widget css overwrite.
  • Remplacez la couleur par celle de votre charte graphique dans la zone Html Code.

Note : Certains objets comportent la couleur par défaut et celle de l'objet au survol de la souris (ex. : Bouton) ou la couleur de l'élément sélectionné (ex. : Filtre).

Widget Social Bar - élément Contact IT

  • Allez sur l'éditeur graphique Product name - ev sas.png.
  • Éditez le widget Social Bar.
  • Modifiez la propriété Catalog pour associer l'entrée du catalogue des incidents à l'élément Contact IT.
             2.4 New Incident Setting.png
     

Page 3. Service Catalog - Widget Filter List Catalog

Effectuez les modifications ci-dessous pour tous les widgets de type Filter List de l'application, afin d'afficher vos propres filtres.

  • Éditez le widget Filtre.
  • Éditez le datasource associé au widget. Vérifiez que le filtre correspond à la valeur à afficher par défaut.
  • Cliquez sur Filters List.
  • Cliquez sur Remove.
  • Ajoutez les filtres à mettre à disposition.
             3.0 Filter list Setting.png
     

Page 5. Knowledge Base - Widget Global Search in KB

  • Renseignez la langue de recherche souhaitée (anglais par défaut).
     

Étape 6 : Suppression des images/icônes inutilisées

Note : Vous pouvez le faire depuis l'éditeur de texte.

1. Ouvrez l'éditeur depuis l'un des widgets.

2. Cliquez sur Text Editor - Image icon.png.

3. Supprimez les fichiers souhaités.

Tags:
Modifié par Utilisateur inconnu le 2019/01/14 17:26
Créé par Administrator XWiki le 2017/09/08 11:24

Raccourcis

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2019