Régions dynamiques

Les régions dynamiques vous permettent de contrôler le rechargement des données au sein de la région.

New-UDDynamic vous permet de définir une région dynamique. Les pages elles-mêmes sont dynamiques par nature. Cela signifie que chaque fois qu'une page est chargée, le code PowerShell de cette page est exécuté. Parfois, vous souhaitez recharger une section d'une page plutôt que la page entière. C'est dans ce cas que vous voudrez utiliser les régions dynamiques.

Région dynamique de base

Cette région dynamique se recharge lorsque le bouton est cliqué.

New-UDApp -Title "Hello, World!" -Content {
    New-UDDynamic -Id 'date' -Content {
        New-UDTypography -Text "$(Get-Date)"
    }

    New-UDButton -Text 'Reload Date' -OnClick { Sync-UDElement -Id 'date' }
}

Reload on button click

Liste d'arguments

Un tableau d'arguments peut être passé à la région dynamique.

New-UDDynamic -Id 'dynamic_01' -Content {
    New-UDTypography -Text "This is an $($ArgumentList[0]) an $($ArgumentList[1]) in a UDDynamic"
} -ArgumentList @('example of', 'arguments list') 

utilisation de la liste d'arguments

Vous pouvez utiliser Sync-UDElement pour modifier les valeurs des arguments.

 New-UDDynamic -id DynamicRegion -ArgumentList 5,'hello' -content {
  foreach($item in $argumentList){
      New-UDTypography -Variant h3 -Text "Item: $item"
  }
 }

 New-UDButton -Text "Sync Dynamic" -onclick {
  Sync-UDElement -id DynamicRegion -ArgumentList 10,'World'
 }

Actualisation automatique

Les régions dynamiques permettent d'actualiser automatiquement les composants après un certain délai. L'intégralité du bloc de script de la région sera exécutée lors de l'actualisation automatique.

Si vous avez plusieurs composants liés qui utilisent les mêmes données, envisagez de les regrouper dans la même région dynamique pour améliorer les performances.

    New-UDDynamic -Id 'date' -Content {
        New-UDTypography -Text "$(Get-Date)" -Variant h3
        New-UDTypography -Text "$(Get-Random)" -Variant h3
    } -AutoRefresh -AutoRefreshInterval 1

Auto refresh dynamic region

Composant de chargement

Le rechargement d'un composant dynamique peut parfois prendre du temps. Par exemple, si vous interrogez l'API REST d'un autre service ou des données. Les régions dynamiques permettent de configurer le composant affiché pendant le rechargement de la région. Par défaut, rien n'est affiché. Il peut s'agir de n'importe quel composant d'application.

    New-UDDynamic -Content {
        Start-Sleep -Seconds 3
        New-UDTypography -Text "Done!"
    } -LoadingComponent {
        New-UDProgress -Circular
    }

Loading component for dynamic region

API

New-UDDynamic