Hello team,

Today I am going to share with you a way that you can extend the functionality of your PowerPortals by using Durable Functions.

First of all here are some links to the documentation in case you don’t know anything about what I am talking about:

– Durable Functions
– PowerApps Portals

What’s the scenario?

Let’s imagine that we have one operation that is very time consuming , for example a calculation that needs to go to an OnPremise Database to retrieve some data, do something with it and then send it back.

In this case we could use the power of the Durable Functions to do all that heavy lifting for us while at the same time providing our users with a status on how the process is going.

Durable Function

We are going to create a simple scenario using the default template that says hello from different cities, the only thing I am going to add is I am going to make it wait for 2 minutes just so I can show you how we can get the status of the function within the Power Portal.

 

PowerApps Portals

The actual PowerApps Portals bit is going to be a little bit more complex so let’s break it down into steps:

1. Create a Web Template to extend the Web Page using Liquid.

2. Create a Page Template to hold that Web Template

3. Create the Web Page

4. Add it to the Menu ( Always a nice touch)

5. Let’s call our function, for that we need to go to the localized content of our web page and add the following custom javascript.

 

 

 

var statusUrl = "";
$("#triggerFunction").click(function (){
    $("#triggerFunction").prop('disabled',true);
    console.log("About to Call");
   $("#spinner").show();
   $.post("DURABLE FUNCTION URL", function(data){
       console.log(data.statusQueryGetUri);
       statusUrl = data.statusQueryGetUri;
       console.log("About to call the status function");
       $.get(data.statusQueryGetUri, function(result){
           console.log(result.runtimeStatus);
           
           $("#result").text(result.runtimeStatus);

       });
   });
});

$("#findStatus").click(function(){
    $.get(statusUrl, function(statusUpdate){
        console.log(statusUpdate.runtimeStatus);
        $("#result").text(statusUpdate.runtimeStatus);

    });
});

The first method fires the Durable Function using the Http_Start trigger (remember to make sure you modify the CORS), and the second method uses the runtimeStatus to find out how we are doing it and present it to the user.

Hope you find it useful!

Thanks,

Mario