Regiones dinámicas

New-UDDynamic permite definir una región dinámica. Las páginas en sí son dinámicas por naturaleza. Esto significa que, cada vez que se carga una página, se ejecuta el PowerShell de esa página. A veces, puede que desee recargar una sección de una página en lugar de la página completa. Es entonces cuando querrá utilizar regiones dinámicas.

Región dinámica básica

Esta región dinámica se recarga cuando se hace clic en el botón.

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' }
}

Recargar al hacer clic en el botón

Lista de argumentos

Se puede pasar una matriz de argumentos a la región dinámica.

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') 

utilizando la lista de argumentos

Puede utilizar Sync-UDElement para cambiar los valores de los argumentos.

 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'
 }

Actualización automática

Las regiones dinámicas permiten actualizar automáticamente los componentes después de un cierto tiempo. El bloque de script de toda la región se ejecutará durante la actualización automática.

Si tiene varios componentes relacionados que utilizan los mismos datos, considere colocarlos en la misma región dinámica para mejorar el rendimiento.

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

Región dinámica con actualización automática

Componente de carga

A veces, actualizar un componente dinámico puede llevar cierto tiempo. Por ejemplo, si está consultando la API REST de otro servicio o datos. Las regiones dinámicas admiten la configuración del componente que se muestra mientras la región se recarga. De forma predeterminada, no se muestra nada. Puede ser cualquier componente de la aplicación.

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

Componente de carga para una región dinámica

API

New-UDDynamic

Véase también

• Devolutions Academy – User status/refresh user details