VANTIQ Resources
Product Tour – Video 3: Client Builder

The VANTIQ videos in this series are designed to show developers and operations managers the simplicity of building real-time, event-driven applications with VANTIQ. A specific use-case involving real-time field service of IoT-connected machines is discussed but please keep in mind that ANY event-driven application can be easily built in VANTIQ, supporting a wide range of use-cases.

This third video in the series walks you through building a web based client to display a simple status of the devices being monitored.

[expand title=”Transcript”]In this video we’ll build a simple WEB interface to our application for viewing the current state of our pumps. We’ll also add functionality to the existing application so we can display the devices indoor location to assist a technician on site.


We’ll start by modifying our lookups type. 
In the project resource graph I’ll click on lookups.
This brings up a dialog that displays all the properties in our lookups table.  
we’re going to add indoorLocation to this type, so we’ll click on the edit icon, which open up the editor for types.   Types in VANTIQ allow us to persist data into the platform
I’ll click the add properties button, set the name to indoorLocation and set the type to GeoJSON
And we’ll save the modification to our lookups type.
Recalling from the first video, that we place the enriched data into our pumps type, we’ll add the same property to our pumps type
we’ll click the pumps type in the resource graph
edit it
and add  indoorLocation to it
I’ve modified the lookups records with the following information, representing the pumps indoor location show lookups table highlighting the new data
but when we compare that to the pumps table, we see the indoorLocation has not been set show the pumps table all new data is null
we’ll add functionality to our app that will place this data in the pumps type when the temp and rpms streams are correlated
all that needs to be done to accomplish this,  is to modify our transformData activity
I’ll click on transformData and edit its configuration
I’ll add an outbound property called indoorLocation and set the transformation expression to event.enrichData.lookups.indoorLocation
Once we save the application the data will instantly start propagating to the pumps table each time the data is correlated show the results of queries against this table
Now lets build the client web pages
IN VANTIQ I’ll choose Develop Clients and then click New CLient
I’ll open the clients properties and give it the name “PumpApp” and mark it launch-able, which means that it will be exposed externally
Now we want to display some information about all the pumps, so we’ll add a table widget.
To bind data to the table, we’ll need a data stream, so I’ll click on data streams and then new data stream
I’ll name the stream PumpStream.  There are several way we can receive data,..  directly as information arrives… from a source like MQTT… but in this case we’ll use a timed query, which will grab the latest version of the data at a specified interval
For the DataType I’ll choose pumps and set the update interval to every 6 seconds, and we’ll group by the pumpId and save the work
now we’ll bind it to our table by clicking on the table and choosing our PumpStream
for columns we’ll set: the pumpId, the time it arrived, the temperature and the rpms, and i’ll adjust the table width a drop by dragging so as to take up more of the screen real-estate
Lets test our app, but running our client.  here we see all the data we’ve asked for in the table.
now lets add some graphs to help quickly visualize potential issues
I’ll drag a horizontal layout control widget onto the canvas
and in it I’ll place a column chart and just to its right… a bar chart
I’ll click on the column chart and pick the PumpStream for the data stream
on the X axis we’ll choose the pumpId, and on the Y rpms.  we’ll also set a threshold value of four thousand two hundred and fifty one
in our bar chart we’ll also choose the pumpStream…  for the X axis we’ll choose temp.  For the Y we’ll choose pumpId and for the threshold, one hundred and ninety nine
When we run our client application it now appears like this.
We’ll add an OnSelect function to our table which will have a single line in it.  client.goToPage with the parameters for the page we want to go to.  The page name is “PumpDetail” (which we haven’t created yet), and the data that we will pass to the page… is an out of the box variable called extra… which is all of the data from our query for the selected row client.goToPage(“detail”, extra);
Lets add the second page to our application so when we click on a row in our table, it will take us to the PumpDetail page that we specified in the onSelect
So we give it that name… PumpDetail
We’ll also set an on Page Start function which will modify our data stream to just contain information about an individual pump, 

So we’ll.. get the data stream… using its name,  “PumpStream”

specify a new query that constrains the query to the pumpId that was passed into the page when the user clicked on the table…

and then call for the DataStream to be immediately updated

// adjust the query

var ds = client.getDataStreamByName(“PumpStream”);

var p = new TimedQueryParameters();

p.whereClause = { pumpId: parameters.pumpId};


Now to visualize all of this
I’ll add vertical and horizontal layouts to the canvas
In the vertical layout, i’ll add two gauges, one for temp, and one for rpms
I’ll also put text widgets above each of our gauges so we know what they are.
We’ll name the top one Temp, and the lower RPMs
We’ll configure the top gauge using our datastream, and set the property to temp

and we’ll set some thresholds:

a warning at one hundred and fifty,

Danger at one hundred and ninety nine,

and a gauge maximum of two hundred and fifty




For the bottom gauge we’ll use our data stream, and set the property to RPMS

we’ll also set thresholds here as well:

a warning at three thousand five hundred,

Danger at four thousand two hundred and fifty,

and a gauge maximum of five thousand five hundred




Now, we’ll populate the horizontal layout object with external and indoor locations.  For this, we’ll drag on a map widget and a floor plan.
we’ll configure the map with our data stream and for the property we’ll use the location object… and for the label the pumpId 
For our indoor floor plan we’ll set the datatsream,  and choose the indoorLocation for the property, for the label we’ll choose the pumpId and for the floorpan URL we’ll use a VANTIQ document that can only be seen with the proper credentials
A few quick cosmetic adjustments to the size of our objects and we’re done
We have modified our existing application with new data to enrich the event stream.  We’ve created a web client that can now be accessed with a valid user name and login. = parameters.pumpId;
We can see the table with each of our pumpID’s and the overall detail for our pumps in the graphs on screen…
By clicking on a row in the table, we can drill down onto an item and see additional details about the specific pump that was chosen.
Thanks for taking the time to watch this video series on VANTIQ. “The application platform for building event driven systems”.  To see more videos or learn more about VANTIQ visit us at


This website uses cookies to provide you with a better user experience. By using our site you agree to the use of cookies as described by our cookie policy. If you do not want to accept all cookies from our website, please see our cookie policy on how to modify the types of cookies that are accepted by your browser client.
VANTIQ Newsfeed
Data Sheet
VANTIQ Corporate Overview Brochure
See why customers around the globe rely on VANTIQ to create next-generation digital applications based on event-driven architecture utilizing advanced technologies such as IoT, AI, and edge computing.
White Paper
Understanding Event-Driven Systems
VANTIQ chief technology officer (CTO) Paul Butterworth thinks event-driven systems are the most effective way to support the modern, real-time digital enterprise. Learn what event-driven systems are and why they are the most effective way to support digital enterprises.
White Paper
Gartner Report: The 5 Steps Toward Pervasive Event-Driven Architecture
Where does your company rank on EDA readiness? Gartner has recently put together its '5 Steps Toward Pervasive Event-Driven Architecture' to outline where companies are at on their adoption of EDA and what the necessary steps are to reach the next level.
VANTIQ Partnership with System Integrator productOps
System integrator productOps uses VANTIQ to deliver mission-critical, real-time event-driven applications to its clients. Learn why they chose us in this quick video.
This website uses cookies to provide you with a better user experience. By using our site you agree to the use of cookies as described by our cookie policy. If you do not want to accept all cookies from our website, please see our cookie policy on how to modify the types of cookies that are accepted by your browser client.