Formulario

https://youtu.be/o8Bl1NsCc2Yyoutu.be

Los formularios proporcionan una forma de recopilar datos de los usuarios.

Los formularios pueden incluir cualquier tipo de control que desee. Esto le permite personalizar el aspecto y utilizar cualquier control de entrada.

Los datos introducidos mediante los controles de entrada se enviarán de vuelta al bloque de script OnSubmit cuando se envíe el formulario. Dentro del controlador de eventos OnSubmit, tendrá acceso a la variable $EventData, que contendrá propiedades para cada uno de los campos del formulario.

Por ejemplo, si tiene dos campos, tendrá dos propiedades en $EventData.

New-UDForm -Content {
    New-UDTextbox -Id 'txtTextField'
    New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
    Show-UDToast -Message $EventData.txtTextField
    Show-UDToast -Message $EventData.chkCheckbox
}

Controles compatibles

Los siguientes controles de entrada se integran automáticamente con un formulario. Los valores establecidos en estos controles se enviarán durante la validación y en el controlador de eventos OnSubmit.

• Autocomplete
• Checkbox
• Date Picker
• Radio
• Select
• Slider
• Switch
• Textbox
• Time Picker
• Transfer List
• Upload

Formulario simple

Los formularios simples pueden usar entradas como cuadros de texto y casillas de verificación.

New-UDForm -Content {
    New-UDTextbox -Id 'txtTextfield'
    New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
    Show-UDToast -Message $EventData.txtTextfield
    Show-UDToast -Message $EventData.chkCheckbox
}

Dar formato a un formulario

Dado que los formularios pueden utilizar cualquier componente, puede usar componentes de formato estándar dentro del formulario.

New-UDForm -Content {

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
            New-UDTextbox -Id 'txtFirstName' -Label 'First Name' 
        }
        New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
            New-UDTextbox -Id 'txtLastName' -Label 'Last Name'
        }
    }

    New-UDTextbox -Id 'txtAddress' -Label 'Address'

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
            New-UDTextbox -Id 'txtState' -Label 'State'
        }
        New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
            New-UDTextbox -Id 'txtZipCode' -Label 'ZIP Code'
        }
    }

} -OnSubmit {
    Show-UDToast -Message $EventData.txtFirstName
    Show-UDToast -Message $EventData.txtLastName
}

Devolver componentes

Cuando se envía un formulario, puede devolver opcionalmente otro componente para reemplazar el formulario en la página. Puede devolver cualquier componente de Universal Dashboard. Todo lo que necesita hacer es asegurarse de que el componente se escriba en la canalización dentro del controlador de eventos OnSubmit.

New-UDForm -Content {
    New-UDTextbox -Id 'txtTextfield'
} -OnSubmit {
    New-UDTypography -Text $EventData.txtTextfield
}

Validar un formulario

La validación de formularios se puede lograr utilizando el parámetro de bloque de script OnValidate.

New-UDForm -Content {
    New-UDTextbox -Id 'txtValidateForm'
} -OnValidate {
    $FormContent = $EventData

    if ($FormContent.txtValidateForm -eq $null -or $FormContent.txtValidateForm -eq '') {
        New-UDFormValidationResult -ValidationError "txtValidateForm is required"
    } else {
        New-UDFormValidationResult -Valid
    }
} -OnSubmit {
    Show-UDToast -Message $Body
}

Cancelar un formulario

Puede definir un controlador de eventos -OnCancel para invocarlo cuando se pulse el botón de cancelar. Esto puede utilizarse para realizar acciones como cerrar un modal.

New-UDButton -Text 'On Form' -OnClick {
    Show-UDModal -Content {
        New-UDForm -Content {
            New-UDTextbox -Label 'Hello'
        } -OnSubmit {
            Show-UDToast -Message 'Submitted!'
            Hide-UDModal
        } -OnCancel {
            Hide-UDModal
        }
    }
}

Mostrar la salida sin reemplazar el formulario

Aunque puede devolver componentes directamente desde un formulario, es posible que desee conservar el formulario para que los usuarios puedan introducir datos de nuevo. Para ello, puede usar Set-UDElement y un elemento de marcador de posición al que pueda establecer el contenido.

En este ejemplo, tenemos un formulario vacío que, al enviarse, actualizará el elemento results con un UDCard.

New-UDForm -Content {

} -OnSubmit {
   Set-UDElement -Id 'results' -Content {
      New-UDCard -Content { "Hello " + (Get-Date) }
   }
}

New-UDElement -Id 'results' -Tag 'div'

Formularios de esquema

En lugar de definir todo el diseño y la lógica de los formularios mediante cmdlets, también puede definir un formulario basado en una tabla hash de esquema. Esta versión de formularios se basa en react-jsonschema-form.

Campos

Puede definir campos que acepten tipos string, number, integer, enum y boolean. Esto cambia el tipo de entrada que se muestra.

New-UDForm -Schema @{
   title = "Test Form"
   type = "object"
   properties = @{
       name = @{
           type = "string"
       }
       age = @{
           type = "number"
       }
   }
} -OnSubmit {
   # $EventData.name
   # $EventData.age
}

Propiedades obligatorias

Puede usar la propiedad required para establecer una lista de propiedades obligatorias.

New-UDForm -Schema @{
   title = "Test Form"
   type = "object"
   properties = @{
       name = @{
           type = "string"
       }
       age = @{
           type = "number"
       }
   }
   required = @('name')
} -OnSubmit {
   # $EventData.name
   # $EventData.age
}

Tenga en cuenta que las propiedades deben estar en minúsculas. Por ejemplo, debe asegurarse de que las claves de su tabla hash de propiedades estén en minúsculas y que la lista de propiedades obligatorias también esté en minúsculas.

Ordenación

Puede usar la propiedad schemaUI para modificar la ordenación de los campos.

New-UDForm -Schema @{
        title = "Test"
        type = "object"
        properties = @{
            hostname = @{
                title = "Hostname"
                type = "string"
                }
            ipaddress= @{
                title = "IP Address"
                type = "string"
                format = "ipv4"
                }
            description = @{
                title = "Server Description"
                type = "string"
                }
            servertype = @{
                title = "Server Type"
                type = "string"                            
                enum = "App","DB"
                }
            environment = @{
                title = "Environment"
                type = "string"
                enum = "Prod", "Dev" , "QA"
                }
            }
		required = @('hostname','ipaddress','description','servertype','environment')                    
	} -uiSchema @{
		"ui:order" = @('environment','hostname','ipaddress','description')
	} -OnSubmit {
		Show-UDModal -Content {                        
			New-UDTypography -Text $EventData
		} -Footer {
			New-UDButton -Text "Close" -OnClick {Hide-UDModal}
		} -Persistent
	}

Matrices

Puede crear formularios que acepten de 0 a muchos objetos. El usuario podrá añadir y eliminar objetos del formulario.

New-UDForm -Schema @{
   title = "Test Form"
   type = "array"
   items = @{
      type = "object" 
       properties = @{
           name = @{
               type = "string"
           }
           age = @{
               type = "number"
           }
       }
   }
} -OnSubmit {
   # $EventData[0].name
   # $EventData[0].age
}

Formularios de script

Puede generar formularios automáticamente basados en scripts de su entorno de PowerShell Universal. Los formularios de script generarán componentes de entrada basados en el bloque param. Los formularios de script admiten automáticamente el progreso y la retroalimentación.

Los formularios de script también admiten mostrar la salida como texto o como tabla.

New-UDForm -Script "Script.ps1" -OutputType 'text'

API

• New-UDForm
• New-UDFormValidationResult