# Widgets

A widget is an element of a graphical user interface (GUI) that displays information or provides a way for a user to interact with the warehouse management system.

P4W widgets combine SQL queries with visual tables and charts to provide easy access to the key information about warehouse. 

Navigate to Setup > Reporting > Widgets. From the widget list page users can access existing widgets and create new one. 

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FH1H2bJsKV4fhkRghjlQt%2Freporting_widget_navigation.png?alt=media&#x26;token=4f8d00f8-6267-49b2-a090-25d95464ed33" alt=""><figcaption></figcaption></figure>

## Create New Widget

To create new widget, click 'New' button in the top right corner.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FjSd6ezlg80g1XX8FpZo3%2Freporting_widget_new_1.png?alt=media&#x26;token=dabb16ed-218f-4a01-b652-0ed44cde044f" alt=""><figcaption></figcaption></figure>

In the 'New widget' pop-up window, enter name and description of the widget. Click 'Submit' to continue.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FRxlYBpM0rmxfsO50i6ln%2Freporting_widget_new_2.png?alt=media&#x26;token=d32e8102-85dd-4fec-8895-d617aefd5d13" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Notice: 'Name' field is mandatory for filling.
{% endhint %}

From the widget list page, click on the link of newly created widget to open widget details page.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2F7zjeo5qUyqQyBkxF4ych%2Freporting_widget_new_3.png?alt=media&#x26;token=f269e160-473d-40cf-a329-4234ee5c605a" alt=""><figcaption></figcaption></figure>

### SQL Query

Add the new query to the corresponding field as shown below.&#x20;

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2F5rQ6GHjm926ek4tsLJQg%2Freporting_widget_new_4.png?alt=media&#x26;token=94e58dea-edeb-48ef-b13a-28e3b091a445" alt=""><figcaption></figcaption></figure>

Click 'Execute' button to make sure your query is working as intended.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FRYpMM3xygQU1ryaeIes8%2Freporting_widget_new_5.png?alt=media&#x26;token=90ccdd3b-7d21-4f74-8288-8461ddac78c5" alt=""><figcaption></figcaption></figure>

### Widget Visualization

To add graphical representation of data, click 'plus' button as shown below and select.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FkTIpBYGAKYbRog3BMyCM%2Freporting_widget_new_6.png?alt=media&#x26;token=ff1aaddd-9eb1-4e24-99fa-95edc36a2ec3" alt=""><figcaption></figcaption></figure>

P4W widgets visualization include : Chart, Grid, and Scalar (singular number). Select the desired visual type and set them according to your needs.&#x20;

#### Chart

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FdzTHWRajT8cEDx59leob%2Freporting_widget_new_7.png?alt=media&#x26;token=4b4933ba-b938-4feb-8e2d-3316bcda43cc" alt=""><figcaption></figcaption></figure>

#### Grid

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FseMmx0KKcErvNd0zpR2H%2Freporting_widget_new_8png.png?alt=media&#x26;token=df9a410f-863f-4c24-87a8-c388f6ede5ca" alt=""><figcaption></figcaption></figure>

#### Scalar

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FqfH67KmYRlXEzflNRdmA%2Freporting_widget_new_9.png?alt=media&#x26;token=56f4ae01-6ed3-4dcc-91a0-c956335760f5" alt=""><figcaption></figcaption></figure>

Click 'Update' button in the top right corner to save changes.

{% hint style="info" %}
Notice: KPI's are an in-depth subject; it is recommended you speak with your P4Warehouse official reseller to get more details.
{% endhint %}

## Import Widget

To import an existing widget, click 'Import' button in the top right corner and upload a JSON file containing new widget from your local machine.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FEphweVUuBwFKCIWPXMOD%2Freporting_widget_import.png?alt=media&#x26;token=3f7fd25f-0f33-477d-872a-6ae4afbfb179" alt=""><figcaption></figcaption></figure>

## Export Widget

To export an existing widget in a JSON file format, click 'Export' button from the action column next to the chosen widget.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FkKFnFXT2GscrSny7oKw9%2Freporting_widget_export.png?alt=media&#x26;token=d92cb693-42e5-4eb9-9114-c18ae940835e" alt=""><figcaption></figcaption></figure>

## Delete Widget

To delete a widget, select it with the check box mark and click 'Delete' button as shown below.

<figure><img src="https://4069128715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5fCRH6psoWyRQyD8J9vh%2Fuploads%2FJq9qiFidsORdPjfDwO4X%2Freporting_widget_delete.png?alt=media&#x26;token=261adf39-0f20-4d33-81d5-14674e660891" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Notice: contact your P4W official resellers to inquire about custom reports.&#x20;
{% endhint %}