# Grid Components

## Overview

Grids contain the components within the web portal necessary for modifying existing or new data, as well as more specific functionality of the individual screens within the web portal. It is important that the exact setup will vary screen by screen, but are still covered in this documentation's respective screen pages.

<div class="columnLayout single" data-layout="single" id="bkmrk-overview-panel-tools"><div class="cell normal" data-type="normal"><div class="innerCell"><div class="panel conf-macro output-block" data-hasbody="true" data-macro-name="panel"><div class="panelContent"><div class="toc-macro client-side-toc-macro conf-macro output-block hidden-outline" data-hasbody="false" data-headerelements="H1,H2,H3,H4,H5,H6,H7" data-macro-name="toc">- <span class="toc-item-body" data-outline="2">[Panel Tools](#bkmrk-panel-tools)</span>
- <span class="toc-item-body" data-outline="3">[Refresh](#bkmrk-refresh)</span>
- <span class="toc-item-body" data-outline="4">[Export to Excel or PDF](#bkmrk-export-to-excel-or-p)</span>
- <span class="toc-item-body" data-outline="5">[Module Specific Buttons](#bkmrk-module-specific-butt)</span>
- <span class="toc-item-body" data-outline="6">[Page Options](#bkmrk-page-options)</span>
- <span class="toc-item-body" data-outline="7">[Scroll Bar](#bkmrk-scroll-bar)</span>
- <span class="toc-item-body" data-outline="8">[Additional Columns](#bkmrk-additional-columns)</span>
- <span class="toc-item-body" data-outline="9">[Filter Function](#bkmrk-filter-function)</span>

</div></div></div></div></div></div>## Panel Tools

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/TTnimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/TTnimage.png)

Grids are the main workhorse of the system. This is where you insert, update, and delete Records using **(1) Row Editor**. Grids allow you to sort and filter using the **(2) Column Header Menu** and page through lots of data using the **(3) Paging Toolbar**. Most grids have **(4) Grid Toolbar Buttons** to perform module commands. Not all columns are sortable or filterable. Some columns have icons which are called **(4) Action Columns** and have the ability to delete records, or shortcuts to quickly go to an associated screen. These are outlined and numbered in the screenshot below:

## Refresh

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/image.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/image.png)

<div class="columnLayout single" data-layout="single" id="bkmrk-the%C2%A0refresh%C2%A0button-c"><div class="cell normal" data-type="normal"><div class="innerCell"><div class="panel conf-macro output-block" data-hasbody="true" data-macro-name="panel"><div class="panelContent"><div>The **Refresh** button comes in handy to load the newest data from the server. For example, a good usage is if someone else modified data on the same screen or to view the latest historical data in **Call Logs**.</div><div class="table-wrap"><table class="confluenceTable tablesorter tablesorter-default" role="grid" style="width: 100%;"><colgroup><col style="width: 12.4839%;"></col><col style="width: 87.5161%;"></col></colgroup><thead aria-label="Use column header buttons to sort"><tr class="tablesorter-headerRow" role="row"><th aria-disabled="false" class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="0" role="columnheader" scope="col"><div class="tablesorter-header-inner"><button class="headerButton">Component</button></div></th><th aria-disabled="false" class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" colspan="1" data-column="1" role="columnheader" scope="col"><div class="tablesorter-header-inner"><button class="headerButton">Description</button></div></th></tr></thead><tbody><tr role="row"><td class="confluenceTd">Top bar</td><td class="confluenceTd" colspan="1">The account management bar along the top of the window is used to change your password or logout.</td></tr><tr role="row"><td class="confluenceTd">Left panel</td><td class="confluenceTd" colspan="1">The navigation panel at the left of the screen is for navigating to different screens within the web portal.</td></tr><tr role="row"><td class="confluenceTd">Right panel</td><td class="confluenceTd" colspan="1">The content area, filling the majority of the window, will display information and tools based on the selected screen.</td></tr></tbody></table>

</div><div class="sectionColumnWrapper conf-macro output-block" data-hasbody="true" data-macro-name="section"><div class="sectionMacro"></div></div></div></div></div></div></div>[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/Fzrimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/Fzrimage.png)

## Export to Excel or PDF

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/k8Kimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/k8Kimage.png)

Almost all modules have the option to export the data shown to a table in **PDF** file format, or an **Excel** spreadsheet. Either click on **Export to PDF** or **Export to Excel** and it will start the download process. Depending on the browser settings, there may be a prompt to choose a location or it may download to a default destination such as the "downloads" folder. Consult the browser's documentation for more information.

Examples of data exports: **[PDF ](https://public.intellasoft.net/download/attachments/8029382/Users-20170707-0805.pdf?version=1&modificationDate=1499971303488&api=v2)**or [**Excel** **Spreadsheet**](https://public.intellasoft.net/download/attachments/8029382/Users-20170707-0806.xlsx?version=1&modificationDate=1499971303497&api=v2).

## Module Specific Buttons

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-08/scaled-1680-/IGBimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-08/IGBimage.png)

Almost all modules have **buttons** that are specific to their function. Such as the example below; the **New User** button is specific to the [Users](https://public.intellasoft.net/books/web-portal-dL9/page/users) module.

## Page Options

When dealing with large quantities of data, the platform automatically splits the entries into pages that can easily be navigated from the toolbar. In this example below, the page is on page 1 of the 4 possible pages available.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/3zLimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/3zLimage.png)

To move forward one page click the arrow to the right (If you hover over it, a tool-tip will pop up stating "Next Page.")

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/MkSimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/MkSimage.png)

You can also skip to the last page by clicking the arrow to the right of the first arrow.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/Tqvimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/Tqvimage.png)

You can also move from page to page by simply typing the desired page number into the page indicator. <span class="confluence-embedded-file-wrapper">![](https://public.intellasoft.net/download/attachments/8030148/page%20options%204.png?version=1&modificationDate=1504285463056&api=v2)</span>

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/W3eimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/W3eimage.png)

Similar to moving forward one page and moving to the last page, you can conversely move back one page, or move to the first page.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/dHdimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/dHdimage.png)

## Scroll Bar

In some cases, it is necessary to use the scroll bar on the bottom of the page to navigate to the left or right to access certain settings within the **Grids**. Click and drag the bar to the left or right until you find the settings you wish to modify.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/t73image.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/t73image.png)

## Additional Columns

<div class="columnLayout single" data-layout="single" id="bkmrk-depending-on-the-log"><div class="cell normal" data-type="normal"><div class="innerCell"><div class="panel conf-macro output-block" data-hasbody="true" data-macro-name="panel"><div class="panelContent"><div class="sectionColumnWrapper conf-macro output-block" data-hasbody="true" data-macro-name="section"><div class="sectionMacro"><div class="sectionMacroRow"><div class="columnMacro conf-macro output-block" data-hasbody="true" data-macro-name="column">Depending on the logged-in user's permissions or system settings, some columns may be hidden within the screen. Feel free to explore and view the hidden columns, the data there is generally not as important as the visible columns. To view additional columns, click on the column header menu and click the **Columns** item. The columns that are already in view are checked while the ones that are currently hidden are unchecked. Any column can be toggled, these changes only last during the session, once you login again, the default columns will be displayed. Please note that certain columns are required when inserting new records, and if those columns are hidden, a new record cannot be created.</div><div class="columnMacro conf-macro output-block" data-hasbody="true" data-macro-name="column">  
</div></div></div></div></div></div></div></div></div>[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/RBYimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/RBYimage.png)

<div class="columnLayout single" data-layout="single" id="bkmrk--28"><div class="cell normal" data-type="normal"><div class="innerCell"><div class="panel conf-macro output-block" data-hasbody="true" data-macro-name="panel"><div class="panelContent"><div class="sectionColumnWrapper conf-macro output-block" data-hasbody="true" data-macro-name="section"><div class="sectionMacro"></div></div></div></div></div></div></div>## Filter Function

Filters are a powerful method of sorting through a lot of data. Not every screen has lots of data, but on screens that do filtering is extremely useful. You can apply filters to multiple columns at once. Start by accessing the column header menu and click the **Filters** item. A pop-up will appear with a small pair of binoculars. Type your filter. Keep in mind that each **filter** is applied to each item individually. As you type, the grid will start to populate with data that the filter has found. <span class="confluence-embedded-file-wrapper">![](https://public.intellasoft.net/download/attachments/8030148/filter%20function%201.png?version=1&modificationDate=1504285518313&api=v2)</span>

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/6gKimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/6gKimage.png)

When finished, press enter or click out of the **filter** box.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/mcqimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/mcqimage.png)

By typing "jam", the server finds the **User** named *James.* Columns that have an active **filter** on them will always be ***bold and*** ***italicized*** as shown below.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/rZ0image.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/rZ0image.png)

To deactivate the filter, click the column's header menu and then click the checkbox next to the filter option. Another option is to delete the text in the filter box. After you have done this, any filtered-out data will reappear:

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/0y9image.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/0y9image.png)

Not all columns are text forms, some give the option such as yes or no as checkboxes:<span class="confluence-embedded-file-wrapper">![](https://public.intellasoft.net/download/attachments/8030148/filter%20function%205.png?version=1&modificationDate=1504285566384&api=v2)</span>

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/kqAimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/kqAimage.png)

After checking *yes* for the filter column option, the grid will show all the rows where *yes* has been selected. The column's name becomes bold and italicized to indicate that a filter is active.

[![image.png](https://public.intellasoft.net/uploads/images/gallery/2024-07/scaled-1680-/2vqimage.png)](https://public.intellasoft.net/uploads/images/gallery/2024-07/2vqimage.png)