End-To-End Use Case
Last updated
Was this helpful?
XMPro Platform
Last updated
Was this helpful?
This step-by-step tutorial is meant to be an introduction to using the XMPro platform. Completing it will give you a solid foundation to understand the more advanced concepts and detailed how-to guides. This tutorial will explain how to create and design a Data Stream, configure Stream Objects to ingest, analyze, transform, and perform actions on data. You will also learn how to set up a Recommendation to generate alerts based on rule logic, create and design an App, create Data Sources and Connections, and configure a simple Data Grid and Chart.
Please note that the XMPro platform requires third-party cookies to be enabled on your browser.
Let's assume there is a power plant that uses a heat exchanger to keep the turbine cool and at the optimum temperature. The heat exchanger circulates water between the cooling tower and the heat exchanger to dissipate heat. To keep a proper circulation of liquid, there are three pumps [A, B, C] installed. Each Pump has a sensor that provides live data for Flow Rate (L/m) and Temperature (°C) using MQTT.
Unless the Pump is under maintenance the Flow Rate should be above 15000 L/m and Water temperature should be below 130°C .
Engineers should be alerted if the average flow rate falls below 250 L/s. If the average temperature starts to rise above 130°C then a critical level alert should be raised.
Engineers should be provided a view to check the history of pump telemetry, maintenance records, and reservoir level to enable them to take necessary action.
The Use Case requires that we gather the Flow Rate and Temperature data from three pumps constantly, and pass it on to be analyzed and have actions performed on the data. We will achieve this with the use of Data Streams. A Data Stream is a visual representation of a flow of data. It is created through the Data Stream Designer.
To access the Data Stream Designer, log into your XMPro Account and press the button in the top-left corner of the screen and click on the Data Stream Designer item.
A Data Stream has four components:
Ingesting data through Listener Agents
Contextualizing sensor data/telemetry through Context Provider Agents
Analyzing and transforming data through Transformation and AI Agents
Performing actions or outputting data to other integrations through Recommendation and Action Agents
We will follow those four steps below.
In this section, we will simulate reading data from pump sensors and a metadata store, and combine the data together into a single flow.
To begin, we will need to create a new Data Stream. To create a Data Stream, follow the steps below:
Open the New Data Stream page from the left-hand menu.
Give the Data Stream a name. For example, "Pump Condition Monitoring"
Select the Type "Streaming". Data Streams of the Streaming type will run polling Agents at a set interval, for instance, every 10 seconds, whereas Recurrent Data Streams run on a customizable schedule, for instance, once a day at 12am. The recurring type only applies to polling-based Stream Objects, which we won't use in this example.
Select the category under which the Data Stream is to be added.
Select a collection that will be used to publish Data Stream.
Enter a description to best describe the Data Stream.
Click on "Save".
In a production environment, Data Streams would integrate with external data emitters through Agents like OSIsoft PI or MQTT Listeners. However, for the sake of keeping the example simple, we won't be using any Agents that require an environment to be set up. Instead, we will be simulating the data with the Event Simulator, Calculated Field, and CSV Context Provider Agents.
To simulate the telemetry from the pumps, follow the steps below:
Drag into the canvas one of each of the following Agents:
You can search for the Agent in the search bar, and click and drag the Agent into the canvas to add it. An instance of an Agent added to the canvas is referred to as a Stream Object.
Once you have all four Stream Objects in the Data Stream canvas, rename them as follows:
Event Simulator as "Simulate Pump Data"
Calculated Field as "Add Pump Identifier"
CSV as "Simulate Context Data for Assets"
Join as "Contextualize Data"
To change the name of a Stream Object, click the text and edit it.
Your stream should end up looking like this:
Once you have renamed all four Stream Objects, connect them with arrows as follows:
"Simulate Pump Data" to "Add Pump Identifier"
"Add Pump Identifier" to "Contextualize Data" (first input)
"Simulate Context Data for Assets" to "Contextualize Data" (second input)
To connect two Stream Objects, click and drag the green rectangle (Output) at the bottom edge of the first Stream Object, move the cursor to the green rectangle on the left edge of the second Stream Object (Input).
Your connected Stream Objects should look like this:
Now we will configure the added Stream Objects. Save your Data Stream now and after every change to propagate the changes throughout the Data Stream.
We will need to simulate ingesting data about flow rate and temperature from sensors in the pumps. We can achieve this with the Event Simulator Agent. The "Simulate Pump Data" Event Simulator will constantly generate data defined by the Event Definitions at a rate defined by the Events per Second property.
Edit the "Simulate Pump Data" Stream Object and click the + button to the right of the Event Definition grid to add event definitions.
Add two event definitions as follows:
Name: WaterTemperature &#xNAN;Type: Range &#xNAN;Minimum Value: 100 &#xNAN;Maximum Value: 160 &#xNAN;Spike Value: 0
Name: FlowRate &#xNAN;Type: Range &#xNAN;Minimum Value: 14000 &#xNAN;Maximum Value: 16000
Spike Value: 0
Ignore the Spike Value and Generate Spike options, as they are not relevant to the current scenario.
Change the Events per Second to 1. Click "Apply" on the Simulate Pump Data configuration page. Then click "Save" on the Data Stream page.
We need to add a way to simulate having three different pumps. At the moment the data is not identified, so we will need to add a range of identifiers to the data. This can be achieved with the Calculated Field Agent. The "Add Pump Identifier" Calculated Field will add a "PumpId" field to the data generated with values "A", "B", and "C" for each subsequent row.
To configure the Stream Object, double click on "Add Pump Identifier" to open its configuration. Or, you can also highlight the Stream Object and click on the "Configure" option at the top of the Data Stream.
Keep "Append to Current" as the "Results Returned As" value. This will add the value calculated by the expression to each row instead of creating a new row with the identifier.
Click the + button to the right of the Expressions grid to add the following expression:
Calculated Field: "PumpId" - The field won't exist yet in the dropdown, so you must enter it yourself.
&#xNAN;Expression: ReadingNo % 2 == 0 ? "A" : ReadingNo % 3 == 0 ? "B" : "C"
&#xNAN;Data Type: String
Press "Apply" on the PumpId expression and the Add Pump Identifier configuration pages, and press "Save" on the Data Stream page.
There is often metadata associated with assets that is not part of the live data from the sensors. In this case, metadata includes whether the pump is currently under maintenance, the manufacturer, and the last service date. We must retrieve this data from elsewhere. In a production environment, this might be an SAP EAM system, but for this example, we can achieve this through the CSV Context Provider Agent.
Double-click on the "Simulate Context Data for Assets" Stream Object to open the configuration menu. You can also highlight the Stream Object and click on the "Configure" option at the top of the Data Stream.
Download the provided file. The contents of the file are below the download link.
Then under Data check the Use Uploaded File? checkbox and upload the file into the CSV Context Provider. The CSV Definition will be automatically detected and filled.
Change UnderMaintenance from a String to a Boolean, using the options from the dropdown. Also change ServiceDate from a String to a DateTime, using the dropdown. Leave the Limit Rows, Filter Criteria, and Sort by properties as their default values.
When completed, press the "Apply" button at the top of the configuration, and then save the Data Stream.
The metadata about each pump needs to be appended to each row of sensor data received from the pumps. This can be achieved with the Join Agent.
The "Contextualize Data" Join will join together the data from the CSV Context Provider and the Calculated Field using the PumpId as the common field. Configure it as follows:
Behavior: Context - we want to join some context data to our row.
Context Endpoint: Right - we must tell the Stream Object which input has Context data. The Context Data is received by the Right endpoint, as shown in the image below.
Select List: all fields except R_PumpId (as the same data will be in L_PumpId).
Join Type: Inner Join.
On: L_PumpId = R_PumpId
Press "Apply" on the Contextualize Data configuration page, and press "Save" on the Data Stream page.
In this section, we will add some analytics and calculations that will find exceptions, transform the units of the data and find the average level across 5 seconds.
We want to only pass data onward in the Stream if the current pump is not under maintenance. This can be achieved with the Filter Agent. To do this, drag in a Filter Agent and connect the "Contextualize Data" Join endpoint to the Filter.
Rename the Filter to "Ignore Pumps Under Maintenance", and save. Double-click on the Stream Object to open the configuration menu. Click on the + symbol to add a new rule for the filter. Select "Add Condition", and configure the Filter to have the logic R_UnderMaintenance Equals false.
The configuration and Data Stream should look like this:
There are two green outputs to the Filter Stream Object, the left output is where the data is output to when the filter is true. The right output is where the data is output to when the filter is false. The left True Output should be the output that you connect to the next Stream Object.
Press "Apply" on the Ignore Pumps Under Maintenance Data configuration page, and press "Save" on the Data Stream page.
The data from the Pump Data has different units than what we want to use - it is measured in L/m and we want the units to be in L/s. This can be solved with the Calculated Field Agent. To transform the data, drag in a Calculated Field Agent, and rename it to "Change Unit to L/s".
Connect the "Ignore Pumps Under maintenance" Filter endpoint to the Calculated Field and Save. Make sure you connect the left True Output of the "Ignore Pumps Under maintenance" Stream Object to the Calculated Field's input.
Configure the Calculated Field as follows:
Calculated Field: L_FlowRate
Expression: L_FlowRate / 60
Data Type: Double
This will divide the flow rate by 60 to make the value in L/s instead of L/m.
Press "Apply" on the Change Unit to L/S configuration page, and press "Save" on the Data Stream page.
The Use Case requires that engineers should be alerted if the flow rate averaged over 5 seconds falls below 250 L/s, and if the temperature averaged over 5 seconds also starts to rise above 130°C then a critical level alert should be raised. This can be achieved with the Aggregate Agent.
To calculate the average temperature and flow rate over 5 seconds, drag in the Aggregate Agent and name it "Average across 5 seconds". Connect the "Change Unit to L/S" Calculated Field endpoint to the Aggregate Agent and save.
Configure the Aggregate Agent as follows:
Attributes to group on: L_PumpId
Aggregate:
Average (of) L_FlowRate (as) FlowRateAvg
Average (of) L_WaterTemperature (as) CoolantTemperatureAvg
Unit: Second
Size: 5
Press "Apply" on the Average across 5 seconds configuration page, and press "Save" on the Data Stream page.
We want the data for the average flow rate to be in integer format to display it more easily. This can be achieved through the Data Conversion Agent. To do this, drag in a Data Conversion Agent and rename it to "Data Conversion". Connect the "Average across 5 seconds" endpoint to the Data Conversion Agent and press "Save" on the Data Stream page.
Configure the Data Conversion Agent with the following two rows (You may need to maximize the page again). Click on the + symbol to add each row:
First row:
Input Column: "FlowRateAvg"
Output Alias: "FlowRateAvg"
Data Type: "Int64"
Second row:
Input Column: "CoolantTemperatureAvg"
Output Alias: "CoolantTemperatureAvg"
Data Type: "Int64"
The input columns should already have FlowRateAvg and CoolantTemperatureAvg as options listed in the dropdown menu.
This will replace the FlowRateAvg and CoolantTemperatureAvg with values converted to Integer format.
Press "Apply" on the Data Conversion configuration page, and press "Save" on the Data Stream page.
In this section, we will integrate our Data Stream with the App Designer to trigger Recommendations and send data to Apps.
First, we want to trigger Recommendations with the data from the Data Stream. This can be achieved with the Run Recommendation Agent. To do this, drag in a Run Recommendation Agent and rename it to "Run Recommendation". Connect the "Data Conversion" endpoint to the Run Recommendation Agent and press "Save" on the Data Stream page
Configure the Run Recommendation Stream Object as follows:
Url: the URL of the App Designer site
Key: the App Designer Key.
Output on first occurrence Only?: true
Entity Identifier: L_PumpId - this is for the Recommendation to create separate Alerts for each Entity
Columns To Return: Leave empty (Return all columns)
Otherwise, the App Designer URL and Key can be found by following these steps:
Open the App Designer in a new tab by clicking the "Waffle" button (a.ka. "App Launcher") in the top left corner of the page and clicking "App Designer".
Copy the App Designer URL from the browser's address bar and paste it into the Url field in the Run Recommendation configuration.
Click the "Settings" button in the top bar and click the "Copy" button to the right of the Integration Key and paste it in the Key field in the Run Recommendation configuration. You will only be able to see this if you have Admin access. If you do not have Admin access, you can ask an Admin to share the key with you.
This is how your Data Stream and configuration should look:
Press "Apply" on the Run Recommendation configuration page, and press "Save" on the Data Stream page.
We want to send data to an App to be displayed as a decision support dashboard for the engineers. This can be achieved through the XMPro App Agent.
Drag two XMPro App Agents onto the Data Stream and name them "Post Pump Overview" and "Post Pump Specifics". One will send an overview of the data for all pumps, and the other will send a large cached amount of data for each pump.
Now we run into a problem; we want to connect multiple agents to the same data. To solve this, drag a Broadcast Agent into the Stream, and rename it to "Broadcast". Disconnect the "Ignore Pumps Under Maintenance" input arrow and connect it to the new Broadcast Stream Object. You can disconnect the arrow by highlighting the arrow itself and clicking on the "Delete" button at the top of the Data Stream.
Alternatively, you can click on the green rectangle (input) on the "Ignore Pumps Under Maintenance" Stream Object, and drag the arrow to the green rectangle (input) of the "Broadcast" Stream Object. Connect the Broadcast endpoints to the two XMPro App Stream Objects and the "Ignore Pumps Under maintenance" Filter, as shown in the video below:
Press the "Save" button at the top of the Data Stream. Your Data Stream should now look like this:
Configure the "Post Pump Overview" Stream Object to store in cache and output only one row per pump as follows: (Follow the steps given for the Run Recommendation Agent above to get the Url and Key.)
Url: the URL of the App Designer site
Key: the App Designer Key.
Cache Size: 1
Replace Cache: false
Cache Per Entity: true
Entity Identifier: L_PumpId
Primary Key: L_PumpId
Press "Apply" on the Post Pump Overview configuration page and press "Save" on the Data Stream page.
Configure the "Post Pump Specifics" Stream Object to cache and output 20 rows per pump as follows:
Url: the URL of the App Designer site
Cache Size: 20
Replace Cache: false
Cache Per Entity: true
Entity Identifier: L_PumpId
Primary Key: L_PumpId and L_ReadingNo
Press "Apply" on the Post Pump Specifics configuration page and press "Save" on the Data Stream page.
Your Data Stream is now complete. To start the stream, click on the "Publish" button. To see the data flow at each Stream Object, press the "Live View" button and select all the Stream Objects. Alternatively, you can also select specific Stream Objects. For example, if you just want to see the data flowing through to the XMPro App, select the XMPro App Stream Object.
To see if data is flowing properly within the Data Stream, you will need to Publish the Data Stream. Before publishing, you want to make sure there are no errors in the configurations of the Stream Objects. Click on the "Integrity Check" option at the top of the Data Stream. If any errors are present, the Stream Object with the errors will turn red. Hovering over the Stream Object will show you the list of errors. Once these errors are fixed, you will need to run the Integrity Check again.
Once all Stream Objects have passed the Integrity Check, you can click on "Publish", then "Live View", on the top of the Data Stream. The Live Data will open on the side, and you can then click on "Select Views" to click on the Stream Objects you want to troubleshoot.
If data is displaying for the Stream Object, that means the Stream Object should be working correctly. If not, you can recheck your configuration values for the Stream Object. You can also check if you have a Stream Host running. There are also other ways that you can troubleshoot Data Streams.
The Use Case requires that engineers should be alerted if the flow rate averaged over 5 seconds falls below 250 L/s, furthermore, if the temperature averaged over 5 seconds also starts to rise above 130°C then a critical level alert should be raised. To achieve this we will use Recommendations.
Recommendations can be found in the App Designer. Open the App Designer in a new tab by clicking the button in the top left corner of the page and clicking "App Designer".
To access the Recommendation management section of the App Designer, click on the "Recommendations" button in the left menu and press the "Manage Recommendations" button on the page.
To trigger the required Alerts, we will be creating a Recommendation with two Rules. First, create a Recommendation called "Pump Flow Threshold". The Data Stream should be the same "Pump Condition Monitoring" stream we created previously.
To create a new Recommendation, follow the steps below after navigating to the Recommendation management page:
Click "New".
Specify a name and category for your new Recommendation.
Choose a Data Stream to receive data from.
Click "Save".
Make sure to click the "Manage Access" command and give at least yourself Run Access, otherwise, you won't be able to see any Recommendation Alerts that will be generated by this Recommendation.
This Rule will notify Engineers when the Flow Rate is lower than 250 L/s and give them instructions and resources to help resolve the issue.
Select the Enable Execution Order checkbox, since we want the more critical rule to override the medium rule. Create a Rule by pressing the + button to the right of the Rules list.
Give the Rule the following properties:
Rule Name
Medium - Flow rate falling
The Rule Name is for identification only and will not be shown to the user in the Recommendation Alerts grid or detailed view.
Alert Headline
Warning @L_PumpId: Flow rate is falling
This refers to the headline that the Recommendation Alert will be created with. Any tag (starting with @) will be replaced with the value output from the Data Stream. Add tags by typing @ and selecting the item.
Alert Description
Flow rate is reported to be falling, danger of plant overheating and shutdown. Flow Rate: @FlowRateAvg Coolant Temperature: @CoolantTemperatureAvg
This refers to the description that the Recommendation Alert will be created with. Any tag (starting with @) will be replaced with the value output from the Data Stream.
Alert Ranking
Medium
The priority level that the Recommendation Alert will be created with. Priority level determines the order in which the Alerts will be displayed.
Icon
The icon that will be displayed on the Recommendation Alert in the grid and in detailed view.
Impact Metric
Prefix: $
Value: 15
Unit of Measurement: K
The impact that the Recommendation Alert will have. For example, if the value for this was $15K, that means that the cost of the condition causing the Alert would be $15K (or $15000). This will be shown on Alerts in the Recommendation Block in App Pages.
Rule Logic
FlowRateAvg Is less than or equal to 250
Data sent from the selected Data Stream is passed through the Rule Logic and if the conditions created are met by the data (and if Recurrence is set to All Occurrences or First Occurrence and no Pending Alert exists), a new Recommendation Alert will be created.
You can add new conditions or groups by clicking the + button. Groups can be nested within each other to create advanced logic. In an "And" group, all the conditions must be true, and in an "Or" group, only one of the conditions must be true to trigger an alert.
The Rule Logic determines whether a Recommendation Alert will be created on receiving data from the Data Stream.
There should be some instructions for the engineers to follow to help resolve the issue when it occurs. This can be provided through the Triage Instructions.
Continue creating the Rule with the following properties:
Enable Form
false
Additional Recommendation Management Column
-
An additional column in the Recommendation Alerts grid.
Resolution
Manual
Resolution determines whether new data from the Data Stream will automatically resolve the Recommendation Alert if the Rule Logic is no longer true.
Manual Resolution: A user must manually resolve each recommendation.
Automatic Resolution: Recommendation auto resolves when trigger conditions are no longer true. This may impact performance.
Recurrence
First Occurrence
Recurrence determines whether new data from the Data Stream will create new Recommendation Alerts if there already exists a Pending Recommendation Alert and the Rule Logic is true. Recurrence will create an Alert for each unique Entity selected by the Data Stream. For example, since there are three pumps (A, B, and C), each pump will generate its own Alert when something goes wrong, and it will need to be resolved before new Alerts for that pump are created.
First Occurrence: The current recommendation must be resolved before others can be triggered for the same rule.
All Occurrences: A new recommendation will be triggered every time the rule conditions are true.
Recurrence will be disabled and be considered to be First Occurrence if the Recommendation has Execution Order enabled.
Log Data On
First Occurrence
Determines whether new events from the Data Stream that satisfy the Rule Logic, after a recommendation has been triggered, will be logged or not.
First Occurrence: Current recommendation will only log the initial event which triggered the recommendation.
All Occurrences: Event data will be stored for every instance that satisfies the rule logic.
Enable Triage Instructions
true
A flag that determines whether the Recommendation Alert will be created with Triage Instructions.
Triage Instructions
Instructions to help whoever is resolving the Recommendation Alert.
Find the Triage Instructions below to copy for this use case.
Possible problems causing a discharge pressure drop:
Blocked Suction Pipe
A partial obstruction can be caused by a piece of foreign material being drawn across the bottom of the suction pipe during the operation of the pump. Such an obstruction may not be sufficient to stop operation completely, but will result in a reduced output from the pump. It will also cause a drop in discharge pressure and amps, and will increase the vacuum reading on the pump suction. Rough running and vibration of the pump may also occur due to cavitation within the pump.
Blocked Impeller
Impellers are capable of passing a certain size particle. If a particle larger in size enters the suction pipe, it may become lodged in the eye of the impeller, restricting the output of the pump. Such an obstruction will usually result in a drop of amperes and a drop in both discharge pressure and suction vacuum readings. The out-of-balance effects resulting from this condition may cause pump vibration.
SHUTTING DOWN PROCEDURE
Before you shut down the pump, it should be allowed to operate for a short period on only clean water to clear the system.
Then proceed as follows:
Depress the ‘STOP PUMP’ push-button on the control panel.
Gland seal water (if any) must be left on during all subsequent operations, namely: start-up, running, shutdown, runback and system drain. Gland water may only then be turned off.
You can provide the Engineers with helpful links to videos, PDFs, or websites to help resolve the issue with the Resources.
Continue creating the Rule by checking Enable Resources and adding the following Resources:
Test Procedure
http://xmdocsdownload.s3.amazonaws.com/Technical/WarmanETP.pdf
You can see this rule in action by clicking the "Publish" command in the Recommendation and in the Pump Condition Monitoring Data Stream. If the average flow rate coming from the Data Stream is lower than 250 L/s the Rule will generate an Alert for each Pump that can be viewed in the Recommendation Alerts grid.
Click on the "Recommendations" button to go back to the Recommendation Alerts grid.
To see more details about the alert, click on a row in the "Recommendation Alerts" grid. The Recommendation Alert page provides details of the alert and allows you to monitor, discuss, and take action.
We want to trigger new Alerts that override the Medium level alert raised before if the temperature averaged over 5 seconds also starts to rise above 130°C.
To do this we will create the second Rule and configure the escalation settings. This second Rule will notify Engineers when the Coolant Temperature is higher than 130°C and Flow Rate is lower than 250 L/s and give them instructions and resources to help resolve the issue.
To create another Rule, click on the Recommendations page from the left-hand menu, and click on "Manage Recommendations". Select the "Pump Flow Threshold" Recommendation that was created previously.
To make amendments to the Recommendation, you will first need to unpublish the Recommendation, by clicking on the "Unpublish" button at the top of the Recommendation. Finally, click on the "plus" symbol under "Rules" to add the new Rule.
Create the new Rule with the following properties:
Rule Name
Critical - Plant is overheating
Alert Headline
Alert @L_PumpId: Plant has started to overheat due to low flow.
Alert Description
Plant is overheating due to low flow rate, immediate action is required to avoid damage. Temperature: @CoolantTemperatureAvg Flow Rate: @FlowRateAvg
Alert Ranking
High
Icon
Impact Metric
Prefix: $
Value: 25
Unit of Measurement: K
Rule Logic
FlowRateAvg Is less than or equal to 250
CoolantTemperatureAvg Is greater than 130
Enable Form
false
Additional Recommendation Management Column
-
Resolution
Manual
Recurrence
First Occurrence
Log Data On
First Occurrence
Enable Triage Instructions
false
Enable Resources
false
We also want the Critical Rule to override the Medium Rule. To do this, ensure that the Enable Execution Order and Auto-Escalate checkboxes are ticked in the Recommendation, and reorder the Rules to put the Critical Rule at the top.
You can see the full Recommendation in action by clicking the "Publish" command in the Recommendation. Ensure that your Data Stream is also published and running. If the average coolant temperature is higher than 130°C and the average flow rate coming from the Data Stream is lower than 250 L/s the Rule will generate an Alert for each Pump that can be viewed in the Recommendation Alerts grid. Any pending Alerts from the Medium rule will be resolved and escalated to the new Alert.
3. Create Event Boards & Apps
The Use Case requires that the Engineers should be provided a view to check the history of Pump telemetry, maintenance records, and Reservoir Level in order to enable them to take necessary action. This requirement can be met through the use of an App with a couple of Pages.
First, create an Application (or App) by pressing the "New Application" button in the left menu and clicking the "Blank App" template.
Give the App the following properties:
Name: "Power Plant THG Event Board"
Description: "An App to monitor assets at a power plant."
Category: any
Default Theme: Dark
Landing Page Layout: the first item
Click on the "Save" button. This will take you to a page where you can view the list of pages in the App or edit the App itself. Click on the Landing Page to edit it.
We will want two sections on the landing page, so follow the steps to duplicate the Vertical Stacked Layout as shown in the screenshot below.
Click "Page Layers".
Click on the carets to expand the layers until you reach the second Vertical Stacked Layout.
Click on the Vertical Stacked Layout.
A blue toolbar will appear at the top-right corner of the block. Press the third button with a "Clone" symbol to duplicate the Vertical Stacked Layout and everything it contains.
The result should look as below:
You can rename both Vertical Stacked Layouts to identify them. In the Page Layers tab, double click the Left Vertical Stacked Layout to change the text to 'Left Vertical Stacked Layout'. Double click on the text of the other Right Vertical Stacked Layout and rename that to 'Right Vertical Stacked Layout'.
The left side of the page should be twice as wide as the right side, so follow the steps to change the Left Vertical Stacked Layout's Flex Grow property in the Block Styling to 2 as shown in the screenshot below.
Make sure the Left Vertical Stacked Layout is still selected in the Page Layers.
Click the "Block Styling" button to open the style manager.
Click the "Flex Layout" accordion item to expand it.
Change the Grow field to 2.
Press the "Save" button at the top of the Application designer.
The result should look like this:
We want to display the properties of the pumps in regularly spaced and sized cards on an App page. To do this, create one card with a Data Source, which will repeat the card for each pump.
Change the Left Vertical Stacked Layout's Display property in the Block Styling to block, so that the cards will overflow to however many pumps are present.
Press the "Save" button at the top of the Application designer.
Follow the steps below to select the left Card and delete it. We will replace the default Card with a useful layout.
Open the Page Layers.
Expand to the Left Vertical Stacked Layout's Card.
Click the Card item to select the Card element.
Click the last button on the blue toolbar to delete the Card.
Replace the deleted Card by dragging in a Card from the Blocks, which will include some extra items.
We want the card to take up half the width of the left section, and overflow to the next line when there are more than 2 cards.
Select the new Card using the Page Layers tab.
Click on the "Block Styling" tab.
At the top, in the "Style Group" field, click on the checkbox on the left of the "card-gutter" tag to unselect the card-gutter style group. This is because we only want to apply styles to this specific element.
Under the "General" subsection, change "Display" to "inline-block".
Under the "Dimensions" subsection, change the Width to 50.
Under the "Dimensions" subsection, change the unit to %.
Rename the Metric text items to "Status", "Flow Rate", and "Coolant Temperature". You can double-click the text items and change the text. The Status should show an Indicator (a colored circle) to display the status of the pump. Delete the top Value.
Right-align the remaining two Values by expanding the Typography section and changing the Text Align property to Right.
Drag two Indicator Blocks from the Blocks tab into the deleted Value text item's box. Click the Box and change the Flex Justify to End. This will align the Indicators to the right side of the box.
The "Status" indicator should be red or green, depending on whether the pump is under maintenance or not. Change the left Indicator's Color in the Block Properties to "#ad6363" (red), and the right to "#398a33" (green).
Add the Data Source that will be used to display our pump data.
Click on the "Page Data" button.
Click the + button next to Data Sources.
Add a Data Source with Name as Pump Data, Connection as Data Streams Connector, and Entity as Post Pump Overview.
Check Live Data Updates as well to keep the data constantly updated.
Click on the "Save" button.
Click the Card and set the Data Source in the Block properties tab to Pump Data. Set Show Default Row to Never, as we don't want an empty card at the end. You can also open the Page Layers tab and look at the highlighted Block to confirm that the correct Block is selected.
When the data comes in for each pump, we want the cards to display the values for each pump. To do this, we will give the values, indicators, and heading dynamic or expression values.
To change a property to Expression mode, follow the steps below:
Select the block (in this case the Heading of the card) through the canvas or Page Layers.
Click the "Block Properties" button.
When adding an expression for the "PumpId", press the button on the left of the Text property field to toggle between Static, Dynamic and Expression value modes. Change the mode to Expression so you can enter an expression to display the Pump Id that is selected.
Give the Heading's Text property an expression value of "Pump " + {L_PumpId} by clicking the button on the left side of the field twice.
Select the Value Block next to 'Flow Rate'. Click on the "Block Properties" tab and give the Text an expression value of ToStr(Round({L_FlowRate})) + " L/m". Give the Coolant Temperature Value Text Block an expression value of ToStr(Round({L_WaterTemperature})) + "°C".
The circle Indicators' Visible property should be changed to an expression value of {R_UnderMaintenance} and !{R_UnderMaintenance} respectively.
Change the text of the Title to "Pumps at Power Plant THG".
To launch the App to see how it looks, press the "Save" button at the top of the Page and then press the "Launch" button.
Each unique pump entity will have its own card, and data will be updated constantly for the Flow Rate and Coolant Temperature.
To get back to editing the App, press the "Edit" button at the top-right of the App. This button will only be shown for users who have been granted access to the App.
The Engineers want to be able to see a detailed chart and history of each pump when they click on a pump's card on the landing page. To make a new drilldown Page, close the Landing Page, and add a new Page with the + button. Name the Page "Pump Details".
To link to the newly created Pump Details Page when clicking a card, close the page and open the Landing Page again. You can click and drag the grey header of the page to the right to see the list of pages.
Click on the "Page Layers" tab. Expand the carets until you get to "Box Hyperlink", and select it.
Click on the "Block Properties" tab.
Change the Navigate to property to "Page", the Page property to "Pump Details", and click the "Edit" button to the right of Pass Page Parameters.
Press the + button on the Pass Page Parameters page to add a new Parameter to the Pump Details Page.
Name the Parameter "PumpId" and give it the Type "String".
Click on "Add".
As mentioned previously, clicking on the icon on the left of the textbox field can toggle between Static, Dynamic, and Expression modes. Click on the button in the Value column once to change it to 'Dynamic' mode, which is indicated by the Database symbol.
Select the value "L_PumpId" as this is the value we want to pass to the drill-down page.
Click "Apply" to apply your changes to the Pump Details page's Parameters and the Box Hyperlink.
To see the navigation in action, launch the Landing Page and click on one of the cards. You will be navigated to the Pump Details page.
Press the "Edit" button at the top right of the Pump Details page to edit it.
We want two cards inside the Left Vertical Stacked Layout, so select the left Card and duplicate it.
We want the top left card to be twice as tall as the bottom left card, so change the top left Card's Flex Grow property to 2 in the Block Styling. Remember to uncheck the card-gutter style group to make the style only apply to the selected element.
We want the title of the page to be the Pump's name, so change the Title's Text property to an expression value "Pump " + {Parameter.PumpId}.
We also want the Headings of the page to explain what is being shown, so change the top-left heading's text to "Details" and the bottom-left heading's text to "Maintenance History".
We need to get the data from the Data Stream. Go back to the Page Data tab, and next to 'Data Sources', click on the "plus" symbol to add another Data Source. Name the new Data Source "Pump Live Data", with the Connection "Data Streams Connector", Entity as "Post Pump Specifics", and Live Data Updates checked.
Drag a Chart into the Details card. Highlight the Chart, and in the Block Properties tab, set the Data Source of the Chart to "Pump Live Data".
Add a Filter to the Data Source of L_PumpId Equals {Parameter.PumpId}. Click on the "plus" button to start adding the filter.
When selecting the "PumpId", press the button on the left of the field to toggle between Static and Dynamic value modes. Change the mode to Dynamic so you can select a dynamic value from the dropdown. Here you can select the "PumpId" Parameter. This will make sure the chart is only showing data from the pump that we are looking at.
We want the chart to look great and display a line series in a separate panel for flow rate and temperature. To do this, edit the Block Properties of the Chart as follows:
In the Appearance accordion item set the Legend Alignment to "Align Bottom Center".
In the Axes accordion item, change Type to "Date Time", Enable Pan and Zoom to "False" and Display Grid Lines to "False".
In the Data accordion item, add two series with the + button to the right of the Series list as follows (leave the default value if it is not specified):
Name
Flow Rate
Temperature
Color
#7ee2b5
#c46565
Type
Line
Line
Pane
Default
Temperature
X Axis Data
L_Timestamp
L_Timestamp
Y Axis Data
L_FlowRate
L_WaterTemperature
When making the 'Temperature' series, you will need to add a new Pane called 'Temperature.'
To add a new Pane for the chart, click the 'Edit' button next to 'Pane' in the series property page.
You can see how this looks by launching the page with the PumpId parameter "A", "B", or "C"
On this page we want to also show the Engineers the pump maintenance history. This can be achieved through the use of a grid and a SQL Data Source. Below is a script that can be used to create the table used:
Drag a Data Grid into the Maintenance History card and edit its Block Properties. Press the + button next to the Data Source select box to add a new Data Source, and name it "Pump Maintenance."
We want to add a SQL Data Source, but we don't have a SQL Connection yet. Press the + button next to the Connection select box and click on "SQL Connector."
Give the new SQL Connector a Name, enter your own connection string, User Name, and Password, and choose a Database.
Save the Connection and select it in the New Data Source. Select the "PumpMaintenance" table and give the Data Source the name "Pump Maintenance".
Save the new Data Source and select it in the Data Grid's Block Properties.
This grid will show all the Pump Maintenance rows, but we want to show just the rows that this page is looking at. To do that, edit the Filter and add the filter logic: PumpId Equals {Parameter.PumpId}
We want to change the Data Grid's columns around to make them look good. Open the Columns accordion item, and reorder the columns by dragging the dotted handles to the left of the list. Order them Id, Comments, Timestamp, PumpId.
We don't want to show the PumpId, as it will always be the same. To hide it, click the "PumpId" row in the list and change the Visible property to "False". Apply the changes to the column.
The Timestamp column should be in Date format, not Date Time. Edit the Timestamp column and change Type to "Date".
Launch the page with the PumpId parameter "A", "B", or "C" to see this in action. It should look like this:
We want engineers to be able to see and respond to Recommendation Alerts from this App, so we should drag a Recommendations Block into the right card of both Pages. Also, rename the heading to "Recommendations".
To filter the Recommendation Alerts to the relevant ones only, select the "Pump Flow Threshold" in the Block Properties of the Recommendations Block on both pages.
On the Pump Details Page, we only want to show the Recommendation Alerts for the specific pump we're looking at. To do this, Change the Entity ID property to Equals Parameter.PumpId.
We have now completed the requirements of the Use Case. To see the App running live, click on the "Launch" button. You can also publish the App by dragging the canvas to the left to open the page list, and clicking on "Publish". Here is how the final drill-down page looks:
See the for more information on Data Streams.
Feel free to load a suitable icon. If you do not, the default icon will be used. Sample icons can be found in the .
Refer to if you are not able to find the Agents in the toolbox or the correct versions.
See the article on for more information.
It is highly recommended that you use any that you already have that store the URL or key.
It is highly recommended that you use any that you already have that store the URL or key.
Key: the App Designer Key. .
It is highly recommended that you use any that you already have that store the URL or key.
To read more about Integrity Checks, read the article.
For more ways on how you can troubleshoot a Data Stream, read the article.
An icon of your choice (hover your mouse over the default icon to upload a different one - sample icons can be found in the )
.
A flag that determines whether the Recommendation Alert will be created with a .
Feel free to load a suitable icon or use the default. Sample icons can be found in the .
Icon: Feel free to load a suitable icon. If you do not, the default icon will be used. Sample icons can be found in the .
See the article on for more information.
See the articles on and for more information.
See the article on for more information.
See the for more information.
See the article for more information.
If you are unable to see the parameters in the drop-down list, double-check that the Data Source has been applied to the correct Card block, as shown .
We want a similar layout for this page, so follow the steps from the Landing Page to duplicate the Vertical Stacked Layout, and make the left side twice as wide as the right side. .
See the article for more information.
