Navigating in Pims Web applications

Web Page Structure

Usually, a Pims web page will contain a Toolbar at the top and the rest of the window will contain content of the page. Toolbar is used to navigate the portal and to execute some common tasks in the web page.

The functionality of default elements in the toolbar are explained in the following table.

Icon / Text	Description
	Opens menu
	Navigates to home page
	Displays user's current domain and provides domain change functionality
	Displays the name of currently open page
	Opens notifications
	Opens support
	Shows user control dropdown

Each page is different and can have additional breadcrumbs and custom buttons in the toolbar. Their location is outlined in the following picture.

Menu

In the menu the user can see all of the Menu Groups and web pages where he has access to (in selected domain). This is the main way to navigate through the different pages.

The user can set a web page as favorite by pressing a star icon next to the web page name (yellow star - already a favorite).

"Show Favorites" in the menu filters all of the web pages and only shows the user's favorites.

Home Page

The home page will display what tasks and actions the user must attend to in his modules.

Domain

First element in the breadcrumbs shows the user's current domain. By clicking, it allows to quickly change that to one of the recent domains.

After pressing the “Change Domain…” button, a modal is opened and the user can choose among domains where they have access and can change to a desired domain.

Same can be achieved from inside the Menu (a lookup above Search box). The difference of this method though is to simplify navigation when a user has access to a page just in some domains, but not in the currently selected one. In such case they should first select a domain where they have role giving access to that specific app for the link to appear in the menu.

Notifications

Notifications system allows the users to have an easier way to follow-up on their tasks and responsibilities. This system is already covered in another article, which can be viewed here: Notifications System.

Support

After pressing the question mark button, the documentation site will be opened.

User Control

After pressing the "person" icon/picture (displayed if uploaded), a dropdown is displayed.

After pressing “My Profile“, the user can change information about themselves and select a personal preference for Culture which affects the formatting of dates and numbers and UI Culture which affects translation for User Interface elements. The user must log out and re-login for the Culture changes to take effect.

Culture - Affects formatting of dates and numbers
UI Culture - Affects translation for User Interface elements (text labels, etc.)

Data Grid

Often information will be displayed in a grid form. 

The header of the grid may contain the name of the grid, search bar and any other custom functionalities (in this example – a checkbox).

The grid's table header contains functionalities, that allow the user to sort and filter the columns in the table.

Menu in the upper-left corner of table header allows the user to control the column list in the table.

After pressing on a column name, data sorting is initiated. An arrow appears at the right side of the column name, which indicates in what direction data is sorted.

The user can drag column headers left or right to change the order of the columns. The order will be saved on the user computer/browser.

For the user to be able to use the modified column layout next time (or on other personal computer) - he needs to press on "Save column layout as..." and create a new column layout.

A modal opens and the user needs to specify the name of the layout.

(The layout can be set to public and everyone will be able to access it.)

Column layout can be reset by pressing "Reset column layout".

The second row of the table header is used for data filtration in each column. The most common ones are the following:

• Boolean filtration (All, True, False).
• Filtration by string, numbers or (and) condition (pressing on the magnifying glass – allows to choose filtration condition).
  
  
• Distinct value filtration (funnel icon). Groups repeating values in the column and allows the user to filter by them.
  
  
• Date filtration.
  

Content in the grid is displayed in rows and may be editable. Examples: 

• Data can be inserted, updated and deleted

• Data can be inserted or changed by using a dropdown.

• Buttons.

The leftmost column contains the selection cell – it indicates the currently selected row.

The rightmost column may contain an action cell listing functions that work on the row.

Sometimes a multi-select column may exist with additional functionalities (in this example - information can be shared with selected rows).

Footer of the grid contains buttons that provide different functions.
The first part of the footer contains data page navigation and information about the data displayed.

The next button is a vertical ellipsis.

It contains the following functions:

• Export data from the table - this function ignores the page's size limit and exports the data into xls or pdf files.
• Record info - displays the currently selected row information (PrimKey, Created and Updated).

• Page size - it allows the user to limit how much rows there are in one page of the table.

The following button refreshes the data in the table.

The last button is Filter – it allows the user to create custom filter conditions.

After pressing Open filter builder button, a modal appears.

A grid column needs to be selected.

Depending on the data type of the column, different Criteria options are available. In the following example - first row's data is boolean and second row's is nvarchar.

Another conditions group can be added by pressing the “Or (add group)“ button.

After pressing "Save As..." button, a name has to be inserted and then the custom filter can be saved.

Functions in filter dropdown:

• After pressing on the name of the custom filter – the filter is applied to the grid.
• After pressing the pencil icon or "Open Filter Builder" icon - a modal opens, in which the user can alter or apply other functions on the filter.
• The built filter can be set as a Standard filter – a filter that is applied every time you enter the page.

"Save As..." button allows the user to save the current filter as a new one.
"Share With..." button allows the user to share the filter with other users in the portal. There are two ways to add a user: 1. Press the + icon next to the user. 2. Multiselect rows and press "Share with Selected".

List View

Another way to view data is in a list. This way, data is displayed as individual cards, that contain necessary information about the record. How much data is displayed may differ from a grid view. But list view is more convenient when the user needs to read information on a smartphone or a tablet. Below is an example of how a list view should look like on an iPad.

Additional Filters

Both data grid and list views may have additional custom data filters. Most of the time these filters will be placed above the data grid or on one side of the list view. These controls allow the user to make more comprehensive data filtering.

Grid view location:

List view location:

Navigation Views

A navigation view is a sidebar, that contains a tree view structure to navigate information.

The user can have multiple navigation views in the sidebar. A new view can be created by pressing the "+" icon.

When creating a new navigation view, the user needs to choose a name for it, then choose columns, by which data in the table will be grouped. Field position depends from Order number. Lowest number - the highest field in the tree structure.

An example Navigation View from DCS: 

An example of Edit Navigation View:

In this example, the Navigation View name displays how data is grouped in the view - first field is Discipline and next (under it) is Discipline Type.
Navigation View may also contain necessary filters to improve the preciseness of information, that should be displayed in the view.
Order numbers cannot repeat - it also automatically assigns the next number.
Navigation view, after saving, can be shared with others by making it public.

The shared navigation view will appear with a new icon and to all of the users.