ServiceGrid Article - Portal End User Interface

From DocWiki

Jump to: navigation, search



Cisco ServiceGrid is an integration platform in the cloud for IT service management. It provides a scalable, highly secure, and faster way to integrate with everyone in your service ecosystem, and also meets your business requirements. It creates operational efficiencies that saves you time and money, while simplifying the formation of your ecosystem so you can collaborate faster.

This has the following Cisco ServiceGrid 7.1 Portal functionalities and modules:

  • Dashboard
  • Portal Favorites
  • Portal Search Function
  • Portal Call Tracking List
  • Select/Deselect All Records
  • Portal Call Detail


A dashboard is a real-time user interface that organizes and presents information as a graphical representation that is easy to read and it is a single page.
Cisco ServiceGrid Dashboard is the main page where the actual Portal activities are carried out. The dashboard allows you to display all the elements of a portalgroup in the dashboard and also hide an
element. In the dashboard view, each user can view the Portal functionalities in separate windows. Clicking each window will give the full screen view of the selected functionality.
Click the Dashboard button at the bottom of the Portal screen to provide the user with the dashboard view of the Portal functionalities as shown in the following screen.



Every user with similar set of privileges can have different views of the dashboard. The user can customize the dashboard functionalities. For example, an user can move any of the dashboard windows
to any other position on the dashboard.
After the user makes any changes to the dashboard, the Sync button at the bottom of the Portal screen will be enabled to help the user synchronize the changes across systems.
The user can also reset the changes by clicking the Reset button at the bottom of the Portal screen.
A Show Dashboard button with a restore symbol is displayed when the Portal window is opened in a full screen mode. Click the restore button to restore the Portal window's original size and show the last
viewed dashboard.

Image008 6.4.jpg

 To ensure that a specific item is not displayed or to hide a specific item getting displayed on the dashboard you can remove it from the dashboard using the context menu of the particular element in the   navigation tree in the left pane.

Reload window option in navigation tree

Every browser offers a refresh functionality (usually by pressing F5), which reloads the whole page as it is not possible to use the reload feature due to the multiple windows that display multiple pages, a
refresh functionality for dashboard windows has been implemented.

How does reload window work?
 Right-click an element in the navigation tree and click Reload Window. If the selected element is currently visible in the dashboard, it will be reloaded, which means its initial state will be restored.


Image016 6.9.png

Portal Favorites

Users may want to know which portal entities are used as favorites to remove and add the entities in different ways.
All entities of the portal – groups and elements – can be marked as favorites. Once marked, they can be accessed from the “favorites area” which opens up in the navigation tree when the favorites tab in the
main menu is clicked. You can add or remove the entities from the favorites in several ways.They are shown in the following screenshots.


Image009 6.4.jpg

Image011 6.4.jpg


Image12 6.4.png

The portal favorites are also available in the following:

  • Search list
  • Favorites area where they can be removed by right-clicking in the tree.

Image013 6.4.png

Portal Search Function

The Portal Search function offers the following functionalities:
In the FAVORITES tab, a new group is introduced. This group contains the history of the last ten search queries.
Queries are retrieved so that the latest query is displayed as the top most entry.
When calling SEARCH from the top group, or from the result window itself, the application navigates
to the search history and marks the last query.

  1. The User can recall one of those ten history queries by clicking the item in the left tree. In case of clicking the history entry, the order of the items is not changed. (The 5th entry stays 5thalso after the click was made.)
  2. As the last search query is also displayed in the search field, the user can put it in the most recent position (top of the search history) by submitting it from the search field itself. In this case, the entry is moved to the most recent position.

After submitting a 11th record to the history, the oldest history file is automatically removed. It is possible to remove items also by using right-click and the context menu.
In addition to the above, few more functions are listed below:

  • Some minor layout changes have been implemented (column number, column sizes).
  • Search also supports last dashboard feature.
  • Search supports standard add to/remove from favorites feature (see above).

Image14 6.4.png

