IT Portal Template

Last modified on 2023/07/26 14:25

From: Service Apps versions Oxygen 2.1 and later

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

It is shipped in both the Desktop and Mobile versions.

IT Portal - All devices.png

Notes

  • The template is provided with the Green_Blue-OpenSans theme. You can customize and adapt it to your style guide.
  • CSS overrides are grouped in a CSS Overwrite widget available in all pages whenever required, e.g. the color of the search and New Request buttons, the color of the selected filter, etc.

Caution

  • The Sliding Page widget on the Home page contains a CSS override that ensures optimal display in different resolutions. This override, calculated based on the height of the widget, will hide the navigation icons in the other News widget on the Home page.

Home page

         Home page.png

 Mobile display
         2.4Home_mobile.png

Message from the IT Department

The messages are displayed via a Sliding Page widget, which allows the access to the Services catalog and the Knowledge, via a button  (4).

An image (1), a logo (2) and a text (3) are also displayed on the widget.

          2.4Home - IT message.png

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 via a Sliding Page widget: displaying of a fixed text and the top three news articles from the Service Manager 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 Service Manager demo account. You can adapt it to your requirements. Open url.png See the procedure.
         2.4Home - Chat.png

 Mobile display
         2.4Home_mobile - Chat.png

My Incidents page

The 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 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 of the page

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 of the page

The bottom of each page contains a Social Bar Menu widget that displays a button bar. The Contact IT option is used to create an incident.
         2.4Store - Footer.png

Procedure: How to install and use the template app

Step 1: Importing the theme to Service Apps.

1. Download the file below to your workstation.

   Theme (Green_Blue-OpenSans)

2. Import the downloaded file to Service Apps by clicking Apps - Gallery - Import icon.png Import in the Gallery toolbar.

3. (optional) Customize the theme.

  • Edit the theme by clicking Apps - Gallery - Theme design icon.png in the Gallery toolbar.
  • Replace the colors by those in your style guide.
  • Publish the theme.
     

Step 2: Importing the template to Service Apps.

1. Download the required version of the files below to your workstation.

   Template

2. Import the downloaded file to Service Apps by clicking Apps - Gallery - Import icon.png Import in the Gallery toolbar.

Step 3: Importing views, filter and reports to Service Manager.

1. Download the files below to your computer.

   Caution: If you customized the queries for the two menus above, and to avoid to overwritten your updates, you should not import these views but you should adapt them instead.

   View Operation > Actions > All actions
   View Home > My Approvals

  • A filter for actions in internal steps:

   Filter

  • Reports:

   Caution: If you customized the Known Errors query, and to avoid to overwritten your updates, you should not import these reports but you should adapt them instead.

   Questions/Responses: Questions sorted by display order
   Know Errors and Knowledge: Report for displaying the details of an item after a full-text search

2. Import the downloaded file to Service Apps by clicking Apps - Gallery - Import icon.png Import in the Gallery toolbar.

Step 4: Creating your Service Apps apps.

BestPracticeDuplicatingTemplate

Best Practice icon.png  You should always work on a duplicate of the template. This enables you to import new improved versions provided by EasyVista without having to replace your apps.

1. Duplicate the template you just imported.

2. Rename the duplicated template.

3. Associate an image with it.

4. Create the shortcut pointing to your app.

5. Repeat this procedure for each new app created using the same template.

Step 5: Customizing datasources and widgets of your apps.

1. Customize the data sources.

  • Go to the Service Apps graphical editor.
  • Edit the New Request Catalog data source.
  • Replace the filter by the one corresponding to the section of the catalog to promote on the portal.
  • Check the data sources pointing to the EasyVista alias, e.g. the Query, Filter and View fields.
  • Specify the execution context in the general properties of the app.
     

2. Customize the widgets.

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
  • Configure the Chat widget via the website.
  • Copy the JavaScript code.
  • Go to the Service Apps graphical editor.
  • Edit the tawk.to (Chat) widget.
  • Paste the JavaScript code in the HTML Code field.

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 in Service Apps.
  • Replace the logo with yours.
     

 CSS Overwrite widget

  • In the Service Apps graphical editor, go to each page where you modified the theme colors. 
  • Edit the CSS Overwrite widget.
  • Replace the color by the one in your style guide in the HTML Code field.

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

  • Go to the Service Apps graphical editor.
  • Edit the Social Bar widget.
  • 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

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

  • Edit the Filter widget.
  • Edit the data source associated with the widget. Check that the filter shows the default value you want.
  • Click on Filters List.
  • 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).
     

Step 6: Deleting the unused images/icons.

Best Practice icon.png  You can do this in the text editor.

1. Open the editor from any widget.

2. Click Text Editor - Image icon.png.

3. Delete the files you want.

List of files to download

Tags:
Powered by XWiki © EasyVista 2022