Save button state across instances

Universal Dashboard Universal Dashboard Help
1

I am looking for a way to indicate which of a couple buttons was last pressed so as an example of events.

Load dashboard on a phone.
Press a button, button becomes highlighted. Then press another button, first button de-highlights and the second is highlighted.
Load dashboard on PC.
Second button is highlighted.

I am thinking about possible ways to solve this. Maybe load button states from a CSV file and write to it with each press and changing an icon on each button. I would prefer if the button changed color and/or shadow was removed.

Thanks,
William

2

For changing state in my UDButtons I use Javascript to change the text as well as state/color. And depending on the task of the button I could have 2-3 of these state changes within a single onclick - ie ‘please wait’, success, fail.

function Set-UDButtonStateChange {
    param($Id, $Text, $Color, [Switch]$Disabled)
    if ($Disabled) {
        Invoke-UDJavaScript -Javascript "
        document.getElementById('$($Id)').disabled = true;
        document.getElementById('$($Id)').textContent = '$($Text)'"
    } else {
        Invoke-UDJavaScript -Javascript "
        document.getElementById('$($Id)').disabled = false;
        var btn = document.getElementById('$($Id)');
        btn.textContent = '$($Text)';
        btn.style.backgroundColor = '$($Color)'"
    }
}

Then inside of my UDButton -Onlick I call the Set-UDButtonStateChange

Set-UDButtonStateChange -Id 'button-id' -Text 'Change Text'

This will disable the button - handy for when something takes a moment to load and the user doesn’t keep pressing the button.

Set-UDButtonStateChange -Id 'button-id' -Text 'Please Wait' -Disabled

And you can change the color say to red if there was an error (try {} catch {}

Set-UDButtonStateChange -Id 'button-id' -Text 'Error' -Color red

button-state-change

2 Likes
3

Thanks, @mylabonline, for leading me in the right direction.

What do you think would be the best way to save the buttons state so if I reload the page it is remembered?

4

Do you want to save the state for that individual browsing only? or all users?
I’d advise to look into using either the $session or $cache variables or saving to a sql table.

I use cache for somethings, but I regularly recycle my app pool for various reasons and so for things like this I write a 0 or 1 back to sql for these values, then load the button state based off that…
This is a switch not a button but the principle is the same:

$row = invoke-sqlcmd2 @SQLCON -Query "SELECT * FROM [tablename] WHERE _id=$rowid"
New-UDSwitch -id "IDgoeshere" -ontext "" -offtext "" -OnChange { 
    invoke-sqlcmd2 @SQLCON -Query "UPDATE [tablename] SET [columnname]='$($EventData)' WHERE _id=$rowid"
} -On:$(if($row.columnname){$true}else{$false})
1 Like
5

You can do this 1 of 2 ways,

if you only want the button state to stay for the session only, then you can create a $Session:var and store the button state in there. That var will live as long as the user session does.

So when your button state changes you could something like this

$Session:Button1 = [PSCustomObject]@{
   id = 'button-id'
   state = 'disabled'
   color = 'red'
}

Then when you call the button state again (say on refresh) you can call that $Session:Button1 first to see if there is state for that button

if ($Session:Button1 |Where {$_.id -eq 'button-id'}) {
"Button Color is $(($Session:Button1 | Where {$_.id -eq 'button-id'}).Color)"
}

But what I would prefer is a state database (you mentioned CSV) but using a CSV will get complex and difficult to manage if you decide to add more functionality. What I recommend would be a database of sorts (Local SQL Express, NoSQL, etc…) this will allow you to store all sorts of data in different tables - maybe one for buttons, another for user-settings, etc…

For our UD we use Azure Web App to host the front-end, and Azure CosmosDB as the backend database. Also as a tip (personal opinion) is to use JSON as far as you can as your datasets. so when you POST back to your database from UD just |ConvertTo-Json for your data and store it in your table/database. PowerShell will automatically convert this once the response is received, and makes integration with other systems much easier.

Hope this helps.

2 Likes
6

@mylabonline Thank you for the wonderful insight!

7

@mylabonline -

Hi Tim -

Say a button only has icon, no text.

Is it possible to re-insert the icon back to button - after it is being re-enable?

8

@cn9ne Havent tried it, but I believe you could do this by placing the button inside an element, then using set-udelement to replace the content with the ‘new’ copy of the button that has your icon applied to it.

9

Thanks! That did the trick!

I just simply use Set-UDelement to disable and enable the button. Didn’t know the solution was so simple! :smiley: