Een canvas-app bouwen

Power Apps is een platform met hoge productiviteit voor zakelijke apps. U kunt op maat gemaakte, tot op de pixel nauwkeurige apps maken met de kracht van een leeg canvas in Power Apps Studio. Wilt u de app met uw gebruikers delen, geef die dan weer in de browser of sluit hem in verschillende containers in, zoals Teams en SharePoint-sites.

De belangrijkste eindgebruikerservaringen voor de oplossingen voor SAP Procurement-sjabloon zijn gebouwd met behulp van canvas-apps en kunnen eenvoudig worden uitgebreid om uw lokale zakelijke vereisten te ondersteunen. Volg om aan de slag te gaan de patronen en best practices in dit artikel.

Best practices en normen volgen

Alle apps zijn ontwikkeld met behulp van gepubliceerde best practices en normen. We raden u aan dezelfde of vergelijkbare best practices en normen toe te passen wanneer u nieuwe apps uitbreidt of maakt.

Standard	Opmerkingen	Meer informatie
Functiestatus	Functies die standaard zijn in- of uitgeschakeld. Bevat een subset van preview-functies behalve experimentele functies.	Begrijp experimentele, preview en gepensioneerde functies in canvas-apps
Responsiviteit	Reageert op één type apparaat, zoals tablet of mobiel. Maakt het gebruik van de app bij verschillende standaard scherm- en containerformaten mogelijk, inclusief het insluiten van de apps in Microsoft Teams. Maakt uitgebreid gebruik van responsieve containerbesturingselementen voor automatische lay-out.	Responsieve canvas-apps bouwen
Naamgevings- en coderingsnormen	Besturingselementen, variabelen, verzamelingen en Dataverse-naamgevingsnormen worden gevolgd om detectie en onderhoud te vergemakkelijken.	Power Apps Canvas App-coderingsnormen en -richtlijnen
Toegankelijkheid	Eigenschappen die toegankelijkheid ondersteunen. Bijvoorbeeld Accessible Labels, Roles, Live, Focus Border Thickness, Color Contrast en Tab Orders. Deze eigenschappen vermijden bekende ontwerppatronen die geen toegankelijkheidsvereisten ondersteunen.	Maak toegankelijke canvas-apps en Toegankelijkheidsbeperkingen in canvas-apps
Prestaties	Aanbevolen procedures worden gevolgd om bekende prestatiebeperkingen te vermijden.	Tips en best practices om de prestaties van canvas-apps te verbeteren

Kleurenthema' voor globale apps

Alle apps volgen een aangepast thema en kunnen worden aangepast aan het geprefereerde kleurenschema van uw organisatie. Een globale variabele wordt ingesteld in de eigenschappen App.OnStart voor alle apps. Deze variabele wordt gebruikt door de meeste kleurgerelateerde eigenschappen in alle besturingselementen in de app. Het wijzigen van de globale kleurthemavariabele op één plaats heeft onmiddellijk effect in de hele app na uitvoering van de gebeurtenis App.OnStart.

Belangrijk

Hoewel het mogelijk is om verschillende eigenschappen van het kleurenpalet te wijzigen, bevelen we aan om alleen de primaire kleureigenschap in de globale themavariabele te wijzigen.

    Set(
        varThemeColors,
        {
            background: ColorValue("#FAF9F8"),
            backgroundFill: ColorValue("#FFFFFF"),
            backgroundFillDisabled: ColorValue("#F3F2F1"),
            text: ColorValue("#201F1E"),
            altText: ColorValue("#FFFFFF"),
            disabledText: ColorValue("#A19F9D"),
            primary: ColorValue("#0078D4"),
            secondary: ColorValue("#EFF6FC"),
            tertiary: ColorValue("#005A9E"),
            primaryGray: ColorValue("#8A8886"),
            secondaryGray: ColorValue ("#C8C6C4"),
            tertiaryGray: ColorValue("#605E5C"),
            requiredRed: ColorValue("#A80000"),
            lookupBlue: ColorValue("#0078D4")
        }
    )

Uw bedrijfslogo toevoegen

Voeg uw bedrijfslogo toe aan de apps door eerst het afbeeldingsbestand voor uw bedrijfslogo naar de app te uploaden en vervolgens toe te voegen aan het onderdeel ScreenHeader.

Meer informatie: Multimediabestanden gebruiken in canvas-apps

Lokalisatie en ondersteuning voor globale apps

Alle canvas-apps bieden standaard ondersteuning voor de Engelse taal. Alle apps zijn echter zodanig ontworpen dat zij klaar voor lokalisatie zijn en kunnen worden beheerd om meer talen te ondersteunen. Eigenschappen voor de breedte van besturingselementen moeten mogelijk rechtstreeks worden gewijzigd, afhankelijk van de talen die zijn gekozen om te implementeren.

Patroon voor lokalisatie van tekenreeksen

1. Op de eigenschap OnVisible van het eerste scherm tijdens het starten van de app, leest de app de taalinstelling van de browser van de gebruiker en bepaalt het de bijbehorende waarde voor de ISO-taalcode.

      Set(
        varISOUserLanguageCode,
        Switch(
            Left(
                Language(),
                2
            ),
            "ar",
            'ISO Language Code'.ar,
            "de",
            'ISO Language Code'.de,
            "en",
            'ISO Language Code'.en,
            "es",
            'ISO Language Code'.es,
            "fr",
            'ISO Language Code'.fr,
            "he",
            'ISO Language Code'.he,
            "it",
            'ISO Language Code'.it,
            "ja",
            'ISO Language Code'.ja,
            "pt",
            'ISO Language Code'.pt,
            "zh",
            'ISO Language Code'.zh,
            'ISO Language Code'.en
        )
    )

Notitie

Eigenschappen voor labels en invoerbesturingselementen proberen te anticiperen op de breedte van de gelokaliseerde tekstwaarde, maar zijn misschien niet altijd succesvol gezien de complexiteit van die berekening. We raden daarom aan om de apps altijd te testen en kleine wijzigingen aan te brengen zodra gelokaliseerde tekenreeksen en wijzigingen zijn aangebracht.

Tip

Extra talen kunnen worden toegevoegd en ondersteund door meer waarden toe te voegen aan het keuzeonderdeel ISO-taalcode in de SAP Base-oplossing.

De app vraagt de Dataverse-entiteit SAP-lokalisatie naar tekenreeksen die zijn gelokaliseerd in taal waarin de gebruiker is aangemeld en slaat deze lokaal op in een verzameling.

        ClearCollect(
            colUserLocalizedStrings,
            Filter(
                'SAP Localizations',
                Language = varISOUserLanguageCode,
                'SAP Localizations (Views)'.'Active SAP Localizations'
            )
        )

Alle tekstgerelateerde eigenschappen binnen verschillende besturingselementen zoals Text, HintText, Accessible Label, InputTextPlaceholder, NoSelectionText en ToolTips hebben formules die eerst zoeken naar een equivalente gelokaliseerde tekenreeks. Als het equivalent niet wordt gevonden, wordt standaard Engels gebruikt, dat is ingesteld in de eigenschap Text binnen het blok With.

  With(
      {Text: "Vendor name"},
      If(
          IsBlank(
              LookUp(
                  colUserLocalizedStrings,
                  'English Value' = Text
              ).'Localized Value'
          ),
          Text,
          LookUp(
              colUserLocalizedStrings,
              'English Value' = Text
          ).'Localized Value'
      )
  )

Voor besturingselementen keuzelijst met invoervak die waarden uit de tabel SAP-lijst met waarden filteren, wordt de toegewezen ISO-taalcode van de gebruiker in de eigen browserinstelling altijd toegepast op de filtercriteria, met Engels als standaard als er geen lijst met waarden wordt beheerd voor zijn of haar taal.

Sort(
    Filter(
        'SAP List of Values',
        Status = 'Status (SAP List of Values)'.Active,
        Domain = 'Domain (SAP List of Values)'.Country,
        Language = varISOUserLanguageCode
    ),
    'Display Value'
)

Landinstellingen voor browser

Alle getal-, datum- en tijdvelden in de canvas-apps houden standaard rekening met de landinstellingen van de browser van de gebruiker. Een datum die bijvoorbeeld wordt weergegeven als 3/23/2023 voor een gebruiker die de Verenigde Staten als lokale instellingen gebruikt, wordt weergegeven als 23.03.2023 voor een gebruiker die de landinstelling Duitsland gebruikt.

Meer informatie: Wereldwijde ondersteuning inbouwen in canvas-apps

Onderdeel

Onderdelen zijn een geweldige manier om het ontwikkel- en onderhoudsproces van apps te vereenvoudigen en de prestaties te helpen verbeteren.

Voor gebieden waar behoefte is aan een gemeenschappelijke gebruikerservaring, intern of tussen apps, worden onderdelen geconfigureerd. Gezien de beperkingen van onderdeelbibliotheken om zaken als toegang tot app-bereik en ingesloten cloudstromen te ondersteunen, kunnen lokale onderdelen in alle apps worden gebruikt en vervolgens in andere apps worden geïmporteerd.

Het onderdeel VendorSearch wordt bijvoorbeeld gebruikt in alle apps die processen van inkopen tot betalen (procure-to-pay) ondersteunen en is voornamelijk gebouwd binnen de SAP Vendor Management-app en geïmporteerd om te worden gebruikt binnen de andere procure-to-pay-apps.

Waarschuwing

Een negatief gevolg van het gebruik van lokale app-onderdelen versus onderdeelbibliotheken is dat als er een wijziging wordt vastgesteld, die wijzigingen moeten worden aangebracht in alle apps die dit onderdeel al hebben geïmporteerd.

Gemeenschappelijke onderdelen die in de apps worden gebruikt:

