web
U bent offline. Dit is een alleen-lezen versie van de pagina.
close

Chapters

References

Samenvatting

De Power Automate gebruikersinterface biedt een uitstekende manier om Flows te documenteren en voor referentiedoeleinden te gebruiken. Het inzicht in welke flows op welke tenant in welke omgeving zijn gemaakt is echter matig. Bovendien is het lastig om door eerder ingerichte Flow acties te klikken op zoek naar eerdere oplossingen bij het inrichten van Flow acties.
Een eenvoudige App maakt dit wel mogelijk. In de App kunnen Flows worden geregistreerd, zodat er een totaal administratie kan worden gevoerd van alle Flows die in verschillende tenants zijn aangemaakt. In de App kan daarnaast de HTML code ui de Flow designer worden geplakt. Zodra het record wordt bewaard, start een Flow die de verschillende stijlen uit de stylesheets toevoegt, met als resultaat een stand-alone HTML pagina die weer gemakkelijk kan worden getoond in een web site. Deze HTML file wordt door een tweede Flow hiervoor op een Azure Storage gezet.
Nu vergt het schrijven naar Azure Storage Accounts een premium connector. Door een Flow in een Teams dataverse neer te zetten, is geen premium licentie nodig.

App

De App zelf is niet meer dan een Dataverse tabel in de app Desktop Services Portal Apps met de volgende velden:
  1. Name
    De naam van een flow
  2. Environment
    De plaats waar de Flow is gemaakt, eventueel met een verwijzing naar de tenant.
  3. Description
    De omschrijving van de Flow.
  4. Flow Designer URL
    De link naar de Flow.
  5. Flow Diagram URL (populated by Flow)
    Hier wordt door de Create Flow HTML File flow de link neergezet waar de HTML pagina neergezet wordt.
  6. Paste Flow HTML (or first part if larger than 1Mb)
    De HTML van het diagram kan in theorie langer zijn dan 1Mb, en dat past dan niet meer in een Dataverse Multiline Text veld. Meestal past alles wel in dit veld.Het kopieren gaat als volgt in het werk:
    • Open de Flow in de Designer
    • Klik alle acties open
    • Open de browser Developer tools (F12)
    • Selecteer als element de container waar het diagram in staat, dus zonder de Save, Flow checker, Test menubalk
    • Zoek in de node tree naar het 'laagste' body element. De diagram staat in een iFrame, en daarvan moet de body element gekopieerd worden: 'Copy Outer HTML'.
    • Plak dit in het veld.
  7. Optional second part HTML in case source is larger than 1Mb
    Meestal niet nodig, maar als de outerHTML niet in het vorige veld past, dan kan hier het restant worden neergezet.
  8. Log (populated by Flow)
    Dit veld wordt door de flow gevuld om te volgen dat de generatie gelukt is.

Cloud Flows

Generate Flow HTML File

De diagram spreekt voor redelijk zich, maar samengevat wordt op het moment dat in de App een flow record wordt bewaard

  1. Gecheckt of er Flow HTML in het record staat. Zo niet, dan stopt de flow.
  2. De twee HTML velden worden aan elkaar gezet (first part + second part).
  3. Kopieën van de drie stylesheets van Power Automate worden uit SharePoint gelezen.
  4. Als de HTML geldig is, dan wordt het stuk tussen de tags '<div class="content-container"' en '</section>' gehaald.
  5. De HTML file wordt opgebouwd uit een stukje card coded HTML, de inhoud van de stylesheets en de gevonden diagram HTML en weggeschreven naar SharePoint

Upload SharePoint Flow Diagrams to Azure Storage Account

De tweede Flow staat in een Teams solution en wordt automatisch gestart op het moment dat op SharePoint de Flow Diagram file wordt neergezet. Deze Flow doet niets anders dan met de inhoud van deze file een blob op Azure Storage aan te maken.

UX uitbreiding

Om de flow diagram zichtbaar te maken in de App, is aan de Form een tabblad met een iFrame control toegevoegd waar met JavaScript de juiste link wordt gezet:
// A namespace defined for the sample code// As a best practice, you should always define // a unique namespace for your librariesvar dts = window.dts || {};(function () {    // Define some global variables    var myUniqueId = "_myUniqueId"; // Define an ID for the notification    var currentUserName = Xrm.Utility.getGlobalContext().userSettings.userName; // get current user name    // Code to run in the form OnLoad event    this.formOnLoad = function (executionContext) {        var formContext = executionContext.getFormContext();        var iFrame = Xrm.Page.ui.controls.get('IFRAME_Flow');        iFrame.setSrc(formContext.getAttribute("dts_flowdiagramurl").getValue());        var message = "iFrame source" + formContext.getAttribute("dts_flowdiagramurl").getValue()        // display the form level notification as an INFO        formContext.ui.setFormNotification(message, "INFO", myUniqueId);        // Wait for 5 seconds before clearing the notification        window.setTimeout(function () { formContext.ui.clearFormNotification(myUniqueId); }, 5000);    }}).call(dts);