Let's first add a Filter widget.

1. On the dashboard options, click the Add widget option and select Filter widget.

2. In the configuration editor that opens, fill in the required details in each section.

   1. In the Dashboard Settings section, optionally add a title for the filter.

   2. In the General Settings section:

      1. Keep the default values and especially the Sticky Display mode in order to have the filter widget always on top of the dashboard even when scrolling:
         

         

   3. In the Filter Types section:

      1. Activate the toggle for General Filters. Later you can use these general filters as a reference in the other widgets.
         
         

   4. Click the Add filter button and select Device from the drop down list.

      1. Add a Display Name.

      2. In the Device types to be visible field, expand the drop-down menu and select the device type which you created in the early steps of this tutorial, i.e. in Device types and devices.

      3. In the Default Value field, select a default device for the filter. It means that when the dashboard is first loaded, it will show data filtered for this device.

      4. In the Value Path field, do not enter any value, as in that case the filter will use the thingId of the device.
         

         

   5. Click the Add filter button and select Date Time Range from the drop down list.

      1. Add a Display Name and you can keep the rest of the settings as they are or adjust them as needed.
         

         

3. When ready, click the Add button on the bottom.

4. The filter widget will appear on the top of the dashboard and you can change the values from the drop-down menu.
   

   

   
   

   When you select a different value and you want to apply the changed filter to all the other widgets on the dashboard, do not forget to click the Apply filters button on the header bar.

Let's continue with a Line Chart widget.

1. Go again to the dashboard options, click the Add widget option, and in the Charts category select the Line widget.

2. In the configuration editor that opens, fill in the required details in each section.

   1. Fill in the Dashboard Settings:

      1. For example, you can add a Title in English (EN) and German (DE), and you can keep the default settings for the rest of the fields.
         

         

   2. In the Data Sources section define a data source:

      1. Click Add Source on the right and select the Query Template option.
         

         

      2. Then in the Query Template field, use the dropdown menu and select the query template which we created in the previous steps, namely in Query template settings.
         

         

      3. In the Parameters area, select a reference to the global filters from the Filter widget, which will serve as values for the parameters of the query template data source:

         1. For the device parameter of the query template data source, click the drop down menu and select Device (ThingId).
            

            

         2. For the timerange parameter of the query template data source, click the dropdown menu and select Time range.
            

            

      4. When ready, do not forget to click the Save Data Source button.

   3. In the Trace: Line Chart section:

      1. In the X-Axis Data Path field, expand the dropdown menu and select [i].payload.timestamp

      2. In the Y-Axis Data Path field, expand the dropdown menu and select [i].payload.fuel

      3. In the Name field, a name for the trace.
         

         

3. When ready, click the Add button on the bottom.

Likewise, we will create another Line Chart widget.

1. On the dashboard options, click the Add widget option and in the Charts category select the Line widget.

2. In the configuration editor that opens, fill in the required details in each section.

   1. Fill in the Dashboard Settings:

      1. For example, you can add a Title in English (EN) and German (DE), and you can keep the default settings for the rest of the fields.
         

         

   2. In the Data Sources section configure the data source in the same way as for the previous line chart widget:

      1. Click Add Source and select the Query Template option.

      2. In the Query Template field, select the query template which you create in the previous part of this tutorial, namely Query template settings.
         

         

      3. In the Parameters area, add a reference for the device parameter and the timerange parameter of the query template data source:

         1. In the device field, expand the dropdown menu and select Device (ThingId).
            

            

         2. In the timerange field, expand the dropdown menu and select Time range.
            

            

      4. When ready, do not forget to click the Save Data Source button.

   3. In the Trace: Line Chart section:

   4. In the X-Axis Data Path field, expand the dropdown menu and select [i].payload.timestamp

   5. In the Y-Axis Data Path field, expand the dropdown menu and select [i].payload.speed

   6. In the Name field, a name for the trace.
      

      

3. When ready, click the Add button on the bottom.

1. On the dashboard options, click the Add widget option and select Tour Map widget.

2. In the configuration editor that opens, fill in the required details in each section.

   1. Fill in the required fields in the Dashboard Settings section:
      
      

   2. In the Data Sources section define a data source in the same way as described above for the two line chart widgets.

   3. In the Map Options section, select a map style:
      

      

   4. In the Trace: Tour section, define the latitude and longitude:

      1. In the Latitude field, expand the dropdown menu and select [i].payload.position.lat

      2. In the Longitude field, expand the dropdown menu and select [i].payload.position.long
         

         

3. When ready, click the Add button on the bottom.

1. On the dashboard options, click the Add widget option and select Rich Text widget.

2. In the configuration editor that opens, fill in the relevant details in each section.
   

   1. In the Dashboard Settings section, optionally provide a Title for the widget.

   2. In the Data Sources section, define a data source in the same way as described above for the two line chart widgets. In particular:
      

      1. Add a source of the query template type and select the query template which was created in the previous part of this tutorial, namely Query template settings.

      2. In the Parameters area, add the corresponding references from the filter widget:

         

         Device (ThingId) for the device parameter, and

         

         Time range for the timerange parameter.

      3. In addition, you may also need to add manually a Preview device in order for the widget to load the initial data.
         

         

      4. When ready, do not forget to click the Save data source button.

   3. In the Rich Text Settings section, you can try out working with the placeholder values as shown on the screenshot.
      For example, add the following:
      

      • Device: filterParams.device

      • Errors: [i].payload.errors

      • Processed at: [i].metaData.processedAt
        

        

        
        

        Here is a hint: you can type ${ to open the list of the available placeholders based on the data source. See an example:

        

3. When ready, click the Add button on the bottom.

1. On the dashboard options, click the Add widget option and select Device Details widget.

2. In the configuration editor that opens, fill in the relevant details in each section.

   1. In the Dashboard Settings section, optionally provide a Title for the widget.

   2. In the Data Sources section, configure the ID of the device that shall be loaded.
      In particular:

      • In the Type field, select the device type which we created in the first part of this tutorial (Device types and devices), namely vehicle.

      • In the Default Device ID field, select one of the devices registered with the system, whose data should be displayed.

      • In the Available references field, go to the area Available references from Filter Widget and select the option Device (ThingId).

      • Optionally, preview the data by clicking Source data preview .

      • When ready, click the Update Source button.
        

        

   3. In the Information Blocks & Properties section, you can configure which information blocks of the device will be displayed in the widget, change the order in which they are displayed, and adjust some properties.

      • Use the toggles and checkboxes to show and hide information in the widget.

      • Use the drag and drop option for each block to achieve the desired order.
        

        

3. When ready, click the Add button on the bottom.

Normally, a calendar widget is added on a separate dashboard. To create a new dashboard for the calendar widget, follow the steps from the beginning of this page, in the Create a dashboard section.

Then, proceed as follows:

1. On the dashboard options, click the Add widget option and select Calendar widget.

2. In the configuration editor that opens, fill in the required details in each section.

   1. In the Dashboard Settings section, optionally provide a Title for the widget.

   2. In the Data Sources section, you will see different configuration fields depending on whether there is a filter widget on the same dashboard or not. Here, simply select the device type of interest.
      

      

   3. In the Calendar Configuration section, keep the default settings or try out the different display modes, filtering, details, etc.
      

      

3. When ready, click the Add button on the bottom.

4. Upon that, your calendar widget is ready. Try and create a new booking through the Create Booking button on the top right, and then expand the booking to see its details: