Creare un'app canvas

Power Apps è una piattaforma ad alta produttività per le app aziendali. Puoi creare app personalizzate e perfette a livello di pixel con la potenza di un canvas vuoto in Power Apps Studio. Per condividere con i tuoi utenti, esegui il rendering dell'app nel browser o incorporala in vari contenitori come i siti di Teams e SharePoint.

Le esperienze principali dell'utente finale per le soluzioni del modello Approvvigionamento SAP sono create utilizzando app canvas e possono essere facilmente estese per soddisfare i requisiti aziendali locali. Per iniziare, segui gli schemi e le procedure consigliate in questo articolo.

Seguire le procedure consigliate e gli standard

Tutte le app vengono sviluppate utilizzando procedure consigliate e standard pubblicati. Ti consigliamo di adottare standard e procedure consigliate identiche o simili quando estendi o crei nuove app.

Standard	Commenti	Altre informazioni
Stato funzionalità	Funzionalità attivate o disattivate per impostazione predefinita. Include un sottoinsieme di funzionalità di anteprima ad eccezione delle funzionalità sperimentali.	Comprendere le funzionalità sperimentali, di anteprima e ritirate nelle app canvas
Reattività	Reattiva a un singolo tipo di dispositivo come tablet o dispositivo mobile. Consente all'app di adattarsi a varie dimensioni standard di schermate e contenitori, incluso l'incorporamento delle app in Microsoft Teams. Utilizza ampiamente controlli di contenitore reattivi con layout automatico.	Creazione di app canvas reattive
Standard di denominazione e codifica	Controlli, variabili, raccolte e standard di denominazione di Dataverse sono utilizzati per facilitare il rilevamento e la manutenzione.	Standard e linee guida per la codifica di app canvas Power Apps
Accessibilità	Proprietà che supportano l'accessibilità. Ad esempio, Etichette accessibili, Ruoli, Live, Spessore del bordo in stato attivo, Contrasto dei colori e Ordine di tabulazione. Queste proprietà evitano schemi progettuali noti che non supportano i requisiti di accessibilità.	Crea app canvas accessibili e Limitazioni di accessibilità in app canvas
Prestazioni	Vengono seguite le procedure consigliate per evitare le limitazioni delle prestazioni note.	Suggerimenti e procedure consigliate per migliorare le prestazioni delle app canvas

Temi di colore delle app globali

Tutte le app seguono un tema personalizzato e possono essere modificate in base alla combinazione di colori preferita dell'organizzazione. Una variabile globale è impostata nelle proprietà App.OnStart in tutte le app. Questa variabile viene utilizzata dalla maggior parte delle proprietà relative al colore in tutti i controlli nell'app. La modifica della variabile del tema globale del colore avrà un effetto immediato su tutta l'app dopo l'esecuzione dell'evento App.OnStart.

Importante

Sebbene sia possibile modificare diverse proprietà della tavolozza dei colori, consigliamo di modificare solo la proprietà del colore primario nella variabile del tema globale.

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

Aggiungere il logo aziendale

Aggiungi il logo aziendale alle app caricando prima il file dell'immagine del logo aziendale nell'app e quindi aggiungendolo al componente ScreenHeader.

Maggiori informazioni: Utilizzo di file multimediali in app canvas

Supporto per la localizzazione e le app globali

Tutte le app canvas supportano la lingua inglese per impostazione predefinita. Tuttavia, tutte le app sono progettate per essere pronte per la localizzazione e possono essere gestite per supportare più lingue. È possibile che sia necessario modificare direttamente le proprietà di larghezza dei controlli in funzione delle lingue scelte per la distribuzione.

Schema di localizzazione delle stringhe

1. Nella proprietà OnVisible della prima schermata, durante l'avvio dell'app, l'app legge l'impostazione della lingua del browser dell'utente e determina il valore Codice lingua ISO corrispondente.

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

Nota

Le proprietà del controllo di etichetta e input tentano di anticipare la larghezza del valore del testo localizzato, ma potrebbero non riuscire a eseguire tale operazione per la complessità di tale calcolo. Pertanto, consigliamo di testare sempre e di apportare modifiche minori alle app dopo la localizzazione delle stringhe e l'esecuzione delle modifiche.

Suggerimento

Ulteriori lingue possono essere aggiunte e supportate aggiungendo più valori al componente Codice lingua ISO contenuto nella soluzione Base SAP.

L'app interroga l'entità Localizzazione SAP di Dataverse per le stringhe che sono state localizzate secondo la lingua dell'utente e le memorizza nella cache localmente in una raccolta.

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

Tutte le proprietà correlate al testo all'interno di vari controlli come Text, HintText, Accessible Label, InputTextPlaceholder, NoSelectionText e ToolTips hanno formule che dapprima cercano una stringa localizzata equivalente. Se le formule non trovano l'equivalente, utilizzano il valore predefinito Inglese, impostato nella proprietà Text nel blocco With.

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

Per i controlli casella combinata che filtrano i valori nella tabella Elenco di valori SAP, il Codice lingua ISO mappato dell'utente nell'impostazione del suo browser, viene sempre applicato ai criteri di filtro, visualizzando per impostazione predefinita l'inglese se nessun elenco di valori è amministrato per la sua lingua.

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

Impostazioni locali del browser

Per impostazione predefinita, tutti i campi numerici e di data e ora nelle app canvas utilizzano le impostazioni locali del browser dell'utente. Ad esempio, una data visualizzata come 03/23/2023 per un utente che utilizza Stati Uniti come impostazioni locali verrà visualizzata come 23.03.2023 per un utente che utilizza le impostazioni locali Germania.