NOTE: This function needs to be activated by your Cisco ServiceGrid Administrator and this function does NOT search for/within tickets.

Portal Call Tracking List

New design and functionality in the call tracking list

Cisco is currently creating the Portal on a completely new technology stack. Portal call tracking list is a central part of everyday work with ServiceGrid’s online interface and the list improves the user
How does Portal Call tracking work?
The call tracking list can be divided into two areas:

  1. The panel where you can see the current filter criteria.
  2. The panel where you can see the results for the list.

As the filter area contains the search filters, it uses space that can be used for more columns from the list; the filter area can be collapsed to the left-hand side.

The search area contains several buttons that can be clicked:

  • Advanced Search—Click the Advanced Search button to open a search window to define the advanced search settings for your query that cannot be set in the simple view.
  • Perform Search—Click the Perform Search button to perform a search on the server.
  • Every field that is part of the search area can be sorted using the button next to it. The icon has three different states:
    • [Not A/Z] No Sorting.
    • [A/Z Arrow Down] Sort ascending.
    • [Z/A Arrow Down] Sort descending.
  • Every field that is part of the search area can be grouped. The icon has two different states:
    • [Small Window] Grouped.
    • [Small Window with a hold sign] No grouping.
  • Click on the cross of a search criteria removes the filter for the following searches.
  • Each filter criteria has different ways to enter data (For example, date picker, number spinner, simple input field). Based on the data type, it has either one or two input fields.

The add filter criteria has the below possibilities to add filter criteria to the left area.
You can add the criteria by dragging and dropping them from the column header into the search area.

NOTE: Already added criteria cannot be added a second time.


Another possibility is to open the advanced search window.

The left pane of the search window is important for both sorting as well as grouping the order of the criteria. You can change the order by dragging a criteria and dropping it at the place where you want it to be.
For example, when you want the "Request Type“ to be the second item, click the title of the item, and then drag and drop it in between the "SPCallState“ and the "CallOpen“ item.


Another possibility is to drop a new item from the list directly to where you want to have it in the criteria area. Drag and drop is not limited to the search area and can be used to reorder the columns.

If you do not want all the columns set by the administrator to be displayed, you can easily open the columns list using the down pointing arrow and deselect all unwanted columns. Once the columns become invisible, the columns can be restored by checking the list of columns from the columns drop-down box.


The Advanced Search window is an alternative way to define search criteria for the list and contains several settings for the list, which can be defined for every field that is available in the current setup.

Currently the advanced search has six different columns:
1. Label—The header of the list column can be defined. A simple click into the cell turns the cell into an input field that allows you to change the label.
2. Search String—The same value that can be defined by the criteria items in the search area of the list window. The Search String can be any of the following depending on the type of the field:

  • Simple string
  • Date picker
  • Check box

3. Group—Grouping for the list can be defined in the advanced search equivalent to the criteria items. Grouping can be activated and deactivated by a click inside the cell.
4. Visible—The visible column is visible if the visible check box is checked otherwise it is invisible.

5. Sort—The sorting and the criteria item can be defined in the Sort column. If no sorting is defined for the column, the cell is empty. With the first click in the cell, it will be defined to be sorted ascending, with a second click the sorting is descending and with the third click the Sort field is deactivated.
6. Fieldname—(Read only). Allows you to find which data field the column is pointing to.
To change the sort order of the fields the rows of the grid can be reordered. Clicking on a cell of the columns "Label“, "Search String“ or "Fieldname“ will allow you to drag and drop the complete row to the position you want to.
At the bottom of the search window, the two buttons are displayed:

  1. Save-Applies the current settings of the Advanced Search window to the list where it was opened from. A new criteria is added and the visibility of columns, the sort orders, the groupings and the header of columns are updated. However, the latest search result continues to remain in the list.
  2. Submit-Performs the same actions as the Save button but additionally a search is performed with the newly defined criteria. This changes the result list if options have been changed.

If you do not want to save the changes made in the advanced search window, you have to click on the cross in the top-right corner of the window.


