CommandBar controle (preview)

Artikel
03/21/2023

Een besturingselement dat wordt gebruikt om opdrachten in te voeren.

Notitie

Volledige documentatie en broncode vindt u in de GitHub-opslagplaats voor codeonderdelen.

Besturingselement CommandBar.

Omschrijving

CommandBar is een oppervlak dat opdrachten bevat die worden uitgevoerd op de inhoud van het venster, paneel of bovenliggend-gebied waar het zich boven bevindt.

Dit codeonderdeel biedt een wrapper rond het besturingselement Fluent UI CommandBar voor gebruik in canvas-apps en aangepaste pagina's.

Eigenschappen

Belangrijke eigenschappen

Eigenschappen	Omschrijving
`Items`	De actie-items die moeten worden weergegeven

Itemstructuur

Elk item gebruikt het onderstaande schema om gegevens in het onderdeel te visualiseren.

Name	Omschrijving
`ItemDisplayName`	De weergavenaam van het opdrachtbalkitem.
`ItemKey`	De toets die moet worden gebruikt om aan te geven welk item is geselecteerd en bij het toevoegen van subitems. De toetsen moeten uniek zijn.
`ItemEnabled`	Stel in op false als de optie is uitgeschakeld.
`ItemVisible`	Stel in op false als de optie niet zichtbaar is.
`ItemChecked`	Stel in op true als de optie is ingeschakeld (bijvoorbeeld splitsknoppen op een opdrachtbalk).
`ItemSplit`	Stel in op true als op de optie kan worden geklikt en kan worden gebruikt als vervolgkeuzemenu.
`ItemIconName`	Het Fluent UI-pictogram dat moet worden gebruikt (zie Fluent UI-pictogrammen)
`ItemIconColor`	De kleur waarin het pictogram moet worden weergegeven (bijvoorbeeld met naam, RGB- of hexwaarde).
`ItemIconOnly`	Laat het tekstlabel niet zien - alleen het pictogram.
`ItemOverflow`	Stel in op true voor overloopgedrag
`ItemOverflow`	Geef de optie weer in de overloopitems.
`ItemFarItem`	Geef de optie weer in de groep verre items van een opdrachtbalk.
`ItemHeader`	Geef het item als een sectiekop weer. Als er items zijn waarvan `ItemParentKey` is ingesteld op de sleutel van dit item, worden ze toegevoegd als semantisch gegroepeerde items onder deze sectie.
`ItemTopDivider`	Geef een scheidingslijn boven aan de sectie weer.
`ItemDivider`	Geef het item weer als een sectiescheiding - of als het item een koptekst is (ItemHeader = true), bepaal dan of een scheidingslijn onder aan de sectie moet worden weergegeven.
`ItemParentKey`	Geef de optie weer als onderliggend item van een andere optie.

Notitie

ItemIconColor overschrijft de themawaarde van het component en negeert andere statuskleuren (bijvoorbeeld uitgeschakeld).
ItemHeader en ItemDivider moet op true worden ingesteld om als een verdeler te worden weergegeven. Als dit is ingesteld op false, worden andere waarden verwacht en wordt deze leeg weergegeven.

Voorbeeld

Voorbeeld Power Fx-formule voor basis Items:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

Stijleigenschappen

Eigenschappen	Omschrijving
`Theme`	Accepteert een JSON-tekenreeks die is gegenereerd met Ontwerper van Fluent UI Theme (windows.net). Als u dit leeg laat, wordt het standaardthema gebruikt dat door Power Apps is gedefinieerd. Zie Themagebruik voor richtlijnen voor configureren.
`AccessibilityLabel`	Arialabel voor schermlezers

Eigenschappen van gebeurtenis

Eigenschappen	Omschrijving
`InputEvent`	Een gebeurtenis waarnaar het besturingselement moet worden verzonden Bijvoorbeeld `SetFocus`.

Gedrag

Ondersteunt SetFocus als een InputEvent.

"OnSelect"-gedrag configureren

Gebruik de formule Switch() in de eigenschap OnSelect van het onderdeel om specifieke acties voor elk item te configureren door te verwijzen naar de geselecteerde ItemKey van het besturingselement als de schakelwaarde.

Vervang de false-waarden met geschikte expressies in de Power Fx-taal.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", false,
  
    /* Default action */
        false
  )

Focus op het besturingselement instellen

Wanneer een nieuw dialoogvenster wordt weergegeven en de standaardfocus op het besturingselement moet liggen, is een expliciete ingestelde focus nodig.

Als u de input-gebeurtenis wilt aanroepen, kunt u een contextvariabele die aan de eigenschap Input Event is gebonden, instellen op een tekenreeks die begint met SetFocus en gevolgd door een willekeurig element om ervoor te zorgen dat de app het als een wijziging detecteert.

Voorbeeld van Power Fx-formule:

UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));

De contextvariabele ctxResizableTextareaEvent is dan gebonden aan de eigenschap InputEvent.

Beperkingen

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

Zie meer beperkingsopmerkingen in de ontwerpuitdagingen voor onderdelen.

Delen via