Navigating in Pims Web applications

Type: User Documentation 15-Feb-2024 | Simas Zikaras

In this article

Language selection

For more information on how to change your language, see in User Control.

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. 

Example of a toolbar

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


Icon / Text
Description
Menu iconOpens menu
Home iconNavigates to home page
Domain textDisplays user's current domain and provides domain change functionality
Page name textDisplays the name of currently open page
Notifications iconOpens notifications
Support iconOpens support
User iconShows 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.

Additional breadcrumbs and custom buttons location

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.

Example of menu

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

Setting web app a favourite

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

Example of "Show Favourites"

Home Page

The home page will display what tasks and actions the user must attend to in his modules. Also it is possible to show a support message which can be changed in site setup section. You can find more information in the site setup article.

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.

Example of domain dropdown

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.

Example of Change Domain modal

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.

Example of a support page

User Control

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

Example of User control dropdown

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. 

Example of a data grid

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

Example of a grid header

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

Example of a grid table header

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

Example of a table menu

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.

Example of data sorting by column

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.

Example when dragging a column and a semi-transparent version is visible

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.

"Save column layout as..." button example

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

Column layout creation modal

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

Saved data grid column layouts button location

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).Example of a boolean filter
  • Filtration by string, numbers or (and) condition (pressing on the magnifying glass – allows to choose filtration condition).
    Example of a filter condition
  • Distinct value filtration (funnel icon). Groups repeating values in the column and allows the user to filter by them.
    Example of a distinct value filter
  • Date filtration.
    Example of a date filter

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

  • Data can be inserted, updated and deleted

xample of a column, where data can be written directly

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

Example of a dropdown in a field

  • Buttons.
Example of a button in table rows

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

Example of a selected row

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

Example of an action cell

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

Example of "Share With..." modal's multiselect column

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.
Example of data page navigation

The next button is a vertical ellipsis.

Example of ellipsis menu

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

Data Record Info

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

Refresh button

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

Filter button

After pressing Open filter builder button, a modal appears.

New Filter dialog

A grid column needs to be selected.

Example of Field Name dropdown

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.

Example of nvarchar column in Criteria options

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

Example after pressing “Or (add group)“ button

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

Example of a saved custom filter

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.

Example of the filter settings modal"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".

Example of share with modal

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:

Additional filters in data grid

List view location:

Additional filters in list view

Navigation Views

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

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

New Navigation View creationWhen 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: 

DCS example of navigation view

An example of Edit Navigation View:

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.

Public setting of navigation view

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

Navigation views top branches of the structure


In this article