IT Portal Template


Template app operational from version 2016.6.17 of Product name - ev sas.png

App contents

This template is a portal that enables you to monitor incidents/requests, perform approvals, consult the Knowledge Base, etc.

Home page

        2.4Home.png

 Mobile display
         2.4Home_mobile.png

Message from the IT Department

The 0. Home page opens with a Sliding Page widget created in responsive design. It contains two pages with messages from the IT Department. In the template app, the Services Catalog and the Knowledge Base displayed.
         2.4Home - IT message.png

Each page contains the following elements and can be customized:

  • (1) A large image
  • (2) A logo
  • (3) Text
  • (4) A button for accessing the corresponding app page

Trends

Three trends are displayed:

  • Open incidents
  • Current service requests
  • Self Service approvals to be performed

        2.4Home - Indicators.png

News articles

News articles are displayed using another Sliding Page widget that displays four pages. One of the pages displays fixed text while the other three display the top three news articles from the Product name - ev itsm.png Home menu.

        2.4Home - News.png

Chat room

The tawk.to (Chat) widget is displayed using a HTML Script widget. It uses JavaScript configured for discussions via an Product name - ev itsm.png demo account. You can adapt it to your requirements. Open url.png See the procedure - step 4.
         2.4Home - Chat.png

 Mobile display
         2.4Home_mobile - Chat.png

My Incidents page of the logged-in user

The 1. My Incidents page uses a filter based on the Home > My Incidents menu.

  • (1) List of user incidents
  • (2) A tab bar (Incident Details Tab widget) displays the following for each selected incident:
    • A Details pane with a button that opens a wizard for updating the incident.
    • The history of actions
    • Attachments (in the Attachments tab)
    • Questions and answers

        2.6 My Incidents.png

The Attachments tab is used to attach and remove documents. Note: The delete icon Delete icon.png appears for public documents, not those downloaded via questionnaires.

        2.6 Documents.png

Service Catalog page

The 3. Service Catalog page displays a service catalog template with the [ NEW REQUEST ] button in the details (Form) of a catalog entry. This is the recommended configuration when there are several elements in the list.
         2.4Store.png

The Status Notification tag is used in the EasyStore Catalog items Data Viewer widget:

  • It keeps the number (1) and the status (2) of the created request displayed at all times.
  • If you prefer the standard message which only appears briefly, delete the #[EZVTAG-NEW-REQUEST-STATUS]# tag from the Form display mode.
             2.4 Sticky Status.png

Top

The top of each page contains a Logo Secured HTML widget that displays the logo, and a Login & Logout & User Info Authentication widget. It is in the same color as the area outside the page so as to appear transparent.
         2.6 Logo-User-Logout.png

Bottom

The bottom of each page is displayed using a button bar (Social Bar Menu widget) containing the Contact IT element for creating an incident.
         2.4Store - Footer.png

Other portal pages

The portal contains other pages that are not described in this document: Service Requests, Approvals, Knowledge Base, Employee Directory and a page for displaying company information (the About Us link at the bottom of the page).

App theme

Neutral app theme

The theme used, called Green_Blue-OpenSans in reference to its colors and font, is provided with the app. You can customize and adapt it to your style guide.
         Open url.png See the procedure - step 1 to download it.

  • The configuration of display options is applied in the theme as far as possible.
  • Elements in widgets such as border and margins are minimally defined so that users can adapt the theme to their style guide more easily.

Characteristics of the theme

  • Page width: 1400 px
  • Widget background: White
  • Outer color: Gray
  • Footer color: Gray
  • Element color: Blue
  • Selected elements: Green
  • Font size for the <pre> and <Hx> tags: from 12 to 72 px
  • Padding for the Secured HTML, Data Viewer and Search Filter widgets:
  • Data Viewer grid color: Shades of blue-gray

CSS overrides

CSS overrides are grouped in the CSS Overwrite widget available in all pages whenever required. For example, the following is available:

  • The color of the search button
  • The color of the [ NEW REQUEST ] button
  • The color of the selected filter

Specific case

 Home page slider

On the Home page, the Sliding Page widget created in responsive design contains a CSS override that ensures optimal display in different resolutions. This override is calculated based on the height of the widget. When it is applied, navigation icons will no longer appear in the News widget on the Home page.

Procedure: How to install and use the template app

1. Download and import the elements below to Product name - ev sas.png by clicking Apps - Gallery - Import icon.png in the App Gallery toolbar:

  • The Green_Blue-OpenSans theme
             Download icon.png  Template theme (version of Sep 9, 2016)

Edit the theme and replace its colors by those in your style guide. Publish the theme.

  • The IT Portal template
             Download icon.png  IT Portal Template (version 2.7 of Apr 12, 2017)
     

2. Download and import the elements below to Product name - ev itsm.png by selecting Administration > Import/Export > Import in the menu:

Caution: If you customized the queries for the two menus above, you should not import these views because your customized queries will be overwritten. You should adapt them instead.
 

Caution: The report is based on the parent query Known Errors which was renamed to Known Errors and Knowledge for consistency, as the query actually returns all records from the Knowledge Base. If you customized this query and don't want it to be replaced, do not import the report and keep using the 2.6 version of this template available on the Version History table above.

3. Create your Product name - ev sas.png app.

  • Duplicate the IT Portal template you imported in step 1.
  • Rename the app and associate an icon with it.

Best Practice icon.png  You should always work on a duplicated template app. This enables you to import subsequently improved versions provided by Logo - EasyVista.png without having to replace your app.

 

4. Check the data sources.

  • Replace the New Request Catalog data source filter by the one corresponding to the section of the catalog you want to promote on the portal.
  • All data sources point to the standard EasyVista alias provided.
    • Check that they are correctly configured, e.g. the Query, Filter and View fields must be specified.
    • Specify the execution context in the general properties of the app.
       

