1 vote
I have a complex user case where I want collapsible nested content, and also want to store the open/closed state so I can respect them next time the user loads the app.
I'd prefer to use expansion panels, but in order to do this I need to know when someone clicks to expand or collapse the element. There's currently no -OnClick for New-UDExpansionPanel, but there is for New-UDListItem with Children.
I have it working with list items for now (no custom functions for clarity):
New-UDPage -Url 'Example' -Name 'Example' -Content {
[bool]$lstLbl1Open = if ($null -eq $Cookies.cLstLbl1 ) { $true }
else { [System.Convert]::ToBoolean($Cookies.cLstLbl1) }
[bool]$lstLbl2Open = if ($null -eq $Cookies.cLstLbl2 ) { $true }
else { [System.Convert]::ToBoolean($Cookies.cLstLbl2) }
New-UDList -Dense -Content {
New-UDListItem -Id 'lstLbl1' -Label 'Example List Item 1 Parent' -Children {
New-UDListItem -Label 'Example List Item Child'
} -Open:$lstLbl1Open -OnClick {
$lstLbl1Open = -not (Get-UDElement -Id 'lstLbl1').Open
Set-UDElement -Id 'lstLbl1' -Attributes @{
Open = $lstLbl1Open
}
# https://forum.devolutions.net/topics/52958/get-and-set-cookies
Invoke-UDJavaScript "
// Build the expiration date string:
var expiration_date = new Date();
var cookie_string = '';
expiration_date.setFullYear(expiration_date.getFullYear() + 1);
// Build the set-cookie string:
cookie_string = 'cLstLbl1=$lstLbl1Open; path=/; expires=' + expiration_date.toUTCString();
// Create or update the cookie:
document.cookie = cookie_string;"
}
New-UDListItem -Id 'lstLbl2' -Label 'Example List Item 2 Parent' -Children {
New-UDListItem -Label 'Example List Item Child'
} -Open:$lstLbl2Open -OnClick {
$lstLbl2Open = -not (Get-UDElement -Id 'lstLbl2').Open
Set-UDElement -Id 'lstLbl2' -Attributes @{
Open = $lstLbl2Open
}
# https://forum.devolutions.net/topics/52958/get-and-set-cookies
Invoke-UDJavaScript "
// Build the expiration date string:
var expiration_date = new Date();
var cookie_string = '';
expiration_date.setFullYear(expiration_date.getFullYear() + 1);
// Build the set-cookie string:
cookie_string = 'cLstLbl2=$lstLbl2Open; path=/; expires=' + expiration_date.toUTCString();
// Create or update the cookie:
document.cookie = cookie_string;"
}
}
} -AutoInclude