OnCLick for New-UDExpansionPanel

1 vote

avatar

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

All Comments (0)