Modulo

https://youtu.be/o8Bl1NsCc2Yyoutu.be

I moduli offrono un modo per raccogliere dati dagli utenti.

I moduli possono includere qualsiasi tipo di controllo desideri. Questo le consente di personalizzare l'aspetto e utilizzare qualsiasi controllo di input.

I dati inseriti tramite i controlli di input verranno inviati al blocco di script OnSubmit quando il modulo viene inviato. All'interno del gestore di eventi OnSubmit, avrà accesso alla variabile $EventData che conterrà proprietà per ciascuno dei campi del modulo.

Ad esempio, se ha due campi, avrà due proprietà su $EventData.

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

Controlli supportati

I seguenti controlli di input si integrano automaticamente con un modulo. I valori impostati all'interno di questi controlli verranno inviati durante la convalida e nel gestore di eventi OnSubmit.

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

Modulo semplice

I moduli semplici possono utilizzare input come caselle di testo e caselle di controllo.

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

Formattazione di un modulo

Poiché i moduli possono utilizzare qualsiasi componente, può utilizzare i componenti di formattazione standard all'interno del modulo.

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
}

Restituzione di componenti

Quando un modulo viene inviato, può facoltativamente restituire un altro componente per sostituire il modulo nella pagina. Può restituire qualsiasi componente di Universal Dashboard. Tutto ciò che deve fare è assicurarsi che il componente venga scritto nella pipeline all'interno del gestore di eventi OnSubmit.

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

Convalida di un modulo

La convalida del modulo può essere realizzata utilizzando il parametro del blocco di 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
}

Annullamento di un modulo

Può definire un gestore di eventi -OnCancel da invocare quando viene premuto il pulsante di annullamento. Questo può essere utilizzato per eseguire azioni come chiudere una finestra modale.

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

Visualizzare l'output senza sostituire il modulo

Sebbene sia possibile restituire componenti direttamente da un modulo, potrebbe voler mantenere il modulo in modo che gli utenti possano inserire nuovamente i dati. Per farlo, può utilizzare Set-UDElement e un elemento segnaposto di cui può impostare il contenuto.

In questo esempio, abbiamo un modulo vuoto che, quando inviato, aggiornerà l'elemento results con una UDCard.

New-UDForm -Content {

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

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

Moduli basati su schema

Invece di definire tutto il layout e la logica dei moduli utilizzando i cmdlet, può anche definire un modulo basato su una hashtable di schema. Questa versione dei moduli è basata su react-jsonschema-form.

Campi

Definisce campi che accettano tipi string, number, integer, enum e boolean. Questo cambia il tipo di input mostrato.

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

Proprietà obbligatorie

Può utilizzare la proprietà required per impostare un elenco di proprietà obbligatorie.

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

Noti che le proprietà devono essere in minuscolo! Ad esempio, deve assicurarsi che le chiavi nella sua hashtable di proprietà siano in minuscolo e che anche l'elenco delle proprietà obbligatorie sia in minuscolo.

Ordinamento

Può utilizzare la proprietà schemaUI per modificare l'ordinamento dei campi.

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
	}

Array

Può creare moduli che accettano da 0 a molti oggetti. L'utente potrà aggiungere e rimuovere oggetti dal modulo.

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
}

Moduli da script

Può generare automaticamente moduli basati sugli script nel suo ambiente PowerShell Universal. I moduli da script genereranno componenti di input basati sul blocco param. I moduli da script supportano automaticamente l'avanzamento e il feedback.

I moduli da script supportano anche la visualizzazione dell'output come testo o tabella.

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

API

• New-UDForm
• New-UDFormValidationResult