Ulteriori informazioni: Integrare il supporto globale nelle app canvas

Componenti

I componenti sono un ottimo modo per semplificare il processo di sviluppo e manutenzione delle app e contribuiscono a migliorare le prestazioni.

Per le aree in cui è necessaria un'esperienza utente comune internamente o tra le app, i componenti vengono configurati. Date le limitazioni sulle librerie di componenti per supportare cose come l'accesso all'ambito dell'app e a flussi cloud incorporati, i componenti locali possono essere utilizzati in tutte le app che possono quindi essere importate in altre app.

Ad esempio, il componente VendorSearch viene utilizzato in tutte le app che supportano i processi dall'approvvigionamento al pagamento ed è stato creato principalmente nell'app Gestione fornitori SAP e importato per essere utilizzato nelle altre app per processi dall'approvvigionamento al pagamento.

Avviso

Una conseguenza negativa dell'utilizzo di componenti di app locali rispetto a librerie di componenti è che se viene determinata una modifica, questa deve essere apportata a tutte le app che hanno già importato tale componente.

Componenti comuni utilizzati in tutte le app:

Componente	Descrizione
ScreenHeader	Intestazione comune in ogni schermata
LeftNavigation	Navigazione principale che consente l'accesso rapido ad altre app pilotate dall'origine voce di menu Dataverse
CommandBar	Elenco di controlli comuni per gli oggetti create, change, save, cancel, search, recent search o advance search
ScreenTabs	Gruppi di componenti logici disposti insieme in schede per una facile navigazione
NoItemsDisplay	Gli elementi sono visualizzati in griglie quando non sono presenti record
ObjectNameSearch	I componenti di ricerca di oggetti SAP comuni sono inclusi nell'app appropriata dove vengono utilizzati e possono essere importati in altre app se necessario. Gli esempi includono VendorSearch, GLAccountSearch, MaterialSearch e RequisitionSearch

Ulteriori informazioni: Panoramica dei componenti canvas

Campi SAP aggiuntivi

Ogni implementazione SAP è diversa e puoi aggiungere i campi che supportano i tuoi processi aziendali. Pertanto, sono stati implementati ampi spazi nelle schermate e considerazioni di progettazione per consentirti di aggiungere facilmente i campi necessari.

Contenitori di controllo comuni

La maggior parte dei controlli si trova all'interno di un contenitore costituito da un controllo di etichetta e un controllo di input. Ad esempio, il campo per acquisire il nome del fornitore nell'app Gestione fornitori SAP è costituito da un controllo Label e da un controllo Text Input, come mostrato nello screenshot seguente. Per aggiungere un nuovo campo, copia un controllo di contenitore esistente e incollalo nel componente reattivo appropriato, aggiornando i nomi, il testo e infine i campi mappati.

Nota

Esistono contenitori simili per altri tipi di controlli input come caselle combinate, selettori di date e pulsanti.

Contenitori reattivi

Le app sono progettate per rispondere al tipo di dispositivo tablet/desktop utilizzando i controlli di contenitore verticale e orizzontale come mostrato nel seguente screenshot. Questi contenitori sono configurati per avere punti di partenza per proprietà come height, width, LayoutMinHeight, LayoutMinWidth, and Wrap. Man mano che aggiungi più campi a questi contenitori, assicurati che anche queste proprietà vengano aggiornate per continuare a gestire la reattività in modo appropriato.

Ulteriori informazioni: Contenitore di layout automatico

Connettersi con altri dati

Uno dei vantaggi delle app canvas è che possono connettersi facilmente e in modo sicuro a una delle diverse centinaia di altri sistemi e applicazioni utilizzando la relativa libreria di connettori nativa.

Ad esempio, se per completare il processo relativo agli ordini di acquisto di Approvvigionamento SAP sono necessari dati di opportunità di prevendita upstream esistenti in un CRM, utilizza i connettori Salesforce o Dataverse da integrare con Dynamics 365 per poter aggiungere facilmente tali dati all'app ordini di acquisto SAP selezionando semplicemente un pulsante.

Inoltre, se disponi di un sistema proprietario interno o di un sistema senza connettore nativo, puoi collaborare con il tuo team IT per creare un connettore personalizzato che consenta a Power Apps di interfacciarsi facilmente con quel sistema tramite un'API supportata.

Ulteriori informazioni:

• Lista di connettori
• Panoramica dei connettori personalizzati

Gestione degli errori nelle app

Tutte le chiamate di flusso incorporate valutano un campo di stato di risposta inviato dai flussi per impostazione predefinita e lo gestiscono generando un messaggio tramite la funzione Notify. Per ulteriori informazioni, vedi Gestione degli errori.

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);  
)

Tutte le eccezioni impreviste generate dall'app vengono gestite nella proprietà App.OnError dove un record Errore del modello della soluzione SAP viene creato prima che l'errore venga restituito e tracciato. Gli amministratori possono visualizzare i dettagli relativi all'errore e attivare i trigger per essere avvisati sulle eccezioni non gestite dall'app come mostrato nel documento Monitorare gli errori.

Ulteriori informazioni: Proprietà OnError

Contenuto correlato

• Che cosa sono le app canvas?
• Informazioni su Power Apps Studio
• Creare un'app canvas da una soluzione
• Creazione di un'interfaccia utente riutilizzabile con Power Apps component framework e i componenti di app canvas
• Amministrare Microsoft Power Platform
• App canvas per sviluppatori aziendali, partner e ISV

Passaggi successivi

Estendere le app basate su modello e Dataverse

Vedi anche

Introduzione al modello Approvvigionamento SAP