ReadyXRM

One of the features of Power Apps portals that I have been impatiently waiting for is the Power Apps portals WebAPI. This new feature recently became generally available, and it allows portal makers and developers to greatly extend their portal web applications without needing to resort to complex or costly workarounds.

Even if you are not a hardcore developer, but comfortable with a little bit of cut and paste development, you can utilize the Portal WebAPI to handle some simple Dataverse update and creation tasks.

Community member Omar Zaroor has created an extremely helpful tool on the XrmToolBox called the Power Portal WebAPI Helper to assist with the generation of JavaScript code in a Portal WebAPI format. Simply choose the tables, attributes and the tool will generate the corresponding JavaScript code but also setup the site settings and required Table permissions for the code to work. Take the copied JavaScript code snippet and place it on a web page or in a web template. Omar provides a great tutorial on his blog.

Even with the Power Portal WebAPI helper, you still might need to go in and modify some of the JavaScript code to work for your requirement.

Lookups

In my example, I needed to create a new record that had corresponding lookup values. At this time, the Power Portal WebAPI helper does not generate the code to set lookup values and the docs also don’t explain this very well (it seems some more details have been recently added).

UPDATE: The Power Portal WebAPI helper has been updated to support lookups!

Simply adding the GUID of a record will NOT work.

"avngr_Class": classid,  //this will NOT work

Digging a bit further, the Portal WebAPI is an subset of the Dataverse WebAPI, this is where I discovered the @odata.bind annotation.

The syntax follows;

"avngr_Class@odata.bind": "/avngr_classes(" + classid + ")",

What we need is the table Odata schema name, with @odata.bind appended to it. This will need to be assigned the GUID via adding a “/”, the entity set name with the GUID in brackets.

In the code you can set the GUID through a variable or even via Liquid tag (e.g. setting the currently logged in portal user)

"avngr_Student@odata.bind": "/contacts({{user.id}})"

In the end, my JavaScript function looked something like this to create a new registration record on the portal from a single button click;

    <script>
      function register(classid) {
        var dataObject = {
          "avngr_Class@odata.bind": "/avngr_classes(" + classid + ")",
          "avngr_ponumber": "Online Registration",
          "avngr_Student@odata.bind": "/contacts({{user.id}})"
        };
        webapi.safeAjax({
          type: "POST",
          url: "/_api/avngr_registrations",
          contentType: "application/json",
          data: JSON.stringify(dataObject),
          success: function(res, status, xhr) {
            //print id of newly created entity record
            console.log("entityID: " + xhr.getResponseHeader("entityid"))
            document.getElementById("register").innerHTML = "Registered!";
          }
        });
      }
    </script>

Using this code created a process that was incredibly faster and more user friendly than using something like an Advanced Form. There are other examples of where the Portal WebAPI can be helpful in creating powerful web applications. If you get stuck on a particular piece of syntax, drill down to the Dataverse API and you might discover your answer!

What to Learn More? Join me at ESPC2021!

On June 1st, I will be delivering my session: Power Up with Power Apps Portals! at ESPC21 Online.

This will be my first time presenting at ESPC (European SharePoint, Office 365 & Azure Conference). The conference is always amazing, whether in-person or virtual – the best speakers, topics and audience and everyone is so engaged, so I am really excited to be speaking at this event. You can Register for free today! 

About My Session

Power Apps Portals provide a lot of functionality for external users to interact with Dataverse data. Quickly provision an external facing portal, add web pages and begin to power up your portal by allowing users to interact with Dataverse information. Apply authentication and security to the portal to provide a secure conduit for your external stakeholder to only see the information you want to. Extend your portal using HTML, CSS, Liquid, JavaScript and the new Portals WebAPI. No code and pro code unite to build powerful portal experiences!

This session covers some of the basics of using the Portals WebAPI (actually demonstrating the full working solution using the code above!)

I will be taking any questions you may have live during my session, so come prepared!  

As a speaker at ESPC21 Online I can share with you a special 25% discount on Pro Access tickets, which includes a pre-event tutorial of your choice, all event sessions on demand and more. If interested, just use code ESPCPRO when booking here. 

You can find the full event schedule here and check out some of ESPC’s reasons why you don’t want to miss this event here. I hope to see you at ESPC21 Online!  

Summary

Cover Photo by Ran Berkovich on Unsplash

Nick Doelman is a Microsoft Business Applications MVP, a Microsoft Certified Trainer and one co-principles at https://365.training Follow Nick on twitter @readyxrm