If your query displays more than 25 results, the system displays a button to show you the next 25 results.
This button is displayed as long as there are more results to display.
At the bottom of the window you can see the total results of your search.


When grouping results, the result list is displayed as a tree. When the first level is expanded, the second level is displayed as a list of data rows. The tree is expands till the limit of the grouping criteria is
reached and the calls themselves are displayed. If you open a folder of a grouped element, the rest of the folders do not disappear. You can open as many groups as you want to. If one group has more than 25 elements, a button will be displayed to load more results from the server.
If you want to open a Call from the list, you must either click on the icon on the left side of the list or double click on the Call’s row that you want to edit/view. Currently, it is not possible to open more than
one detail at once.




Setup for Portal Call tracking list
To get a new call tracking list in your Portal, complete the following steps:

Step 1: Create a new setup in a group.
Step 2: Select “Tracking: Calls-List” as Used in and set “new” as the default view.
Step 3: Click the new setup element and a window opens with the new call tracking list.


Enhancements in Portal Call List

The call list enhancement supports the user in an intuitive and productive way to filter, sort, and group calls.

Image015 6.4.png

The first improvement is that the user is able to select the type of operator a field has to be filtered with:

Image016 6.4.jpg

The user has several choices to select from:

  • IS—The query searches after the exact expression is chosen from the drop-down list.

    For example, if “Order” is entered in the textbox, it finds all calls that have exactly that value in the corresponding column.

  • LIKE—Gives the user the possibility to define wildcards. Wildcards can be set with the “%”-sign (Percent).

    For example, “Ord%” will find “Order” as well as “Ordinal”.

  • IN—Defines multiple values to search for when you search with “in”. It is not possible to insert any wildcards. Values can be separated with the “,”-sign (comma).

    For example, “Order, Incident” finds all the calls that have Order or incident in the column.

  • NULL—This operand does not rely on the value in the text input. It searches for all Calls that do not have a value in this column.
  • NOT NULL—This operand does not take rely on the text input either. It searches for all Calls with any value in this column.

Depending on the type of column, you can have different types of input fields:

Image017 6.4.jpg

  • Text columns—have a simple text input field where the user can enter a search string.
  • Number fields have two input fields that accept only numbers. The first field is for the lower, and the second field for the upper bound of the number. You can also increase and decrease the number

with the up and down arrows on the keyboard, or with the tiny up and down arrows on the right edge of the field. You need not enter both the fields.

  • Fields representing a date will have two input fields too. Again, the first input is for the lower bound, and the second input is for the upper bound of the searched values. It is not necessary to enter a date

in both the fields. To support the user in entering a date, the user can open a calendar and select the date. Some fields assist the user in selecting a date by providing all valid values.

  • The SdCallId is a special field. It is numeric, but has only one input field. (The assumption was that users want to search for a specific Call, not for a range of Calls.)

Portal supports the user in selecting multiple values from the drop-down lists:

Image018 6.4.jpg

Image019 6.4.jpg

As soon as the user selects more than one value from the drop-down list, the operand automatically changes to IN. If there is only one selected value, the system automatically changes the operand to IS.
It also enters the values into the textbox. Other improvements affect the advanced search window.
Most of the features of the simple search are also available in the advanced search.

Search Mode/type of operator for text fields, double number field, drop-downs, icons.

Additionally, the logical operator can be chosen in the advanced search. If more than one field is used as filter criteria, you can choose if all calls that confirm at least one criteria (Or) or only those that confirm to all of the criteria (And) are displayed. The default selection is And.

Filters can now be saved and stored on the user level, meaning that each user can define their own filters. If no filter name is entered, the default filter name custom is used. The current settings in the advanced search window are saved under the filter-name when Save & Submit is clicked.
If you click Save, the stored filter is not changed. Only the search criteria of the current search are altered. In both cases, the list is submitted and the search is performed. Click Delete to delete the filter.
You can get back to the original filter by choosing default from the filter drop-down list.


Image020 6.4.jpg

