How to Display Appended Notes of a SharePoint List Item in ...

Copyright 2020, IncWorx Consulting www.incworx.com

How to Display Appended Notes of a

SharePoint List Item in Power Apps

https://www.incworx.com/


Contents Introduction .................................................................................................................................................................................................................... 3

Step 1: Create and configure your SharePoint List ..................................................................................................................................................... 4

1.1: Create a new SharePoint List ............................................................................................................................................................................. 4

1.2 Enable Versioning on the SharePoint list ........................................................................................................................................................... 7

1.3 Add a Multiple lines of text column with Append changes to existing text enabled. ........................................................................................ 10

1.4 Add a list item and append some notes .......................................................................................................................................................... 13

Step 2: Assign app permissions for calling the Microsoft Graph API....................................................................................................................... 17

Step 3: Use Graph Explorer to test calls to the Microsoft Graph API ...................................................................................................................... 29

3.1 Launch Graph Explorer and test ....................................................................................................................................................................... 29

Step 4: Create a custom connector for calling the Graph API .................................................................................................................................. 33

4.1 Create the custom connector ........................................................................................................................................................................... 33

4.2 Configure general settings ................................................................................................................................................................................ 35

4.3 Configure security settings ................................................................................................................................................................................ 36

4.4 Return to App Registration to assign the Redirect URL .................................................................................................................................. 39

4.5 Configure definition settings ............................................................................................................................................................................. 43

4.6 Test the custom connector ................................................................................................................................................................................ 50

Step 5: Create your Power Apps canvas app ............................................................................................................................................................. 59

5.1 Create the canvas app ....................................................................................................................................................................................... 59

5.2 Test basic app functionality ............................................................................................................................................................................... 64

5.3 Add a data connection for calling the Graph API ............................................................................................................................................ 67

5.4 Display appended notes in a gallery ................................................................................................................................................................ 69

5.5 Save your app ..................................................................................................................................................................................................... 80

Conclusion .................................................................................................................................................................................................................... 83



Introduction

SharePoint offers the ability to append notes/comments to a list item. When enabled on a multi-line text column, each time content is

entered in the field and saved, the field’s contents are captured and stored along with the author and timestamp. This offers the ability to

view a trailing history of what was entered in the field.

This article will explain how to retrieve and display the appended notes from within a canvas app. We will demonstrate how to enable the

appended changes feature on a SharePoint list, create a canvas app to display and edit the SharePoint list items, and retrieve the appended

notes from the canvas app using the Microsoft Graph API.

At the time of this writing (September 2020), using a custom connector for calling the Graph API is considered a premium connector. Check

the licensing requirements for Power Platform for the latest from Microsoft.

Disclaimer: This article is not intended to provide a complete, best practices, or warranted solution, but is intended to demonstrate possibilities and

provide you with examples that you can begin to build upon. Do not attempt exercises in a production environment. Any use of information

contained in this article is strictly at your own risk. If you need additional support or advisory hours, please don’t hesitate to contact IncWorx. We’re

here to help you get the most out of your investment in Microsoft technologies. Visit us at www.incworx.com.


https://docs.microsoft.com/en-us/power-platform/admin/pricing-billing-skus

http://www.incworx.com/


Step 1: Create and configure your SharePoint List

In this step, you will create a SharePoint list and add a column with the append changes feature enabled.

1.1: Create a new SharePoint List

Go to Site Contents and choose New → List.



Enter “My Demo List” and click the Create button.



After clicking Create, you are presented with your newly created list.



1.2 Enable Versioning on the SharePoint list

Behind the scenes, SharePoint leverages its version history functionality to support the append changes feature. As a result, it is a

requirement to enable version history for append changes to work.

Go to Settings → List settings.



Click Versioning settings.



For the Item Version History setting, choose Yes for Create a version each time you edit an item in the list and enter a number between 1 and

50,000 for Keep the following number of versions, then click the OK button.



1.3 Add a Multiple lines of text column with Append changes to existing text enabled.

Click Add column then choose Multiple lines of text.



Enter a Name for the column, “My Demo Column”, and choose Yes for Append changes to existing text, then click the Save button.



Note: If you have not enabled versioning on your SharePoint list, you will receive an error when attempting to enable the append changes

feature as shown below. If that occurs, go to the list settings page, and enable versioning on the list.



1.4 Add a list item and append some notes

After adding the column, use the New button to add a sample list item.



Enter “Sample item #1” in the Title field, and “Demo note #1 for item #1.” In the My Demo Column field, then click the Save button:



When viewing the list item details, the My Demo Column value is displayed with the author and timestamp. Next, edit the My Demo Column

