Multi-Line Field History Log in PowerApps

Published by Jon

Introduction

Hello and welcome to the first in the PowerApps Tips & Tricks Series! We have been working with PowerApps since the initial Beta Release in 2016 and have seen a lot of good and bad practices that have come about as the platform has grown. In this series, We plan to provide quick, easy to digest examples and instructions on how to implement the good ones! 

Tip #1 – Display a Workflow’s Version History & Comment Log 

The first tip of the series will be centered around a very common request we get from our partners, how can I see a list item’s multi-line append field in PowerApps? This is incredibly handy to have as it acts as a great way to maintain an “audit” of an item with details such as:

  • approve / rejection feedback of a request
  • Item Updates that occur throughout a given process
  • Comment log related to that request being processed 

At this point in time, there is not an out-of-the-box way to access a multi-line field that has the append feature enabled (there is this idea under review as of October 2019 but not planned yet) 

How We Achieve It / The Good Stuff 

Even though OOTB you cannot access this data, there is still a way to utilize the multi-line field (and some HTML) to create the same functionality! In the demo below, I’ll be showing you how to: 

  1. Create a simple list (my requests) to store our data in SharePoint 
  2. Configure a PowerApp to Connect to that List 
  3. Create a working History Log that can track changes to a given List Item 

Let’s Get Started 

1-Provision the List 

The first thing we will need to do is provision a list on SharePoint that can store our data. I’m using a Team Site and created a new list called “Tip 1 – Project Requests”. Feel free to calls yours whatever you like and just replace it wherever you see me refer to it as we go along. 

Field Name Field Type 
Title No Changes 
Request Type Choice Column
  • Consultation Custom-AppTraining
Request Status Choice Column
  • SubmittedIn-ReviewApprovedRejectedCompleted
Ideal Completion Date Date Field (no time) 
Actual Completion Date Date Field (no time) 
History Multi-line of Text  Leave as plain-text and NOT rich text 

For the sake of the demo and to keep this brief, let’s populate the list data via the Quick Edit view so that we have some pseudo data to work with. Feel free to use the following: 

Title Request Type Request Status Ideal Completion Date 
PowerApp Workshop Training Submitted 10/15/2019 
InfoPath Migration Assessment Consultation Submitted 10/10/2019 
Teams SPFX Solution Custom-App Submitted 11/27/2019 

Now that the list is created, let’s provision a new tablet layout PowerApp.  

  1. First click on View > Data Sources and select or create a new SharePoint connection. 
  2. Once selected, search for the SharePoint site that you created the list on click “Connect” 
  3. You should then see the lists for that site, including the one you created. Select it and click “Connect”. 
  4. You should then see the list in the Data Sources Panel (note some of the screens may look different in time as Microsoft continues to enhance the Editor’s UI including verbiage / side / etc.) 

Now let’s make some adjustments 

  1. Screen1 (select through the tree view on the left-hand side)
    1. Fill: RGBA(237, 237, 237, 1) 
  2. Request Gallery Components 
    1. Gallery > Blank Gallery (Gallery1) 
      1. Data Source: ‘Tip 1 – Project Requests’ 
      2. Fill:  RGBA(255,255,255,1) 
    2. Add a Label into the gallery (select the Gallery, then Insert > Label). 
      1. Text: ThisItem.Title
    3. Add a Button into the gallery (select the Gallery, then Insert > Button).
      1. OnSelect:
Select(Parent);
Set(selectedRequest,ThisItem); 
// Creates a global variable with the selected request’s data 
UpdateContext({resetCommentBox:false}) 
// Sets a context variable that resets the comment box when set to true 

      3-Request Review Component – History 

      Now we have the basic parts of the app setup, let’s dive into the History Log. In order to create the effect of a running history log, we will be using HTML to concatenate together the look and feel of what this would look like on any other website. 

      1. History Header 
      1. Insert > Label
        NOTE: Make sure you don’t have the gallery selected anymore 
      1. Fill: RGBA(116, 116, 116, 1) 
      1. Text: selectedRequest.Title& – History 
      1. General Dimensions: 
      1. Width: 550px 
      1. Height: 50px 
      1. History Display 
      1. Insert > Text > HtmlText
        HtmlTextselectedRequest.History 
      1. Fill: RGBA(255,255,255,1) 
      1. General Dimensions: 
      1. Width: 550px 
      1. Height: 500px 
      1. Comment Box 
      1. Insert > Text > Text Input 
      1. Mode: Multiline 
      1. Default: “” 
      1. HintText: “Enter a comment for the request” 
      1. ResetresetCommentBox 
      1. General Dimensions: 
      1. Width: 550px 
      1. Height: 100px 
      1. Add Comment Button 
      1. Insert > Button 
      1. Text:”Add Comment” 
      1. DisplayMode: If(Not(IsBlank(selectedRequest)),DisplayMode.Edit,DisplayMode.Disabled) 

      This makes sure that the user has selected a request before we can submit a comment 

      1. OnSelect: 

      Patch( 

          ‘Tip 1 – Project Requests’, 

          LookUp(‘Tip 1 – Project Requests’,ID= selectedRequest.ID), 

          { 

              History: Concatenate(             

                  “<p style=’margin:0;’><b>(” & Now() & “) – ” & User().FullName & “:</b></p>”, 

                  ” <p style=’margin:0;padding-left:30px;’>” & TextInput1.Text & “</p>”, 

                  “<hr>”, 

                  LookUp(‘Tip 1 – Project Requests’,ID= selectedRequest.ID).History 

              ) 

          } 

      ); 

      Notify( 

          “Comment posted to the issue”, 

          NotificationType.Information 

      ); 

      Set(selectedRequest,LookUp(‘Tip 1 – Project Requests’,ID= selectedRequest.ID)); 

      UpdateContext({resetCommentBox: true}) 

       

      Let’s Dive into what’s going in the OnSelect function 

      1. Patch() 
      1. The patch function helps us reduce the overhead of using a Form component by simply updating only the property we provide it. It takes the three arguments of: 
      1. Data Source (our list) 
      1. Record (which we can retrieve by using LookUp and our Variable “selectedRequest” and doing a comparison of the IDs) 
      1. Update (which has the notation {fieldName:”value”} 
      1. In the Patch, we update the History field with the following Function: 

      Concatenate(
      “<p style=’margin:0;’><b>(” & Now() & “) – ” & User().FullName & “:</b></p>”, 

      Creates a header formatted block with the time and user name
      ” <p style=’margin:0;padding-left:30px;’>” & TextInput1.Text & “</p>”, 

      Binds the comment box value into the next line as a bullet<hr>”, 

      Adds a horizontal bar to end the update
      LookUp(‘Tip 1 – Project Requests’,ID=selectedRequest.ID).History 

      This LookUp function ensures we get the most up-to date value in-case someone else made an update while you were typing. 

      ) 

       

      1. Notify( 

          “Comment posted to the issue”, 

          NotificationType.Information 

      ); 

      Adds a notification bar at the top of the screen notifying the update was successful 

      Set(selectedRequest,LookUp(‘Tip 1 – Project Requests’,ID= selectedRequest.ID)); 

      Updates the selectedRequest variable to the latest value 

      UpdateContext({resetCommentBox: true}) 

      Will trigger the reset property of the comment box to clear the value that was typed originally. 

       

       

      At this point, we should now have something that looks relatively close to the following 

      <img> 

       

      Now in order to test the functionality you can: 

      1. Select a project request to “Review” 
      1. See the History Header change to reflect that we selected that request 
      1. Add a comment into the comment box 
      1. Click “Add Comment” button 
      1. Notice the History auto-update and the notification across the top saying that the comment was added. 

       


       

       


      0 Comments

      Leave a Reply

      Your email address will not be published. Required fields are marked *