5. You can configure and adapt the widgets below based on your requirements:
 

 Home page - tawk.to (Chat) widget. Open url.png See Tawk.to integration.

  • Log in to your tawk.to account. If you do not have an account, you can create it by completing the form on the tawk.to website. Via the website, configure the Chat widget and copy the JavaScript code.
  • Edit the tawk.to (Chat) widget and paste the JavaScript code in the HTML Code field to replace the example of code provided in the template app. 

Best Practice icon.png   Paste the code of the Chat widget in the Header section instead of the HTML Code field. This enables the Chat widget to be displayed without being restricted by the height of the widget even when the discussion pane is open, and to appear at the bottom of all app pages.

  

Logo widget

  • Open the text editor and replace the logo with yours.
     

CSS Overwrite widget

  • Modify this widget on each page where it appears if you modified the theme colors. In the HTML Code field, replace the color by the one in your style guide.

Note: Certain objects may have a default color, a color on hover (e.g. button) or a selected element color (e.g. filter).

 

Social Bar widget - Contact IT

  • Modify the Catalog property to associate the incident catalog entry with the Contact IT element.
             2.4 New Incident Setting.png
     

 Page 3. Service Catalog - Filter List Catalog widget

Make the modifications below for all Filter List widgets in the app so that you can display your own filters.

  • Edit the data source associated with the widget and check that the filter shows the default value you want.
  • Edit the filters and click [ REMOVE ]. Add the filters you want to use.
             3.0 Filter list Setting.png
     

 Page 5. Knowledge Base - Global Search in KB widget

  • Specify the search language you want (English by default).
     

6. Once you have finished customizing your app, delete the images and icons that were not used from the resource folder. You can do this in the text editor from any widget by clicking the icon for managing images Text Editor - Image icon.png.

Version history

Version Date Description of Change
2.7 Apr 12, 2017

Download EXP icon.png Download version 2.7

Modifications:

- New report created to fix an issue where the details form was empty for Known Error selected from a Full Text Search.

- The language option of the Knowledge Base Fulltext search widget is now set to the connected user's. It doesn't need to be changed anymore.

2.6 Jan 25, 2017

Download EXP icon.png Download version 2.6

Modifications:

- Replacement of the previous widget displaying the main bar with the name of the logged-in user. The logout button is no longer supported from version 2016.6.17 onwards. From this version onwards, the new Authentication widget must be used.

- A wizard for closing incidents and service requests has been added (new functionality in version 2016.6.17).

- Addition of attached documents to the Knowledge Base.

- Removal of the CSS override for the color of buttons in wizards. Users can now configure them directly in the widget's theme.

- Removal of the CSS override for displaying wizards on mobile devices (flaw corrected).

- The data source that retrieves news articles has been modified and is now based on the Home > News menu option to integrate the user's scope of application.

- Correction made to page 2. My Requests. Removal of an inappropriate CSS override color: white!important;  that altered the display of the toolbar for memo questions.

2.5 Oct 17, 2016

Corrections:

- When the description of the catalog entry is very long, the "Request" button is truncated.

- Anticipated display problem in version 2016.6.16a for the Slider widget on the Home page.

- Override of colors for the "Request" button on mobile devices.

Icons on the Home page have been reduced to avoid displaying a scroll bar.

2.4 Sep 6, 2016

2.4 Home (mini).png

- Addition of new functionalities such as the update of an incident's description, the possibility of adding attached documents, questions and answers.

- The top three Front Office news articles are displayed.

- Trends have been added to the navigation menu.

- New design and fewer property overrides as they can now be configured in the theme.

2.3 May 31, 2016

t01mini.png

Download EXP icon.png Download version 2.3

- A search widget has been added to the catalog page.

The link of the Ask for help icon in the My Incidents page has been corrected.

- An example of code for displaying an infotip for a menu has been added.

Tooltip on menu item.png

- The Accordion widget has been replaced by a Tab widget in the Knowledge Base page.

- Replacement of the YouTube video on the Home page.

2.2 May 2, 2016

- Improved display of the Home page on tablets.

- In the My Incidents page, the Ask for help icon now points to the Knowledge Base page instead of the Store page as was the case in the previous version.

2.1 Feb 17, 2016

- The widget that displays a list of accessible apps would automatically run an app if it was the only one accessible. This is no longer the case.

2.0 Feb 11, 2016

- The Twitter widget has been replaced by a list of apps accessible by the logged-in user.

- Correction: The About Us and Contact Us links at the bottom of the page are now operational.

- The main menu is now grouped in a single widget.

- The search icon was not displayed in IE. Code has been added to the Header of the search widget in the Knowledge Base to fix this problem.

Version Date Description of Change
1.03 Jan 13, 2016

- The button for consulting the history of actions has been removed from the smartphone version.

- The default filter in My Requests has been changed from None to In Progress.

1.02 Jan 5, 2016

- Correction of a display problem leading to needless scroll bars in IE.

- A Tab widget has been added to display the details and history of actions for incidents and requests without requiring a popup.

- Individual Menu widgets have been now replaced by a single Menu widget that can contain several elements for all pages.

- Groups have been added to the history of actions.

- Note: The export of the List IT Store view in the All Actions menu has been updated.

1.01 Dec 18, 2015

- Integration of developments from the November version (improved Menu widget, etc.).

- Several corrections integrated, e.g. trend calculation, or best practices applicable to data sources.

- Fewer HTML overrides and simpler configuration due to product development and the introduction of themes.

1.00 Jul 16, 2015 First version
Tags:
Last modified by Unknown User on 2017/09/08 11:24
Created by Administrator XWiki on 2017/09/08 11:24

Shortcuts

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 2018