PL400: describe Power Apps portal extensibility points including CRUD APIs and custom styling

Portal is the generic term in science fiction movies where astronauts enter a universe in another universe. It seems the same in the Power platform which gives an external point of view for the audience and users of the outside world. On 1 October 2019, Microsoft launched Power Apps Portal which has the capability to create low-code, responsive websites that allow external users to interact with data stored in the Dataverse.

There are many portal templates available which can be provisioned according to the target audience and workload. The Power Apps portal requires that there is a Dataverse database available in the environment for key components to be installed and configured.

Core Power Apps Portal Features:

1. Content Management (Web pages, static text, image and other context)
2. Multi Languages (43 languages)
3. Access to Dataverse data
4. Themes
5. Global Search
6. Authentication and Security
7. Profile Management
8. Customization and Extensibility

Although the whole features are interesting and business focused, the scope of the article is only about PL 400 preparation, so I will discuss the extensibility of Power App portal here. Power Apps Portals is supposed to be a no-code, low-code solution for building portal apps. However, there may be situations where some needs require extended development.

Liquid:

Liquid is an open-source markup language that can be embedded in content (webpage content, content snippets) and web templates. Liquid is used to add dynamic content to webpages and can also be used to dynamically present Microsoft Dataverse records.

Liquid is a template language created by Shopify and written in Ruby. It is now available as an open source project on GitHub. It is server side language.

Template language:

This language  generally uses to build web pages that combine static content and dynamic content.

Liquid Syntax:

Liquid language works with HTML tag but it can be easily readable and make distinguish between them. It is under the two sets of delimiters;

• {{}} : which denotes the output
• {%%} which denotes logic and control flow.

JavaScript

Custom JavaScript code can be embedded in various portal assets such as webpages, web templates, table forms, and table lists. JavaScript can be used to enhance the client interface, add complex user input validation, or call external web services. Scripting in Power Apps portals is specific to portal components and does not use scripts from model-driven apps in table forms or views.

CSS

Cascading Style Sheets (CSS) can be used to control the appearance and the behavior of portal webpages. CSS can also implement specific portal features instead of JavaScript code,

Companion apps

There may be some situations where custom code is needed to create or update data in a Dataverse without submitting a table form or a web form. A common technique is to build a custom web app outside of the Power Apps portal using Azure App Services or the Web Apps feature of Azure Functions, which will expose an API that can be safely called from JavaScript on portal pages. The web app can interact with the data using the standard Dataverse Web API.

Portal Web API:

Microsoft unveiled a new feature in Power Apps Portal that allows CURD operations to be performed with the help of JavaScript which is known as Portal Web API. This feature is available in version 9.3.3.x and later. These functions require a Power Portal license. Portal Web API provides a subset of capabilities for Dataverse operations.

Benefits:

• To create, update and delete  operation all Microsoft Dataverse tables from portal pages.
• Rich user experience and integration with third party behavior or application integration.
• The advantage of server side caching which helps to improve performance.

Power Apps Portal provides record based security to individual records by using table permission. For Portal Web API, it has to be enabled in site settings and also configured field level which determines the table fields which can and cannot be modified.

Syntax:

Wrapper Ajax Function :

(function(webapi, $){

function safeAjax(ajaxOptions) {

var deferredAjax = $.Deferred();

shell.getTokenDeferred().done(function (token) {

// add headers for AJAX

if (!ajaxOptions.headers) {

$.extend(ajaxOptions, {

headers: {

"__RequestVerificationToken": token

}

}); 

} else {

ajaxOptions.headers["__RequestVerificationToken"] = token;

}

$.ajax(ajaxOptions)

.done(function(data, textStatus, jqXHR) {

validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);

}).fail(deferredAjax.reject); //AJAX

}).fail(function () {

deferredAjax.rejectWith(this, arguments); // on token failure pass the token AJAX and args

});

return deferredAjax.promise();

}

webapi.safeAjax = safeAjax;

})(window.webapi = window.webapi || {}, jQuery)

Create Web API :

webapi.safeAjax({

type: "POST",

url: "/_api/accounts",

contentType: "application/json",

data: JSON.stringify({

"name": "Sample Account"

}),

success: function (res, status, xhr) {

      //print id of newly created table record

console.log("entityID: "+ xhr.getResponseHeader("entityid"))

}

});

Thanks to Microsoft for contents and pictures.