Parent-Child relations are displayed by default. A small triangle pointing to the right indicates that a call has children. Clicking the triangle symbol opens this call, and the information for the children is loaded. Calls without children have no symbol.

Children are ignored in the list functions such as filtering, ordering, and grouping. Calls may be displayed several times. For example, once at the first level and a second time as child of another call.
Image021 6.4.jpg

As soon as you have selected a setup as well as Portal as the display style, you get a list of fields that are not supported and cannot be displayed.

Reset Button for User Specific Layout Settings

If a user changes the layout of a list, the settings will be stored in the database for this user. If there are user specific settings, changes of the setup will not affect this user. To get the new customizing of the administrator, the user has to reset his settings.

How does reset button for specific layout settings work?
Layout settings are stored each time an user performs the following actions:

  • Renames a column of a list.
  • Changes the position of a column.
  • Changes the size of a column.
  • Expands or collapses search panel.

List contains a Reset Layout button can be active or inactive depending on the presence of the custom layout setting change.

Image009 6.7.png

Changes are not tracked only inside current session, but are persisted. If an user makes a change, the Reset layout button gets activated, logs out and logs in again, and the Reset button gets activated again.
Clicking the Reset button and answering YES in the confirmation pop-up reloads the list with the default setting as provided by the administrator, and disables the Reset Layout button.

Download Function in Portal Lists

Downloading the lists as a file and pairing with the easy-to-use filtering mechanisms of Portal lists is available in the portal. Open a Portal list.

NOTE: Before starting the actual download, filter criteria may be specified either by dragging the appropriate columns to the toolbar on the left side, or by opening the Advanced Search window.

Image010 6 6.jpg

It is NOT necessary to confirm the filters by hitting the Search button.
After specifying the filter criteria, click the Download button. A popup window appears where you can select the following:

  • Export format—At present, only CSV download is available.
  • File name—File name of the file to be downloaded. Must not be empty.
  • Encoding—Character encoding used when writing the file. Some special characters (example, Umlauts) will be encoded differently in each of the available encodings.
  • FieldSeparator—A character that is used to separate values or column headers.
  • TextSeparator—A character that denotes the beginning or end of a column header or value. This is especially useful if some values in the list contain the field separator.Image011 6.6.jpg

To return to the list, close the popup. By clicking the Download button in the popup, the download starts. Depending on the size of the list, this may take some time. (All records that meet the specified filters will be downloaded.) Sorting criteria are applied as specified in the filters. Grouping criteria are ignored, since they are not needed when downloading files.
Setup for Download function in Portal list
The download button is available for all customizable portal lists if the underlying setup has the property “DownloadLink” set.

Usability enhancements in lists

Image001 6.9.jpg

1. Custom filters are available in the Quick Search and more than one can be defined.
2. The custom filter can be reset to its original stored value.
3. A mode selector can be set up to switch between TreeMode and HistoryMode.

This is also available in the Advanced Search.

Image002 6.9.jpg

4. New custom filters can be created in the Advanced Search.
5. When submitted in the Advanced Search, only the current filter choices for the list are submitted, and the choices are not stored in the filter.

To store changes in the Custom Filter, click Save at the top of the Advanced Search window.
6. Clicking on a column header changes the sorting of the list and this is also reflected in the Quick Search.
7. The drop-down box which loads the next X entries of the list, can load either the next 25, 50, or 100 entries.

Image003 6.9.jpg

Multiple Custom Filters in Lists

Portal introduces a possibility to store up to ten custom filters with a name of up to 20 characters. This will make the search easier for users who use more than one customized filter to switch between common tasks.
Buttons are enabled or disabled in the context of the combo box on their left, which contains all possible defined filters, including the default one as default.
Choosing an existing filter (except the default one) enables the buttons, where Delete removes and Save updates this chosen filter. Modifying the name to a non existing one disables the Delete button, while the Save button creates a new filter.

NOTE: Default filter cannot be changed or removed.

If the limited number of filters or filter name length is exceeded, the combo box is marked as invalid (red border) and the tooltip (on mouse-over) shows the problem description.