field and enter value “Demo note #2 for item #1”.



When viewing the list item details, My Demo Column displays the notes in descending order of when they were entered.



Step 2: Assign app permissions for calling the Microsoft Graph API.

In this step you will use the Azure portal to register an app for accessing the Microsoft Graph API. This is necessary because you will be using

the Graph API to retrieve the appended notes from a SharePoint list, and you must grant permissions for doing so.



Choose New registration.



Enter “My App Registration” for the Name of the application and click the Register button.



Copy the Application (client) ID, you will need it in a later step when creating your custom connector.



Go to API permissions and click Add a permission.



Choose Microsoft Graph.



Choose Delegated permissions.



Find and choose Sites.Read.All to assign our app permissions to read SharePoint site content by the Microsoft Graph API. Click the Add

permissions button.



Once added you will see the Sites.Read.All permission listed.



Go to Certificates & secrets then click New client secret.



Enter “My Client Secret” for the Description and choose Never for Expires, then click the Add button.



Copy the Value for the client secret just created. You will need this value in a later step. If you forget to copy the secret or lose it, simply add a

new one and use it instead.



Step 3: Use Graph Explorer to test calls to the Microsoft Graph API

In this step you will use Microsoft’s Graph Explorer to test the call to the Graph API for retrieving a list item’s appended notes. You will use

the response from the call when creating the Power Apps custom connector in a later step.

3.1 Launch Graph Explorer and test

Go to https://developer.microsoft.com/en-us/graph/graph and click Sign in to Graph Explorer using your credentials.


https://developer.microsoft.com/en-us/graph/graph


If it’s your first time using the Graph Explorer with your tenant, you will get prompted to accept permissions for calling the Graph API. Click

Accept to give permission for Graph Explorer to access your profile via the Graph API.



Enter the following URL and click Run query. (Remember to replace <<your tenant>> with your M365 tenant id.)

https://graph.microsoft.com/v1.0/sites/<<your tenant>>.sharepoint.com/lists/My%20Demo%20List/items/1/Versions

Assuming you have not yet granted Graph Explorer explicit access to read from SharePoint on your tenant, you will receive a 404 error as

shown below. To grant access, click Modify permissions located just below the query fields.


https://graph.microsoft.com/v1.0/sites/%3c%3cyour%20tenant%3e%3e.sharepoint.com/lists/My%20Demo%20List/items/1/Versions


After clicking Modify permissions, click the Consent button for permission Sites.Read.All, then click the Run query button. Results of the call are

displayed in the Response preview section.



Step 4: Create a custom connector for calling the Graph API

In this step you will create a new custom connector for calling the Graph API to retrieve the appended notes.

4.1 Create the custom connector

Go to Power Apps and choose Custom Connectors, then choose New custom connector → Create from blank.



Enter “My Custom Connector” and click the Continue button.



4.2 Configure general settings

Enter a description in the Description field and “graph.microsoft.com” in the Host field, then click Security.



4.3 Configure security settings

Enter the information below then click Create connector.

• Authentication type: OAuth 2.0

• Identify Provider: Azure Active Directory

• Client id: << enter the client id from the app registration step >>

• Client secret: << enter the client secret from the app registration step >>

• Resource URL: https://graph.microsoft.com



Upon creation, the Redirect URL is populated automatically by Power Apps. Copy the Redirect URL and return to App Registration on the Azure

portal to finalize the registration. Once finished, return here and click Definition to continue.



4.4 Return to App Registration to assign the Redirect URL

Within the Azure Portal, go to Authentication for the app registration created earlier, My App Registration. Then click Add a platform.



Choose Web.



Using the Redirect URL copied from the Security tab of your Power App, paste it into the Redirect URIs field, then click the Configure button.

• Redirect URL: https://global.consent.azure-apim.net/redirect



The Redirect URL has been configured successfully. Go back to Power Apps to continue creating the custom connector.



4.5 Configure definition settings

Click New action.



Enter the information below in the General section, then click Import from sample under the Request section.

• Summary: Get Appended Notes From SharePoint

• Description: Retrieve appended notes for a SharePoint list item.

• Operation ID: GetAppendedNotesFromSharePoint



For Verb choose Get, enter the following in the URL field, then click the Import button. (Remember to replace <<your tenant>> with your M365

tenant id.)

• URL: https://graph.microsoft.com/v1.0/sites/<<your tenant>>.sharepoint.com/lists/My Demo List/items/{itemid}/Versions?$expand



Notice the Path includes the itemid parameter, and Query includes the $expand parameter. Our Power App will take advantage of these

parameters when calling the Graph API in a future step. Next, click Add default response under the Response section.



