Widget Knowledge Base


Apps - Widget - KB Base icon.png  Ce type de widget appartient à la catégorie EasyVista de la bibliothèque des widgets. Il permet d'accéder à la base de connaissance Product name - ev itsm.png en implémentant une zone de recherche (1).

Recherche Détail
EVApps - Knowledge base search.png EVApps - Knowledge base search - Detail

Remarques

  Open url.png  voir Remarques générales sur les widgets

  • Dès qu'un widget Knowledge Base est ajouté, un datasource EasyVista Knowledge Base est créé automatiquement, donnant l'accès à la base de connaissance.
  • Accès à la base de connaissance dans Product name - ev itsm.png : Transition > Knowledge > Knowledge

Best Practice big icon.pngBonnes pratiques

  • Pour implémenter rapidement la fonctionnalité de recherche dans la base de connaissance, utilisez les Custom widgets Global search in KB et Global search result qui sont dédiés à cette tâche -  Open url.png  voir Procédure
  • Vérifiez, et sélectionnez si nécessaire, le connecteur associé au datasource EasyVista Knowledge Base : connecteur de type EasyVista Service Manager.

Liste des propriétés

Content

DataSource : Source de données externes liée à la base de connaissance.

  • Le datasource est créé automatiquement. 
  • Pour le modifier ou visualiser son contenu, cliquez sur Apps - Edit icon.png. Cliquez ensuite sur le bouton sous la propriété Preview pour avoir un aperçu des données : les 15 premiers enregistrements du datasource sont affichés.
             Example documentation icon FR.png   Apps - datasources Properties - Preview button.png

Keywords Separated By Semicolon : Liste de mots clés, séparés par des points-virgules, permettant de limiter les connaissances sur lesquelles porte la recherche. Note : Les mots clés sont associés au niveau de chaque connaissance.
       Example documentation icon FR.png  Mot clé Imprimante associé aux connaissances Je n'arrive pas à imprimer un document et Je souhaite modifier mes paramètres de spoule.

SearchPlaceholder

Search Placeholder : Texte affiché dans la zone de recherche (1), qui est automatiquement effacé dès que l'utilisateur commence sa saisie.
         Search placeholder example.png

Best Practice icon.png  Utilisez ce champ comme une aide à la saisie, par exemple en indiquant les critères de recherche disponibles.

Language : Langue dans laquelle s'effectue la recherche dans la base de connaissance. Note : Toutes les langues de traduction sont proposées. Par défaut, il s'agit de la langue de l'utilisateur connecté.

Search Date Pattern : Permet de limiter les résultats de la recherche à une période précise (moins de 24 heure, moins d'une semaine...). Notes : La date prise en compte est la date d'enregistrement de chaque connaissance dans la base. La valeur Custom Date Range permet de définir précisément la période via une date de début (Search Start Date) et une date de fin (Search End Date).

Search Operator : Lorsque la recherche est lancée, indique si une connaissance est prise en compte dès qu'elle contient l'un des mots indiqués par l'utilisateur (option At Least on of the Words : les mots à rechercher sont automatiquement liés par l'opérateur OU) ou uniquement si elle contient  tous les mots indiqués par l'utilisateur (option All Words : les mots à rechercher sont automatiquement liés par l'opérateur ET). Notes : Ces options de filtre sont proposées à l'utilisateur lorsque l'option Show Filters est active. Dans ce cas, la valeur par défaut correspond à l'option Search Operator.