Image005 6.9.jpg

The user can always submit the filter values with or without saving them, which applies the current criteria to the list and updates on the left panel (Quick Search) in the List window.
The Quick Search panel also contains the already defined filters for the user to easily switch from one
filter to another without going into the Advanced Search panel.

Image006 6.9.jpg

If a change is made directly inside the Quick Search, the chosen record inside this filter combo is marked as changed (yellow border and corresponding tooltip on mouse-over). If the user wants to save this
changed filter, he can again switch to Advanced Search, give this filter a new or existing name, and save it.

Image007 6.9.jpg

When reopening the list, the last used saved filter will be taken as the default one.

In addition, two more things were changed in advanced search panel:

  1. Changing the visibility of column (for the list) was removed and can be now changed only in the list context menu (clicking arrow in the header of any column of the list, then Columns menu item, then check/uncheck the checkbox).
  2. Renaming of the columns in advanced search panel. This was now moved to the already mentioned context menu as a new feature – a text area where you can change the name directly.

The following screenshot shows the old functionality:

Image008 6.9.jpg

And this is the new functionality:

Image009 6.9.jpg

Selectable Number of Fetched Records in Lists

Until now, the drop-down box which loads the next X entries in every list has retrieved 25 more entries, which can be tedious with very large lists.

How does the selectable number of fetched records in lists work?

The new drop down box is at the same position as the previous one. If the drop down box is clicked by default, 25 more entries are loaded. Additionally, when the arrow is pressed, you can choose to load 50 or 100 more entries.

Image012 6.9.png

One Click Sorting in Lists

To further improve the usability of the new lists in the portal, a quick sorting feature has been developed.

Clicking the header of a column leads to sorting the list automatically by this column in ascending order. The column is also added to the quick filter to reflect the current filtering and sorting state. Additionally, a small icon will be displayed next to the column header, indicating whether the list has been currently sorted by this column.Image013 6.9.png

Reset Filter of Lists

The reset filter functionality was added alongside this feature, allowing the current filter to be reset to a previously stored state.

Click Reset Filter. Your filter values will be reset to the currently selected filter.

Image014 6.9.png

Select/Deselect All Records

In the select boxes, a new entry is displayed on the top: “Select all”. Select all the check box to select all other options that get displayed. Deselect this check box to clear all the other options displayed under this check box.

Image26 6.10.png

Sorting Grouped Lists by Number of Group Members

Numeric sort options are available for columns where grouping is activated: 0->9, 9->0.
If one of these options is selected, the list will be sorted by the number of entries of each group.

Image27 6.10.png

NOTE: If the grouping option of a column is deactivated, only three sort options are available: A->Z, Z->A and NoSort.

Portal Call Detail

The Portal Call Detail has the following functionalities:

  • The new design of the call detail leads to better usability.
  • More calls can be displayed in parallel in the dashboard.
  • Better overview of the most important fields by hiding the less important fields with the collapse and expandable field groups.
  • All functions of the call detail are available by integrating the old functions into the new design.

After customizing the design of portal Call-Detail, all call details are displayed in the new design.

The new design is available for the following:

  • Updating an existing call from the portal call-list.
  • Updating an existing call from the SD2 call-list.
  • Creating a new call by using any create call function.
  • Switching from one call to another (parent > child).
  • Displaying the detail of a call from activity list or message list.

Window behavior

More than one Call Detail window can be displayed at one time. The maximum number of detail windows is six.

Image001 6.6.jpg

A virtual folder “CallDetails” is added to the tree after the first call detail form has been opened.

Image002 6 6.jpg

All open Call_Detail windows are added to the navigation tree on the left side dynamically.
After closing a Call-Detail window the entry will be removed from the navigation tree.
The following functions are available in the context menu for a call detail entry in navigation tree:

  • Hide in Dashboard
  • Bring to Front
  • Close Window

Image003 6 6.jpg

After clicking on a portal group (main menu tab, group folder) all call detail windows are closed automatically.
The call detail windows remains on the dashboard by clicking the “last dashboard” button of a window.

