Introduction to Widgets #

Widgets are the basic building blocks of OnPing. They are pre-constructed and defined by function – rather than use case. With Widgets, Users can quickly develop a variety of Dashboards and Panels with a few clicks on a page.  Understanding how to build, configure, and use Widgets is essential knowledge for developing a well functioning data environment in OnPing. This introductory primer details the fundamental mechanics of Widgets, including:

• Adding a Widget
• Basic Widget Configuration Settings
• Widget Categories
• How To Choose the Right Widget

Pre-requisites #

Widgets are part of the core User knowledge base in OnPing. Dashboarding, Panels, Users, and Groups will be referenced as well and are also considered core to the OnPing experience.

Adding a Widget #

Widgets are pre-constructed, so adding them to a Panel is a simple process. The basic steps are:

1. Navigate to the panel you want to add a Widget to

2. Open the Dashboard Editing view 

3. Open the Widget Directory
   1. Look for a blue button at the top right of the page labeled ‘Add Widget’ or ‘+Widget’
4. A Directory will appear at the bottom of the current Panel with a list of available Widgets
   1. If the Panel had pre-existing features, you may need to scroll down to find the Directory
5. Click the  ‘Add’ button next to the Widget you need
   1. Clicking ‘More Info’ displays a short description of the Widget to aid selection
6. Scroll back to the top of your page and ‘Save’ the Dashboard. 
   1. You could configure a Widget before saving, but saving now is highly recommended. You will lose your work if you navigate away from the current Panel without saving.  Not that we have done that ourselves, but we have a friend…
7. Repeat this process for each Widget you would like to add to the Panel. 

If you followed these steps correctly, you should now see a new Widget on the current Panel. 

Basic Widget Tool Icons #

After successfully adding a widget to the Panel, 3 basic icons will appear in the top right corner. These macro features will be available for any widget, so we will take a moment here to identify and explain what each does. 

Fullscreen:

The fullscreen icon looks like 2 perpendicular arrows forming a crossing junction. Click this to expand the widget across the fullscreen of visibility in OnPing. 

Edit Mode:

This is also referred to as the ‘Widget Configuration View’. See the entry below for information about the scope of configuration available in widgets.

Collapse:

Collapse the widget on the page to make visual space for higher priority tools. Click the widget to open it back up quickly. Useful for temporarily reorganizing a page, quickly, without making permanent changes.

Configuring Widget Settings #

The set-up for a widget should be determined by how Users of the Dashboard will most frequently interact with the information. That goes a little beyond the scope of this primer, but there are some basic features of Widget Configuration that we will discuss:

• Labels
• Resizing Widgets
• Changing Widget Positions on a Panel

Widget Configuration View #

These features can be found by clicking the ‘Wrench’ icon on the top right corner of any Widget in OnPing. The User will enter a Widget Configuration View displaying new options and enabling editing of existing configured states.

Widget Labels

Where to Find Labels

Open ‘Edit’ mode with the icon in the top right. Then, a box will appear around the Label for the widget. Click in anywhere in the box and a marker will appear, indicating changes can be made as necessary. 

Choosing a Label

A good Label lets us know what we are looking at. Labeling is a little more complicated than just sticking a name on something, but a few simple tips  can help make labeling easier. 

• Consider the purpose of the widget
  • Will the widget pull data from one device? Multiple?
  • Is the widget used to organize or display data?
  • Is this a device driver that would best be represented by the identity of the device itself? 
• Consider the use case
  • What is the Time Sensitivity for the information? ex. Floor level HMI displays are used to make moment by moment decisions
  • How many Users will be using this tool? How frequently?

Considering the sheer scale of customization available to OnPing users, Widget labels are critical to optimizing navigation in User Dashboards. Bad labels will cost future Users more time. Good labels make it easier to work in a shared environment!

To edit a Widget label in the Widget Configuration View:

• Select the Widget Settings Icon (the wrench in the top right corner of the Widget space on your dashboard.
• The current Label of the Widget will have a box appear around it. You can now edit this Label freely. 
• Notice: As you make changes a red button will appear that reads ‘Cancel Edit Dashboard’. Cancel changes to revert back to the Dashboard configuration that existed before making this change. 
• To keep changes, ‘Save’!

Resizing Widgets

When a new widget is created, it will likely default to fill the width of the panel. This is a good starting point, but sometimes Users may want to place tables side by side for easy comparison, or create a series of widgets that streamline a specific work flow. Whatever the reason may be, Users need have control over widget re-sizing! Resizing is built into all widgets. 

To resize a widget:

• Open Edit Mode (click the wrench)
• In the bottom left corner of the widget, ‘Height’ and ‘Width’ options will appear with corresponding ‘+’ and ‘-’ icons
• Adjust the size as needed, then ‘Save’ the Dashboard to keep the changes. 

The Width and Height options are in the bottom left corner of the widget, circled here in red. 

Here, we made the Report Creator widget shorter to fit in the screenshot for this example. Then, the width was reduced to make room for  a Custom Table. This setup is especially useful for HMIs or other visual illustrations, as Custom Table can be used as a Directory with links to other useful Panels or Dashboards. 

Resizing Widgets is useful for building pages that make sense. Sometimes, data representation in tables or graphs require additional context to make sense. Using the resizing feature helps Users build more intuitive dashboards. 

Changing Widget Position on a Panel

Whoa! Where did that Custom Table come from? In the example above, a Custom Table was moved next to the Report Creator. To make this happen, we need to be able to move Widgets around on the page. To reposition a widget, we need to use a slightly different method to make changes that what we’ve been using for Widgets so far. 

• First, select ‘Edit Dashboard’ from the top of the Panel. You must have ‘edit’ permissions for this Dashboard group level to make these changes. Refer to Permissions, Groups, and Users documentation for more information. 
• We’ve been using the wrench to make changes to widgets so far. Now, we want to use the ‘↑’ and ‘↓’ symbols. 
  • Clicking ‘↑’ will move a widget up 1 position on the page. If widgets are on the same horizontal axis, this action will move the widget ‘left’ by 1 position. 
  • Clicking ‘↓’ moves a widget down 1 position, or ‘right’ by 1 position. 
• Save changes when complete

*Note: Widgets will snap to the highest available position that fits their width*

Widget Categories #

Widgets are separated into Categories based on their general use and functions. It’s worth noting that widgets are extremely versatile and can be used for other purposes, but the categories help define the basic function and design of the features. Widget Categories include:

• Data Entry 
  • Data Entry widgets are meant to simplify data entry processes in  OnPing. For example, the Mass Writes widget allows a User to make multiple ‘writes’ simultaneously to a device or system.
• Reports – Reporting and Accountability centric widgets. 
  • The reporting system in OnPing is composed of a variety of features and sub features, including Time Travel, Historical and Dynamic reports, and many others. The primary ‘Reports’ feature in widgets is the ‘Report Creator’. Everything starts there!
• HMI – Display oriented widgets
  • HMI is broken into two main categories, Edge-located and Cloud-located. The primary difference between the two is simply where the data that will be displayed on screen is coming from. 
    • The ‘HMI’ widget is the core of OnPing’s Cloud sourced HMI program. 
    • ‘HMI Local’ is for Users that will be working with an Edge-located HMI. 
• Gauges – Measurement tools
  • Gauge widgets are pre-built monitoring and measurement tools in OnPing. These are often purpose built for a specific application or use case. 
• Graphs 
  • Graphs are an excellent tool for organizing and analyzing data. 
• Tables
  • Tables are some of the most commonly used tools in OnPing. We have purpose-specific options, as well as non-formatted tables that can help organize information as the User sees fit. 
• Logs 
  • OnPing logging applications help Users track Events and information within OnPing’s infrastructure. Logs give deep insight into features or locations, as specified by the Log type. 
• Drivers/Controllers
  • Every device in OnPing needs a Controller. These widgets are what makes it possible to bring data into the platform and communicate with Devices. 
• Integrations
  • Sometimes a great tool already exists! Integrations allow us to bring great features to OnPing User’s without recreating the ‘wheel’ from scratch. 

Choosing the Right Widget #

One of the great things about OnPing is how adaptable it can be to a given situation. For some Users, the sheer volume of available Widgets and features can be overwhelming, though. So, how do you know which one to use? 

Each widget is designed with a certain functionality in mind. Before going through the list of available features, try to wire-frame what you might need on a page. Once you know what type of functionality you need, then picking the Widget or collection of widgets you need to achieve your goals becomes much easier. 

In the description of each category are clues to how they can best be used. For example, if you’re wanting to show information on a page of a certain type or category of data, Tables and Graphs are a great way to organize that information. HMIs have known use cases in industry, but an OnPing HMI can be used for many purposes. Anything that needs to display visual information on a screen can use HMI. 

The most important thing to remember is that OnPing encourages experimentation. The strength of our Widgets is that they are minimally defined and maximally adaptive. It is impossible to list out every potential use case for every type of widget within OnPing. Instead, we encourage Users to leverage the lack of predefined instruction to  make something new and valuable. Combine widgets on a page, or use them in creative ways to create a System that fits your needs. 

Conclusion #

This guide is a general overview of the Widget system in OnPing. Use this guide as a starting point for understanding how to work with tools in OnPing. We highly recommend bookmarking this page for future reference or to show new OnPing Users in your organization to help them get started in the right direction. Perhaps check out this guide on making ‘Links’ in Custom Table and start making links to core documentation like this inside of your OnPing dashboards!