Knowledge Base Widget

Last modified on 2022/05/28 10:53
Contents

Apps - Widget - KB Base icon.png This type of widget belongs to the EasyVista category in the widget library. It enables you to access the Product name - ev itsm.png Knowledge Base by implementing a search field (1). 

Search Detail
EVApps - Knowledge base search.png EVApps - Knowledge base search - Detail

Notes

  Open url.png  See General information on widgets

  • When you add a Knowledge Base widget, an EasyVista Knowledge Base data source is automatically created, providing access to the Knowledge Base.
  • To access the Product name - ev itsm.png Knowledge Base, select Transition > Knowledge > Knowledge.

Best Practice big icon.pngBest practice

  • To implement the search functionality in the Knowledge Base quickly, use the Global Search in KB and Global Search Result custom widgets dedicated to this task. Open url.png See the procedure.
  • Check and select if required, the connector associated with the EasyVista Knowledge Base data source. It must be an EasyVista Service Manager connector.

List of properties

Content

Data Source: External data source linked to the Knowledge Base. 

  • The data source is automatically created.
  • To modify it or to view its contents, you should click Apps - Edit icon.png. Next, click the button below the Preview property to preview data. The first 15 records of the data source will be displayed.
             Example documentation icon EN.png   Apps - datasources Properties - Preview button.png

Keywords Separated By Semicolon: List of keywords separated by semi-colons used to restrict the number of articles included in the search query. Note: A set of keywords can be associated with each article.
       Example documentation icon EN.png  The keyword printer is associated with the articles entitled I cannot print my document and I want to modify my print settings.

SearchPlaceholder

Search Placeholder: Text displayed in the search area (1) which is automatically cleared once the user starts typing.
         Search placeholder example.png

Best Practice icon.png  You should use this field as an input help, e.g. by indicating the available search criteria.

Language: Language in which the search is run in the Knowledge Base. Note: All translation languages are available. By default, the language of the logged-in user will be used.

Search Date Pattern: Used to restrict the search results to a specific period, e.g. less than 24 hours, or less than one week. Note: The date taken into account is the date on which the article was saved in the Knowledge Base. The Custom Date Range value is used to define the period precisely using a start date (Search Start Date) and an end date (Search End Date).

Search Operator: This is used to define how search queries should include keywords specified by users. If you select the At least one of the Words option, the OR operator will be used and the search will return any article that contains one of the keywords. If you select the All Words option, the AND operator will be used and the search will return only articles that contain all of the keywords. Note: These filter options are available to users when the Show Filters option is enabled. In this case, the default value is the Search Operator option.

Show Filters: Used to access the advanced search (box is checked) or the simple search (box is not checked). In the advanced search, you can click EVApps - Filter search icon.png next to the search field to specify the filter criteria. In the simple search, no filter criteria are available.

Theme

  Open url.png  See List of properties

 

Procedure

How to implement searches in the Knowledge Base

Best Practice icon.png  Using dedicated custom widgets

1. If your Product name - ev itsm.png version is earlier than 2015.2:

  • Import the downloaded objects by selecting Administration > Import and Export > Import in the menu. Caution: You should perform this action using the same account as the one for Product name - ev sas.png. Open url.png See the procedure.

2. Add a Global Search in KB custom widget. An EasyVista Knowledge Base data source will automatically be created and associated with the EasyVista Service Manager connector.

3. Display the list of search results by adding a Global Search Result custom widget.

  • Check that the custom widget is linked to the same Knowledge Base data source as the Global Search in KB custom widget.
  • The Line display mode is automatically configured to display the results in a list sorted by relevance.
  • The Form display mode is automatically configured to display detailed information on one of the search results using a dedicated EasyVista data source with a (1,1) master-detail relationship.

Using a Knowledge Base widget and a Data Viewer widget

1. If your Product name - ev itsm.png version is earlier than 2015.2:

  • Import the downloaded objects by selecting Administration > Import and Export > Import in the menu. Caution: You should perform this action using the same account as the one for Product name - ev sas.png. Open url.png See the procedure

2. Add a Knowledge Base widget. An EasyVista Knowledge Base data source will automatically be created. 

  • Click Apps - Edit icon.png next to the Data Source field and select the EasyVista Service Manager connector.

3. Define a dedicated EasyVista data source for extracting detailed information on one of the search results from the Knowledge Base.

  • In Product name - ev itsm.png, define your search as follows:
    • Query: Transition > Knowledge > Knowledge
    • Filter: None
    • View: Details
  • Specify the (1,1) master-detail relationship in the Master/Detail section.
    • Master Data Source: The EasyVista Knowledge Base data source associated with the Knowledge Base widget.
    • Master Field: The parent key PK of the EasyVista Knowledge Base data source associated with the Knowledge Base widget.
    • Detail Field: The parent key PK of the data source for detailed information.

4. Add a Data Viewer widget to view the search results.

  • Associate it with the same EasyVista Knowledge Base data source as the one for the Knowledge Base widget.
  • Define the HTML form for the Line display mode in the Line section. Open url.png See the example
  • Define the HTML form for the Form display mode in the Form section.
    • Form Detail Data Source: The EasyVista data source for extracting detailed information.
    • Form Cell Format: The HTML form displaying detailed information on one of the search results. Click Apps - Edit Html icon.png to open the text editor. Open url.png See the example

Examples

HTML code for Line mode

<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>

HTML code for Form mode (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:
Powered by XWiki © EasyVista 2022