Copy and paste the response from Graph Explorer (step 3) into the Body field, then click the Import button.



Click the gray default button to verify the results of the import.



Notice the fields available on the response to the API call. Next click Test.



4.6 Test the custom connector

Click Update connector to ensure all changes are saved prior to testing.



Click New connection.



Click Create.



Same as Graph Explorer needed consent to make the calls to your tenant, so does your Power Apps connection. First, choose the account.



Next, click the Accept button to grant permission.



Note…you will receive the following error if you skipped the step of entering the Redirect URL for the app registration in the Azure portal. If

that is the case, go to your app registration and enter the Redirect URL as described above.



The connection is created. Next, return to your custom connector to continue testing.



Choose the connection just created and enter the SharePoint list item id for the itemid parameter and

“fields($select=MultiLineColumn,Modified)” for the $expand parameter, then click the Test operation button.

Pro tip: The $expand parameter is optional, but by limiting the columns returned to only those we’re interested in, we’re reducing the

amount of data being transferred between the client and server.



Results of the test operation are returned. The custom connector is ready for use.



Step 5: Create your Power Apps canvas app

In this step you will create a new canvas app for managing the items for your demo SharePoint list My Demo List, and you will use our custom

connector for retrieving a list item’s appended notes.

5.1 Create the canvas app

Since you are connecting to a SharePoint list, click SharePoint.



Click the Create button.



Choose the site that contains your SharePoint list: https://<<your tenant>>.sharepoint.com/ (where <<your tenant>> is your M365 tenant id)



Choose the SharePoint list containing the appended notes column, in our case My Demo List, then click the Connect button.



Your canvas app is created with screens for browsing, viewing, and editing the SharePoint list items.



5.2 Test basic app functionality

At this point you may test your app to verify basic functionality.

Browse screen:



Detail screen: (notice by default none of the values for My Demo Column are being displayed)



Edit screen:



5.3 Add a data connection for calling the Graph API

First, we’ll add the connection created earlier for retrieving the appended notes from SharePoint using the Graph API.

Click Data, then choose connector My Custom Connector, then connection My Custom Connector.



Once added, you’ll see two connections in your app, one to your SharePoint list and a new one to your customer connector.



5.4 Display appended notes in a gallery

First, you will hide the default value field for My Demo Column since it will not be used. Go to the details screen and select the data card value

field for My Demo Column. In the properties pane, change Visible to Off.



Add a Blank vertical gallery to the detail screen.



Position and size the gallery as shown below, just beneath the My Demo Column heading.



Next, change the Layout to Title and subtitle. In this example we will be displaying the notes and modified date for each entry.



Here are the results of changing from Blank to Title and subtitle layout.



In the gallery’s properties pane choose Data source: MyCustomConnector.



Next, set the gallery’s Items property to the following. We’re using the custom connector to call the Graph API and return the appended notes

for the selected item. We’re also limiting the fields returned to only MyDemoColumn and Modified.

• Items:

MyCustomConnector.GetAppendedNotesFromSharePoint(BrowseGallery1.Selected.ID,{'$expand':"fields($select=MyDemoColumn,Mo

dified)"}).value



In the gallery’s properties pane click the Edit link for Fields and enter the information below.

• Subtitle: fields

o Display value: Modified

• Title: fields

o Display value: MyDemoColumn



The list item’s version history, including the appended notes, are being retrieved from SharePoint and displayed in the gallery. Note, all list

item version history entries are returned, including any unrelated to notes, which explains the blank entries.



To eliminate the blank entries, we’ll filter the results being displayed in the gallery by changing the Items property of the gallery to the

following:

• Items:

Filter(MyCustomConnector.GetAppendedNotesFromSharePoint(BrowseGallery1.Selected.ID,{'$expand':"fields($select=MyDemoColu

mn,Modified)"}).value, Not(IsBlank(fields.MyDemoColumn)))



The result of a displaying a list item with appended notes is shown below.



5.5 Save your app

Remember to save your app! Go to File → Settings and enter a Name for your Power App, then click Save.

• Name: My Demo Power App.



Click the Save button to save the Power App.



Your Power App has been created.



Conclusion

We hope you have enjoyed this guide on Power Apps and displaying appended notes from SharePoint. Thanks for reading!

IncWorx offers nationwide consulting and support services for Power Apps, SharePoint and other

Microsoft technologies. Contact us today to learn why organizations choose IncWorx when building

mission-critical solutions on Microsoft 365.

IncWorx Consulting | https://www.incworx.com | 847-839-9679




How to Display Appended Notes of a SharePoint List Item in ...

Documents

Transcript of How to Display Appended Notes of a SharePoint List Item in ...