Document a Power Automate Flow

Chapters

References

Summary

Automatisch vertaalde tekst

The Power Automate user interface provides an excellent way to document Flows and use them for reference purposes. However, the insight into which flows are created on which tenant in which environment is moderate. Moreover, it is difficult to click through previously arranged Flow actions looking for previous solutions when setting up Flow actions.
A simple App makes this possible. Flows can be registered in the App, so that a total administration can be carried out of all Flows that have been created in different tenants. In the App, the HTML code can also be pasted from the Flow designer. As soon as the record is saved, a Flow starts that adds the different styles from the stylesheets, resulting in a stand-alone HTML page that can easily be displayed in a web site. This HTML file is placed on an Azure Storage by a second Flow for this purpose.
Now, writing to Azure Storage Accounts requires a premium connector. By placing a Flow in a Teams dataverse, no premium license is required.

Model Driven App

Automatisch vertaalde tekst
The App itself is no more than a Dataverse table in the Desktop Services Portal Apps app with the following fields:
  1. Name
    The name of a flow
  2. Environment
    The place where the Flow was created, possibly with a reference to the tenant.
  3. Description
    The description of the Flow.
  4. Flow Designer URL
    The link to the Flow.
  5. Flow Diagram URL (populated by Flow)
    Here the Create Flow HTML File flow places the link where the HTML page is dropped.
  6. Paste Flow HTML (or first part if larger than 1Mb)
    The HTML of the diagram can theoretically be longer than 1Mb, and that no longer fits in a Dataverse Multiline Text field. Usually everything fits in this field. The copying process works as follows:
    • Open the Flow in the Designer
    • Click all actions open
    • Open the browser Developer tools (F12)
    • Select as an element the container where the diagram is in, so without the Save, Flow checker, Test menu bar
    • In the node tree, look for the 'lowest' body element. The diagram is in an iFrame, and the body element must be copied: 'Copy Outer HTML'.
    • Paste this into the field.
  7. Optional second part HTML in case source is larger than 1Mb
    Usually not necessary, but if the outerHTML does not fit in the previous field, then the remainder can be put here.
  8. Log (populated by Flow)
    This field is filled by the flow to follow that the generation has succeeded.

Cloud Flows

Automatisch vertaalde tekst

Generate Flow HTML File

The diagram speaks for itself, but is summarized when a flow record is kept in the App

  1. Checked if there is Flow HTML in the record. If not, the flow stops.
  2. The two HTML fields are put together (first part + second part).
  3. Copies of the three Power Automate stylesheets are read from SharePoint.
  4. If the HTML is valid, the piece is passed between the tags '<div class="content-container"' and '</section>'.
  5. The HTML file is made up of a piece of card coded HTML, the content of the stylesheets and the found diagram HTML and written to SharePoint

Upload SharePoint Flow Diagrams to Azure Storage Account

The second Flow is in a Teams solution and is automatically started when the Flow Diagram file is dropped on SharePoint. This Flow does nothing but create a blob on Azure Storage with the contents of this file.

UX Extension

Automatisch vertaalde tekst

To make the flow diagram visible in the App, a tab with an iFrame control has been added to the Form where the correct link is put with JavaScript:

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