# Reports

The Fieldworker allows compelling reporting capabilities to help you manage your business. Several dashboards provide a summary view of a critical business function. These dashboards are active i.e. allowing several user actions on the underlying data. Pre-defined reports could also be generated via the Fieldworker Reporting Module.

The Fieldworker supports two separate types of reports.

## Data Table Reports

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data.

<figure><img src="https://lh3.googleusercontent.com/47aRtugWk12Gvb3QoZ5QGChL1-zsVXJ0F59xInoNB98viDlVLza2_utFaDb4-cVWhzTlAJDf6KxL9NRT_cGSYBM3YQzkefOpS2ha=w1064-v0" alt=""><figcaption></figcaption></figure>

1. Header row
2. Rows
3. Pagination
4. Row checkbox
5. Sort button
6. Container

### Data table elements

#### **Baseline elements**

Column header names describe the type of content displayed in each column. Each row contains data related to a single entity.&#x20;

#### **Interactive elements**

Data tables can include interactive elements, such as:

* Checkboxes&#x20;
* Sorting (on columns)
* Icons that communicate alerts
* Pagination

Pagination or [filter chips](https://m2.material.io/components/chips/#filter-chips): Controls that manipulate how table data is displayed should be placed directly above or below a table.

<figure><img src="https://lh3.googleusercontent.com/s5i_WoXOxEA_R_cFzKv9xzzWcFXruW8Qs66uen6ZcpE-b-XMcHlf7RVyfuJqitPaTZCjWHYYk6nNJSBGnoC88OCRjIPKZlBfVtXLWA=w1064-v0" alt=""><figcaption><p>Above the header row, a filter bar shows two active filters. Pagination is shown below the bottom row.</p></figcaption></figure>

#### **Text**

Column header text uses a medium-weight font to differentiate from row text. Text that is longer than the column width is truncated with an ellipsis. On hover, a tooltip shows the full name.

<figure><img src="https://lh3.googleusercontent.com/NpC7MTfpc-rP6o6-N9-YpFdGE350--pW0WPatxhA6cpP0KGaOixk02Hq5DwHJAnwtUQVQMIFLHUqQ82p6lo1vmx5M0w6M99stLuL1w=w1064-v0" alt="Data table with 4 header items and 1 header item with truncated text"><figcaption><p>Long column headers are truncated with an ellipsis.</p></figcaption></figure>

Long column headers are truncated with an ellipsis.

<figure><img src="https://lh3.googleusercontent.com/r2J3PY3wQ3GVu423zxviRxUoPgkSSzsriK2dZN1jbksRLm7brhuadElG6hfUTdPIuI38vjkMa9HrKD4G_VkiFb6t-KlSmYZGTweY9r0=w1064-v0" alt="Tooltip showing full text when hovering over truncated text"><figcaption><p>Hovering over a truncated column header reveals a tooltip that displays the full text.</p></figcaption></figure>

### Sorting

To help users sort information, a column can display column sorting by default.

To help users sort information, columns can be displayed sorted by default.

To indicate which column is sorted by default, place a [downward](https://m2.material.io/resources/icons/?search=arro\&icon=arrow_downward\&style=baseline) or [upward arrow](https://m2.material.io/resources/icons/?search=arro\&icon=arrow_upward\&style=baseline) icon next to the column header’s name.

<figure><img src="https://lh3.googleusercontent.com/0qp7ri92dpkALf1i-IeDaPEmTqK3QsKsG2NaQlzO5wJAXzpkNRPYGpLL63pPl7dQ5xT0Fc70upFzTseLpFngOW8XxUvSldf8cuc4SQ=w1064-v0" alt=""><figcaption></figcaption></figure>

#### **Reversing sort order**

To reverse the sort order of a column, a user taps the header name or arrow icon. Upon sorting, the arrow icon reverses direction.

<figure><img src="https://lh3.googleusercontent.com/ODrCY4zWamkCsaP0nnY5aJGk0vonPaz6wQaoeSRsdI9sQHiVVY4RjsVMJEe7-FmnZXEr8xLrDgFlYwDPBpa2flnNYXcweYRXFN5snw=w1064-v0" alt=""><figcaption><p>Sorting by the schedule column in ascending order is indicated with an upward arrow.</p></figcaption></figure>

<figure><img src="https://lh3.googleusercontent.com/N4v0H6POw0V4CCakwRAeAV9RmjeiXk7SaDxgASLK0ZmEJdZk7h5CG_dQiooUBxb-lOMZgQBztEmXjQ5M02nsqnfPDlyGxtIMI2SyPQ=w1064-v0" alt=""><figcaption><p>A table sorted in reverse: the downward arrow shows that the schedule column is sorted in descending order.</p></figcaption></figure>

#### Sorting with a progress indicator

A linear progress indicator is used in data tables when sorting is initiated. The progress indicator communicates to users that sorting is in process.

<figure><img src="https://lh3.googleusercontent.com/bX9p5Cqd5PGeb87XCSmnQnF-Ax4x0XG7yUe8OSSktOQ9aOddD2ndV4VAfyINdnlTtKkbrNkMZnInHUgcN1GFL44utFgJg7axfSiqKA=w1064-v0" alt=""><figcaption></figcaption></figure>

***

### Row checkbox

When selecting a row checkbox, the row should display a background color.

For people who use screen magnification, the selected checkbox may appear outside of the magnified screen area. Adding a background color fill provides an additional way to indicate that a row has been selected.

<figure><img src="https://lh3.googleusercontent.com/zrrFtooqfNYb1HjoTchB4SJu4wTs8Kn5_aPIEnHv5pPjPaPaZ-pcR1QMlRc19F7phSRCxYgmsiqE375sX2gqzpK15bBgOcRbVBGR6eA=w1064-v0" alt=""><figcaption><p>A selected row checkbox with background color fill on the entire row.</p></figcaption></figure>

### Behavior

#### Row hover (Desktop)

When a user hovers over a row, that row displays a background color.

<figure><img src="https://lh3.googleusercontent.com/XgFytE4Wg7QiIMLBnTG0Zb4eUf8fFb4w0t0tQ-zXGaTSLmQmHz33RYV1lzFpD1C2l68Hi-gkTA12UG-Bc62iESIoTz1qUZ-9OEXH=w1064-v0" alt=""><figcaption><p>A row that displays a background color on hover.</p></figcaption></figure>

#### Column hover (Desktop)

When the user hovers over a column header:

* A **tooltip** can display the full column name (if it’s truncated) or a more detailed description of the column
* If sorting is enabled, an **arrow icon** can appear next to the column header

<figure><img src="https://lh3.googleusercontent.com/rJxvPX3MJErC45wTPkq1RdvptHGy2SN3AtrBYwgaRNIbGPVaCpT2QtyWNoWdBHXxZ4anQmJlsY_S-vNecYFiwhH-qAeMWTH7pdfseg=w1064-v0" alt=""><figcaption><p>A tooltip or a <a href="https://material.io/tools/icons/?search=arro&#x26;icon=arrow_downward&#x26;style=baseline">downward</a> or <a href="https://material.io/tools/icons/?search=arro&#x26;icon=arrow_upward&#x26;style=baseline">upward</a> arrow icon can be displayed when hovering over a column name. </p></figcaption></figure>

#### Focus

When using keyboard focus, an indicator appears as users tab through interactive items (such as checkboxes).

<figure><img src="https://lh3.googleusercontent.com/7hk1r9_-EEDbf-Z01XbjyAcsTGR7_efwxtA3OXQeOttHYSAkwl0nmktABKkT0mTo_cop_ViakQKvy5tkxhBNQEY43FaEo33_i3qxKw=w1064-v0" alt=""><figcaption><p>Keyboard focus on the checkbox</p></figcaption></figure>

### Pagination

Pagination controls provide swift access to all pages while indicating that more pages exist. They display: Pagination is placed at the bottom of a table.

Pagination controls provide swift access to all pages while indicating that more pages exist.

Pagination controls display:

* Number of rows per page
* Total number of rows, including the range currently in view
* Left and right arrows for navigating pages

#### **Placement**

Pagination is placed at the bottom of a table.

<figure><img src="https://lh3.googleusercontent.com/X2dGAze0rbPvChrIbKDjngLUHXuPu3QFLDuolhs2BNiA9jj8gl3deCESC3p1DiPr0xo-jUsYjPAbjzxgpi9Rp1licR-iHdo3nv-IcQ=w1064-v0" alt=""><figcaption><p>25 rows per page are displayed, with a total of 100 rows.</p></figcaption></figure>

Pagination menus show a predefined list of options for the number of rows to display.

<br>

<figure><img src="https://1895083124-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFKFmA5xK4sMCcp1WP4Kc%2Fuploads%2FOAGt3UkY5XISU96oMzPb%2Fimage.png?alt=media&#x26;token=effc2e56-9b3b-40c7-8154-500d9cb9f7da" alt=""><figcaption><p>Dropdown menus are used in the pagination section of the table to allow selection of rows-per-page.</p></figcaption></figure>

### Custom Report Formats

The Fieldworker platform lets you choose columns of the report, their positioning, and the width of the columns and save this format for further use.

## PDF Reports

The Fieldworker reports can be designed and generated in a pre-determined format and circulated on demand, or on a fixed schedule. These reports could be PDF reports, for now.&#x20;

## Dashboard

The Fieldworker reports can be designed and generated in a pre-determined format and be circulated on demand, or on a fixed schedule. These reports could be PDF reports, for now.&#x20;