New features within the call detail

Image004 6 6 PortalEnd.jpg

The following are the new features in a call detail:

  • The right frame can be collapsed and expanded by one click.
  • The right frame tabs are displayed on a panel on the right side of the window and are always visible.
  • The field depending buttons are displayed as “split-buttons” so that these buttons use less space.
  • Collapsible and expandable field groups can be customized on the left side and in the call history.
  • All history records are numbered in the descending order. The oldest history record has number 1.
  • Numbering of history records starts by the very first record, even if the number of records displayed is limited.
  • The size of the text areas can be changed by dragging and dropping the border of the input field.

Image005 6 6.jpg

  • All the available “split” buttons are displayed by clicking the “down” triangle of the visible button.
  • Clicking the symbol of the visible button calls up the function of this button directly.
  • The detail button of all text areas displays the text in an editor window and is always displayed. This button cannot be deactivated in the setup.

Image006 6 6.jpg

Errors are displayed immediately if mandatory fields are empty or if an input value has a wrong format. For example, the Timestamps.

Image007 6 6.jpg

The name and the ID of the used setup of the call detail or the call history is displayed as tooltip of the title of the border around the fields.

Restrictions of the Portal Call Detail

  • The window title cannot be changed after another content displays, such as another call, call open form, or selection list.
  • If a window has been opened in a full screen mode by clicking the entry in the navigation tree, an empty dashboard will be displayed when the window is closed by clicking the Close button in the top right corner of the window.
  • The state of the field groups will be reset according to the settings in the setup after a call detail has been refreshed.

Some right frame functions listed below are no longer supported:

  • Additional
  • Positions
  • Calculation
  • Reservation
  • Shipment

Some field buttons as listed below are no longer supported:

  • Search and delete button of queue and technician fields.
  • Field specific button of queues “Return to sender”.

Setup of the Portal Call Detail
The used call-detail form can be defined on the level of the user role. The selected design of the call detail is used by all functions that open the detail of a call. All existing roles will have the “CallDetail Type” set to SD2 with the installation of the new release.

Defining field groups
A field group can be defined by adding a Place Holder call-field to the setup. The label of this field is used as the name of the field group. It can be defined for this field if the expand/collapse button is displayed, and if this group will be displayed collapsed initially.

Calldetail functions in portal design

Search lists
All selection lists which are reachable from the portal call-detail or is used by the new call function have been lifted up and are now matching the layout and behavior of portal lists. The selection is done by double-clicking the line and not over a specific column. If there should be a link item in one of the columns, clicking it will trigger a different behavior as the double-click on the line (the action is depending on the column).

Image005 6.7.png

Using a Call:Activities-Detail setup, you can set up buttons such as New, Edit, Delete, Save, and Cancel, fields and columns, and setup-choice.

Image007 6.7.png

Parent and Child
The parent and child section has been modified in the Portal. Basic behavior of deleting parent/child relation remains the same. New feature is that drilling down to a child or up to a parent is now possible by double-clicking an item in the list:

Image008 6.7.png

Buttons actions has not changed. However, creating of new parent/child leads to a portal call-detail and a selection of parent/child leads to a portal selection list.

Mail client
ServiceGrid mail client was updated to match the new look though there has been no change in the functionality. However, some improvements to the usability have been made..

Image006 6.7.png
New HTML Editor
The HTML Editor has been updated to match the new look and feel of the portal. Source edit button is available, which allows you to directly edit the source code of your HTML email.

TypeAhead Lookup
The To, Cc and Bcc receiver fields support TypeAhead lookup, similar to the selection lists on the left side. The text you enter automatically searches in the firstname, lastname and email fields of the person. No further customizing is needed. You can also enter any other e-mail addresses.

For a complete list of Cisco ServiceGrid Articles, go to the List of Articles page.

Related Articles

Portal Administration

Portal Message Rules

Portal Navigation Elements

Rating: 0.0/5 (0 votes cast)

Personal tools