NEW-UDDynamic -LoadingComponent question

PowerShell Universal Universal Dashboard
1

Hi.

I have a boolean stored in a session variable : $session:display
and a dynamic region displaying a table of users informations with a circular progress bar when loading.

I would like to leave the region blank when loading for the first time and only display the progress bar when I refresh the region with a sync-udelement call from a button click.

How can I achieve this ?
I tried to toggle the session variable to $true in the click event and to insert the progress bar in a if condition, but it seems the value of the session variable is not refreshed in the loadingComponent environnement.

Thank you by advance.

2

Can you share the code you’re trying?

3 
$session:display = $false

New-UDTextbox -Id 'txtNom' -Value $SearchInfos -type text -icon (New-UDIcon -Icon 'search')            

New-UDButton -Id 'butRecherche' -Text 'Recherche' -OnClick {
	$session:display = $true
	Sync-UDElement -Id 'dyListeUtilisateurs'
}                

New-UDDynamic -Id 'dyListeUtilisateurs' -Content {
	
	$SearchInfos = (Get-UDElement -ID 'txtNom').value

	$data = @()

	if($SearchInfos)
	{

		$params = @{
			'LdapFilter' = "(|(samaccountname=*$SearchInfos*)(name=*$SearchInfos*))"
			'SearchScope' = $SearchScopeQualUsers
			'Properties' = @("EmployeeNumber", "Department")
			'DC' = $DC
		}

		$users = Invoke-RestMethod -Uri http://dam-u-inf-q-032:5000/ADUser?params=$($params | ConvertTo-Json)

		if($users)
		{
			foreach($user in $users)
			{

				$data += @{Nom=$user.Surname;Prenom=$user.Givenname;Badge=$user.EmployeeNumber;Affectation=$user.Department;Identifiant=$user.samAccountName}
			}

			$Columns = @(
				New-UDTableColumn -Property Nom -Title 'Nom'
				New-UDTableColumn -Property Prenom -Title 'Prenom'
				New-UDTableColumn -Property Badge -Title 'Badge'
				New-UDTableColumn -Property Affectation -Title 'Affectation'
				New-UDTableColumn -Property Identifiant -Title 'Identifiant'
			)

			New-UDTable -ID 'tableFoundUsers' -Data $data -Columns $Columns -PageSize 10 -ShowPagination -ShowSelection -OnRowSelection {
				$Session:UserID = $EventData.Identifiant
			}

		} else {
			New-UDTypography -Text 'Aucun résultat' -Variant 'body1'
		}
	}                    


} -LoadingComponent {
if($session:display) {
	New-UDElement -Tag 'div' -Attributes @{"className"="resultsearchuser"} -Content {
		New-UDElement -Tag 'div' -Attributes @{"className"="progressbar"} -Content {
			New-UDProgress -Circular
		}
		New-UDElement -Tag 'div' -Attributes @{"className"="progresstext"} -Content {
			New-UDTypography -Text 'Recherche en cours' -Variant 'body1'
		}
	}
}
}
4

The problem is that LoadingComponent is static and doesn’t call the server again when you sync that element.

You could accomplish this with 2 dynamics.

$session:display = $false

New-UDTextbox -Id 'txtNom' -Value $SearchInfos -type text -icon (New-UDIcon -Icon 'search')            

New-UDButton -Id 'butRecherche' -Text 'Recherche' -OnClick {
	$session:display = $true
	Sync-UDElement -Id 'dyListeUtilisateurs'
	Sync-UDElement -Id 'loading'
}                

New-UDDynamic -Id 'dyListeUtilisateurs' -Content {
	
	$SearchInfos = (Get-UDElement -ID 'txtNom').value

	$data = @()

	if($SearchInfos)
	{

		$params = @{
			'LdapFilter' = "(|(samaccountname=*$SearchInfos*)(name=*$SearchInfos*))"
			'SearchScope' = $SearchScopeQualUsers
			'Properties' = @("EmployeeNumber", "Department")
			'DC' = $DC
		}

		$users = Invoke-RestMethod -Uri http://dam-u-inf-q-032:5000/ADUser?params=$($params | ConvertTo-Json)

		if($users)
		{
			foreach($user in $users)
			{

				$data += @{Nom=$user.Surname;Prenom=$user.Givenname;Badge=$user.EmployeeNumber;Affectation=$user.Department;Identifiant=$user.samAccountName}
			}

			$Columns = @(
				New-UDTableColumn -Property Nom -Title 'Nom'
				New-UDTableColumn -Property Prenom -Title 'Prenom'
				New-UDTableColumn -Property Badge -Title 'Badge'
				New-UDTableColumn -Property Affectation -Title 'Affectation'
				New-UDTableColumn -Property Identifiant -Title 'Identifiant'
			)

			New-UDTable -ID 'tableFoundUsers' -Data $data -Columns $Columns -PageSize 10 -ShowPagination -ShowSelection -OnRowSelection {
				$Session:UserID = $EventData.Identifiant
			}

		} else {
			New-UDTypography -Text 'Aucun résultat' -Variant 'body1'
		}
	}                    

	$session:display = $false
	Sync-UDElement -Id 'loading'
} -LoadingComponent { New-UDElement -Tag div }

New-UDDynamic -Id 'loading' {
if($session:display) {
	New-UDElement -Tag 'div' -Attributes @{"className"="resultsearchuser"} -Content {
		New-UDElement -Tag 'div' -Attributes @{"className"="progressbar"} -Content {
			New-UDProgress -Circular
		}
		New-UDElement -Tag 'div' -Attributes @{"className"="progresstext"} -Content {
			New-UDTypography -Text 'Recherche en cours' -Variant 'body1'
		}
	}
}
}
5

Thank you, good idea. :wink: