Delen via

Dialog controle (experimenteel)

  • Artikel

[Dit artikel maakt deel uit van de voorlopige documentatie en kan nog veranderen.]

Een besturingselement dat wordt gebruikt om inhoud te groeperen.

Besturingselement Dialog.

Belangrijk

  • Dit is een experimentele functie.
  • Experimentele functies zijn niet bedoeld voor productiegebruik en bieden mogelijk beperkte functionaliteit. Deze functies zijn beschikbaar voor een officiële release zodat klanten vroeg toegang kunnen krijgen en feedback kunnen geven.

Omschrijving

Een dialoogvenster (Dialog) is een tijdelijk pop-upvenster dat de focus van de pagina of app haalt en interactie met gebruikers vereist. Het wordt voornamelijk gebruikt voor het bevestigen van acties, zoals het verwijderen van een bestand of het vragen van gebruikers om een keuze te maken.

Dit canvasonderdeel bootst de stijl en het gedrag van het Fluent UI-besturingselement Dialog na. Zie documentatie voor best practices.

Bekijk het onderdeel in de Creator Kit GitHub-repository.

Eigenschappen

Belangrijke eigenschappen

Eigenschappen Omschrijving
Buttons Een gegevensset die de knoppen definieert (zie eigenschappen hieronder)
Title Tekst die wordt weergegeven in de titelsectie
OverlayColor Kleur die wordt weergegeven in het overlay-gebied
DialogWidth De breedte van het dialoogvenster (niet te verwarren met de breedte van het besturingselement, die de app-breedte moet omvatten)
DialogHeight De hoogte van het dialoogvenster (niet te verwarren met de hoogte van het besturingselement, die de app-hoogte moet omvatten).
SubTitle Tekst die wordt weergegeven onder de titel

Buttons eigenschappen

Eigenschappen Omschrijving
Label Het label dat wordt weergegeven op de knop.
ButtonType Opsomming die de stijl van de knop bepaalt. Kies tussen Standard en Primary. 
Table(
    {
        Label: "Cancel", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard 
    },{
        Label: "Ok", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary
    }
)

Stijleigenschappen

Eigenschappen Omschrijving
Theme Theme-object. Zie Themagebruik voor richtlijnen voor configureren.

Zie voor opmaak de richtlijnen in het gedeelte Inhoud van het deelvenster Opmaken van Paneel.

Eigenschappen van gebeurtenis

Eigenschappen Omschrijving
OnCloseSelect Actie-expressie die wordt uitgevoerd wanneer de knop Sluiten wordt geselecteerd.
OnButtonSelect Actie-expressie die wordt uitgevoerd wanneer een van de actieknoppen wordt geselecteerd.

Gedrag

Zichtbaarheid van dialoogvenster configureren

Maak het besturingselement Dialog zelf (of het oppervlak waarbinnen het zich bevindt) zichtbaar wanneer een variabele van het type booleaans (true/false) verandert in true, en wijs die variabele toe aan de zichtbaarheidseigenschap van het dialoogvenster. Nadat het dialoogvenster is weergegeven, kunt u het dialoogvenster verbergen door de variabele in de eigenschap reset bij te werken, die wordt geactiveerd wanneer het pictogram Sluiten wordt geselecteerd.

Hieronder ziet u de Power Fx-formule om het dialoogvenster te openen in een actieformule voor een ander onderdeel ergens in de app (bijvoorbeeld de eigenschap OnSelect van een knop):

UpdateContext({ showHideDialog: true })

Hieronder ziet u de Power Fx-formule om het dialoogvenster te sluiten in de eigenschap OnCloseSelect van het dialoogvenster:

UpdateContext({ showHideDialog: false })

Wijs de variabele toe aan de eigenschap Visible van het dialoogvenster:

showHideDialog

Knopacties configureren

Geef in de eigenschap OnButtonSelect van het dialoogvenster acties op in een voorwaarde If() of Switch() op basis van de tekstwaarde Self.SelectedButton.Label om de actie te definiëren. Afhankelijk van de actie kan het zinvol zijn om ook het dialoogvenster te sluiten nadat de actie is voltooid.

    If( Self.SelectedButton.Label = "Send", 
        Notify("Email Sent")
    );
    UpdateContext({ showHideDialog: false })

Beperkingen

Dit canvasonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.