Onderdeel	Omschrijving
ScreenHeader	Gemeenschappelijke kop op elk scherm
LeftNavigation	Hoofdnavigatie die snelle toegang tot andere apps mogelijk maakt, aangedreven door de bron Menu-item Dataverse
CommandBar	Lijst met algemene besturingselementen voor het maken, wijzigen, opslaan, annuleren, zoeken, recent zoeken of geavanceerd zoeken van objecten
ScreenTabs	Groepen logische onderdelen die samen in tabbladen zijn gerangschikt om de navigatie te vergemakkelijken
NoItemsDisplay	Items worden weergegeven in rasters wanneer er geen records aanwezig zijn
ObjectNameSearch	Veelvoorkomende onderdelen voor het zoeken van SAP-objecten zijn opgenomen in de juiste app waar gebruikt en kunnen indien nodig in andere apps worden geïmporteerd. Voorbeelden zijn onder meer VendorSearch, GLAccountSearch, MaterialSearch en RequisitionSearch

Meer informatie: Overzicht van canvasonderdelen

Aanvullende SAP-velden

Elke SAP-implementatie is anders en van u wordt volledig verwacht om uw eigen velden toe te voegen die uw bedrijfsprocessen ondersteunen. Er zijn dus voldoende schermruimte en ontwerpoverwegingen geïmplementeerd, zodat u eenvoudig de velden kunt toevoegen die u nodig hebt.

Gemeenschappelijke besturingscontainers

De meeste besturingselementen bevinden zich in een container die bestaat uit zowel een label- als een invoerbesturingselement. Het veld om de naam van de leverancier in de SAPVendor Management-app vast te leggen, bestaat bijvoorbeeld uit een besturingselement Label en Text Input, zoals te zien is in de schermopname die volgt. Als u een nieuw veld wilt toevoegen, kopieert u een bestaand containerbesturingselement en plakt u het in het juiste responsieve onderdeel, waarbij u de namen, tekst en uiteindelijk toegewezen velden bijwerkt.

Notitie

Er zijn vergelijkbare containers voor andere typen invoerbesturingselementen zoals Comboboxes, Date Pickers en Buttons.

Responsieve containers

De apps zijn ontworpen om te reageren op het type tablet/desktopapparaat met behulp van verticale en horizontale containerbesturingselementen, zoals te zien is in de onderstaande schermopname. Deze containers zijn geconfigureerd om startpunten te hebben voor eigenschappen zoals height, width, LayoutMinHeight, LayoutMinWidth en Wrap. Als u meer velden aan deze containers toevoegt, moet u ervoor zorgen dat deze eigenschappen ook worden bijgewerkt om de responsiviteit op de juiste manier te blijven verwerken.

Meer informatie: Containers met automatische indeling

Verbinding maken met andere gegevens

De kracht van canvas-apps is dat ze gemakkelijk veilig verbinding kunnen maken met een van de honderden andere systemen en toepassingen via hun eigen connectorbibliotheek.

Als uw SAP Procurement-inkooporderproces bijvoorbeeld gegevens nodig heeft van upstream presales-verkoopkansen die in een CRM aanwezig zijn om het proces te voltooien, kunt u de Salesforce- of Dataverse-connectoren gebruiken om te integreren met Dynamics 365, zodat u die gegevens eenvoudig met één druk op de knop kunt toevoegen aan de SAP Purchase Order-app.

Bovendien kunt u, als u een intern bedrijfseigen systeem of een systeem zonder native connector hebt, met uw IT-team samenwerken om een ​​aangepaste connector te maken waarmee Power Apps op eenvoudige wijze met dat systeem kan communiceren via een ondersteunde API.

Meer informatie:

• Lijst met connectoren
• Overzicht van aangepaste connectoren

Foutafhandeling in apps

Alle ingesloten stroomaanroepen evalueren een responsstatusveld dat standaard door de stromen wordt teruggestuurd en handelen dit af door een bericht te verzenden via de functie Notify. Zie Foutafhandeling voor meer informatie.

If(
    !IsBlank(FirstError.Message),
    Patch(
        'SAP Integration Errors',
        Defaults('SAP Integration Errors'),
        {
            Action: FirstError.Source,
            'Additional Information': App.ActiveScreen.Name,
            'Error Message': FirstError.Message,
            Name: "SAP Vendor Management",
            'Source Type': 'Source Type (SAP Integration Errors)'.'Power App',
            'Workflow Status': 'Workflow Status (SAP Integration Errors)'.Failed
        }
    );
Trace(FirstError.Message);
Error(FirstError);  
)

Alle onverwachte uitzonderingen die door de app worden gegenereerd, worden afgehandeld in de eigenschap App.OnError waar een record SAP-oplossingssjabloonfout wordt gemaakt voordat de fout opnieuw wordt gegenereerd en getraceerd. Beheerders kunnen de foutdetails bekijken en triggers instellen om te worden gewaarschuwd voor onverwerkte app-uitzonderingen, zoals te zien is in het document Fouten controleren.

Meer informatie: Eigenschap OnError

Gerelateerde inhoud

• Wat zijn canvas-apps?
• Begrijpen Power Apps Studio
• Maak een canvas-app vanuit een oplossing
• Herbruikbare gebruikersinterface bouwen met componentenframework en canvas-appcomponenten Power Apps
• Microsoft Power Platform beheren
• Canvas-apps voor bedrijfsontwikkelaars, partners en ISV's

Volgende stappen

Breid modelgestuurde apps uit en Dataverse

Zie ook

Ga aan de slag met de sap Procurement-sjabloon