Loading…

Dynamically Updating Controls with Sync-UDElement

Learn more about Universal Dashboard

This post was written using Universal Dashboard 2.1.

Although auto refreshing dashboards are neat, sometimes you want to allow your users to control the output of the dashboard using other elements. Often text boxes or selects may be used to control the output of a dashboard. In this post we will look at how you can use event handlers, the session scope and Sync-UDElement to update a dashboard automatically.

Dashboard Layout

You’ll need to layout a dashboard that exposes a couple controls to modify the output and a couple controls to display the data. In this example we will use the IEX Developer Platform to create a simple stock price dashboard. With IEX, we can easily query stock prices using Invoke-RestMethod.

PS > invoke-restmethod https://api.iextrading.com/1.0/stock/msft/chart


date             : 2018-10-09
open             : 111.14
high             : 113.08
low              : 110.8
close            : 112.26
volume           : 26198594
unadjustedVolume : 26198594
change           : 1.41
changePercent    : 1.272
vwap             : 112.2044
label            : Oct 9
changeOverTime   : 0

date             : 2018-10-10
open             : 111.24
high             : 111.5
low              : 105.79
close            : 106.16
volume           : 61376315
unadjustedVolume : 61376315
change           : -6.1
changePercent    : -5.434
vwap             : 108.1619
label            : Oct 10
changeOverTime   : -0.054338143595225444

First, let’s create a textbox and a button to enter a ticker.

New-UDTextbox -Placeholder 'Ticker' -Id 'txtTicker' 
New-UDButton -Id 'btnSearch' -Text 'Search' -OnClick {
}  

Second, let’s create a chart and a grid. The chart and the grid use a session scoped variable for the stock ticker. If the variable isn’t already set, they will use MSFT. Session scoped variables are only available to the current use. Other users will not be able to see the value of this variable.

New-UDRow -Columns {
    New-UDColumn -SmallSize 6 -Content {
        New-UDChart -Type Line -Id 'chart' -Title "Stock Price Chart" -Endpoint {
            if ($Session:Ticker -eq $null) {
                $Session:Ticker = "MSFT"
            }

            invoke-restmethod https://api.iextrading.com/1.0/stock/$Session:Ticker/chart | Out-UDChartData -DataProperty close -LabelProperty date
        }
    }

    New-UDColumn -SmallSize 6 -Content {
        New-UDGrid -Id 'grid' -Title "Stock Price Table" -Headers @("Date", "Open", "Close", "Volume") -Properties @("date", "open", "close", "volume") -Endpoint {

            if ($Session:Ticker -eq $null) {
                $Session:Ticker = "MSFT"
            }

            invoke-restmethod https://api.iextrading.com/1.0/stock/$Session:Ticker/chart | Out-UDGridData
        }
    }
}

User Interaction

The OnClick event handler of the button currently does nothing. The goal of this dashboard is to show a chart and a grid with a historical price. When you enter a ticker, you can click the Search button to update the controls with the new data.

When clicking the button, the first step is to retrieve the data from the text box control. To do this, we can use Get-UDElement to get the current state of any element on the page. We will get the state of the textbox control.

$Session:Ticker = (Get-UDElement -Id 'txtTicker').Attributes['value']            

When calling Get-UDElement, you can actually see the state being requested and sent back to the server in your browser’s web developement tools (usually F12).

{tag: "input",…}
attributes: {placeholder: "Ticker", value: "ua", type: "text", id: "txtTicker", ref: "element", key: "txtTicker"}
id: "txtTicker"
key: "txtTicker"
placeholder: "Ticker"
ref: "element"
type: "text"
value: "ua"
errorMessage: ""
events: []
hasError: false
loading: false
tag: "input"

In our example, we are looking to collect the value of the textbox. This is part of the attributes hashtable. We set the session scope variable to the value of the textbox.

Next, we need to instruct the other controls to update. To do this, you can call Sync-UDElement. This cmdlet tells the controls to callback to the server to receive new data. In this example, we need to update the chart and grid.

Sync-UDElement -Id 'chart'
Sync-UDElement -Id 'grid'

After calling Sync-UDElement, the chart and grid element will call their respective -Endpoint script blocks to return new data.

The End Result

As you can see, we now have a dashboard that can dynamically update a chart and grid with new data based on a session scoped variable.

You can use Sync-UDElement to update any control that has an -Endpoint and an -Id specified. If you want to update an entire group of controls, consider calling Sync-UDElement on the UDRow or UDColumn the controls reside within.

More Information

In this blog post we covered the following topics:

If you have any additional questions or feedback, please visit our forums.

Source

$Dashboard = New-UDDashboard -Title "Stock Chart" -Content {
    New-UDLayout -Columns 2 -Content {
        New-UDTextbox -Placeholder 'Ticker' -Id 'txtTicker' 
        New-UDButton -Id 'btnSearch' -Text 'Search' -OnClick {
            $Session:Ticker = (Get-UDElement -Id 'txtTicker').Attributes['value']
            Sync-UDElement -Id 'chart'
            Sync-UDElement -Id 'grid'
        }    
    }

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -Content {
            New-UDChart -Type Line -Id 'chart' -Title "Stock Price Chart" -Endpoint {
                if ($Session:Ticker -eq $null) {
                    $Session:Ticker = "MSFT"
                }

                invoke-restmethod https://api.iextrading.com/1.0/stock/$Session:Ticker/chart | Out-UDChartData -DataProperty close -LabelProperty date
            }
        }

        New-UDColumn -SmallSize 6 -Content {
            New-UDGrid -Id 'grid' -Title "Stock Price Table" -Headers @("Date", "Open", "Close", "Volume") -Properties @("date", "open", "close", "volume") -Endpoint {

                if ($Session:Ticker -eq $null) {
                    $Session:Ticker = "MSFT"
                }

                invoke-restmethod https://api.iextrading.com/1.0/stock/$Session:Ticker/chart | Out-UDGridData
            }
        }
    }
}

Start-UDDashboard -Dashboard $Dashboard -Port 10000

Leave a Reply