Show Filters : Permet l'accès au mode avancé de la recherche (case cochée - des critères de filtre sont accessibles via l'icône EVApps - Filter search icon.png affichée à côté de la zone de recherche (case cochée) ou au mode simple (case non cochée - aucun critère de filtre n'est proposé).

Theme

  Open url.png  voir Description des propriétés

 

Procédure

Comment implémenter la recherche dans la base de connaissance

Best Practice icon.png  Via les Customs widgets dédiés

1. Si votre version Product name - ev itsm.png est inférieure à la version 2015.2 :

  • Lancez l'import des objets téléchargés via le menu Administration > Import and Export > Import. Attention : Effectuez cette opération sur le même compte que celui de Product name - ev sas.png -  Open url.png  voir Procédure

2. Ajoutez un Custom widget Global Search in KB : automatiquement, un datasource EasyVista Knowledge Base est créé, lié au connecteur de type EasyVista Service Manager.

3. Affichez la liste des résultats de la recherche en ajoutant un Custom widget Global Search Result

  • vérifiez que le Custom widget est bien lié au même datasource EasyVista Knowledge Base que le Custom widget Global Search in KB ;
  • le mode Liste est automatiquement paramétré pour afficher les résultats sous forme de liste triée par ordre de pertinence ;
  • le mode Fiche est automatiquement paramétré pour afficher le détail d'un résultat via un datasource EasyVista dédié (relation maître-détail de type (1,1)).

Via un widget Knowledge Base et un widget Data Viewer

1. Si votre version Product name - ev itsm.png est inférieure à la version 2015.2 :

  • Lancez l'import des objets téléchargés via le menu Administration > Import and Export > Import. Attention : Effectuez cette opération sur le même compte que celui de Product name - ev sas.png -  Open url.png  voir Procédure

2. Ajoutez un widget Knowledge Base : automatiquement, un datasource EasyVista Knowledge Base est créé : 

  • cliquez sur Apps - Edit icon.png en regard du champ DataSource et sélectionnez le connecteur de type EasyVista Service Manager.

3. Définissez un datasource EasyVista dédié à l'extraction des informations détaillées des résultats de la base de connaissance :

  • saisissez les éléments de la recherche dans Product name - ev itsm.png :
    • Query : Transition > Knowledge > Knowledge
    • Filter : None
    • View : Details
  • renseignez la relation maître-détail de type (1,1) via la section Master/Detail :
    • Master Datasource : le datasource EasyVista Knowledge Base lié au widget Knowledge Base
    • Master Field : clé primaire PK du datasource EasyVista Knowledge Base lié au widget Knowledge Base
    • Detail Field : clé primaire PK du datasource dédié aux informations détaillées

4. Ajoutez un widget Data Viewer pour afficher les résultats de la recherche :

  • liez-le au même datasource EasyVista Knowledge Base que celui lié au widget Knowledge Base ;
  • définissez le formulaire Html pour le mode Liste via la section Line -  Open url.png  voir Exemple
  • définissez le formulaire Html pour le mode Fiche via la section Form :
    • Form Detail Datasource : le datasource EasyVista dédié à l'extraction des informations détaillées
    • Form Cell Format : le formulaire Html affichant le détail d'un résultat - cliquez sur Apps - Edit Html icon.png pour accéder à l'éditeur de texte -  Open url.png  voir Exemple

Exemples

Code Html du mode Liste

<style>
.SearchMatchPreview {
 background-color: yellow;
}

.kb_result_section {
 display: block;
 height: auto;
 width: 100%;
 clear: both;
 margin: 0.1em 0;
 padding: 0;
 border: 1px solid #cccccc;
 border-radius: 3px 3px 3px 3px;
}

.kb_result_section p {
 margin: 0;
 padding: 0;
 font-size: 0.8em;
 line-height: 1.5em;
 width: 100%;
 clear: both;
}
</style>

<section class="kb_result_section bgSection cellHover">    
<div style="padding: 10px; display: inline-block; width: 100%;">      
   <h3 style="font-size: 1.0em; line-height: 1.2em; margin: 0; padding: 1.2em 0 0.6em 0; font-weight: bold; float: left;">#[FIELD('SD_KNOWN_PROBLEMS.QUESTION_$lng')]#</h3>
   <span style="float: right; font-size: 0.7em; color: #999;">#[FIELD('SD_KNOWN_PROBLEMS.LAST_UPDATE')]#</span>      
   <p style="color: #999;">#[FIELD('RESULT')]#</p>      
   <p>
    <span style="color: #999;">#[FIELD('SD_KNOWN_PROBLEMS.KP_NUMBER')]#</span>
    <span style="display: inline-block; float: right; font-size: 2.2em;">#[DSTAG-star-rating ratingValue ="#[FIELD('V_SD_KNOWN_PROBLEMS_RATING.RATING_AVERAGE')]#"  writable ="false" ]#</span>
   </p>
</div>
</section>

Code Html du mode Fiche (Form Cell Format)

<style>
.kb_result_detail {
 font-size: 100%;
 height: 100%;
 max-width: 1200px;
 margin: 0 auto;
}

.kb_result_detail article {
 margin: 0;
 max-width: 1200px;
}

.kb_result_detail .resumeAsk p{
 font-weight: bold;
 color: #009cdc;
 padding: 0 0 6px 0;
 margin: 0 auto;
}

.kb_result_detail .spots {
 display: block;
 height: 1px;
 border: 0;
 border-top: 1px dotted #999999;
 margin: 0 auto;
 padding: 0;
 width: 100%;
 max-width: 1200px;
}

.kb_result_detail .answer{
 font-weight: normal;
 white-space: normal;
 padding: 10px 0;
}
.kb_result_detail .answer p {
 font-weight: normal;
 font-size: 0.8rem;
 padding: 0;
 margin: 0;
}

.kb_result_detail .review,
.kb_result_detail .KBnumber,
.kb_result_detail .creationDate {
 font-weight: normal;
 text-align: center;
 margin: 0;
 padding: 0;
}

.kb_result_detail .review {
 padding: 10px 0;
}

.kb_result_detail .KBnumber,
.kb_result_detail .creationDate {
 display: inline-block;
 width: 50%;
}

.kb_result_detail .review,
.kb_result_detail .KBnumber p:first-child,
.kb_result_detail .creationDate p:first-child {
 font-weight: normal;
 color: #737373;
}

.kb_result_detail .infoAnswer {
 height: 100%;
 border: 0;
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 white-space: nowrap;
}

.kb_result_detail .infoAnswer p,
.kb_result_detail .review p {
 padding: 0;
 margin: 0 0 2px 0;
 color: #737373;
}
</style>

<div class="kb_result_detail">
<article>
  <section class="resumeAsk">
 <p>#[FIELD('SD_KNOWN_PROBLEMS.QUESTION_$lng')]#</p>
  </section>
  <hr class="spots"/>
  <section class="answer">
   <p>#[FIELD('SD_KNOWN_PROBLEMS.ANSWER_$lng')]#</p>
  </section>
</article>

<article>
  <hr class="spots"/>
  <section class="review">
   <p>Your review</p>
    #[DSTAG-star-rating ratingValue ="#[FIELD('KB_RATING.RATING_VALUE')]#"  writable ="true" ]#
  </section>
  <hr class="spots"/>
</article>

<article class="infoAnswer">
  <section class="KBnumber">
 <p>Number</p>
 <p>#[FIELD('SD_KNOWN_PROBLEMS.KP_NUMBER')]#</p>
  </section>
  <section class="creationDate">
   <p>Last Update</p>
   <p>#[FIELD('SD_KNOWN_PROBLEMS.LAST_UPDATE')]#</p>
  </section>
  <hr class="spots"/>
</article>
</div>
Tags:
Modifié par Utilisateur inconnu le 2018/02/06 19:39
Créé par Administrator XWiki le 2015/06/02 08:33

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Glossaire

Powered by XWiki ©, EasyVista 2020