SharePoint Document Library in PowerApps Portal

Introduction: In this blog, we will understand how to display files of the SharePoint Document Library in the PowerApps Portal.

Steps to be followed:

We will use Power Automate(MS Flow) to achieve this requirement.

Go to Power Automate.
- Create “+New Flow” of type “Instant cloud flow”.
- Select the “When an HTTP request is received” trigger.

For this flow, we don’t require anything in the body so leave it blank.

Search for “SharePoint” connector and select “Get files(properties only)” action.

Select your SharePoint Site Address and Library Name from drop-down.

Add Response action to return the response to PowerApps Portal.
- Pass value from the Dynamic Content in the body of the response.

Entire Flow:

Now our flow is ready we have to call this flow on load of the webpage where we want to display the SharePoint files in PowerApps Portal.

Code for displaying SharePoint Files:

<!--DataTable plugin reference-->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

<!--Div to display Table-->
<div class="row sectionBlockLayout"style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
    <div class="container" style="display: flex; flex-wrap: wrap;">
        <div id="distable" class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    </div>
</div>

<script>
    $(window).bind('load', function () {
        var settings = {
            "url": "https://prod-24.centralindia.logic.azure.com:443/workflows/5edd12f4af/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=uA8Zuy",
            "method": "POST",
            "timeout": 0,
        };
        $.ajax(settings).done(function (response) {
            var html = "<table id='docTable'><thead><tr><th>Thumbnail</th><th>Name</th><th>Author</th><th>Modified</th><th>Link</th></tr></thead><tbody>";
                response.forEach(element => {
                html += "<tr>" +
                    "<td> <img src='" + element['{Thumbnail}'].Small + "'></td>" +
                    "<td>" + element['{Name}'] + "</td>" +
                    "<td>" + element.Author.DisplayName + "</td>" +
                    "<td>" + element.Modified + "</td>" +
                    "<td> <a href='" + element['{Link}'] + "' target='_blank'>Open Document</a></td>" + "</tr>";
            });
            html += "</tbody></table>";
            $("#distable").html(html);
            $('table#docTable').DataTable();
        });
    });
</script>

Explanation:

Create a div with id distable which will be used to display the table.
On Load of webpage call(trigger) the ms flow.
After a Successful call, ms flow returns the response back to the portal, and using that response we have created a dynamic table to display the SharePoint Files.
We have used the DataTable plugin to add search, sort, and pagination functionality.

Add code on the webpage.

Click on Browse website to view the changes.

Now let’s add some styling(CSS) to our table.
- Click on Edit

Go to Options and under Custom CSS add your CSS code.

#docTable {
      font-family: Trebuchet MS,Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
#docTable td,
    #docTable th {
      border: 1px solid #ddd;
      padding: 5px;
    }
#docTable tr:hover {
      background-color: #ddd;
    }
#docTable th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #800080;
      color: white;
    }

After adding CSS click on Save.

After saving you can see the changes.

You can read the below blog to get more details on how to use DataTable Plugin in PowerApps Portal:

DataTable Plugin in PowerApps Portal