Blog: Web API in Power Apps Portals
Enable Web API

in Power Apps Portals

Author: James Morse
Cloud Developer, FSi Strategies

Application Programming Interface in action

Since portals was purchased from ADX Studio, and then integrated into Power Apps, the platform has lacked customization and integration, limiting it to specific use cases. Fortunately, with the introduction of Web API in Portals, these limitations are lifted. We are now able to use ajax expressions to read/write/create/associate records, as well as call bound actions.

Here’s what we’re reviewing below in detail:
1. Add Site Settings to enable Web API
2. Create an ajax helper file
3. Upload ajax file to Web Files
4. Call on ajax helper in Web Template First, go to Portal Management

From here, navigate to Site Settings:

Now, we will be creating multiple site settings to enable Web API for your table. Create a New Site Setting by clicking “New” at the top of the Site Settings page. Name the setting “Webapi/tablename/enabled“, replacing tablename with the table that you would like to expose to the API. Save and close.

Now, select the fields that you would like to expose. For name, name it “Webapi/tablename/fields“. Under “Value”, you can use an asterisk (*) to expose all fields, or specify your fields and separate them by commas. Save and Close.

The option to Read records via API is in preview, so this last setting will enable this functionality. Name: WebAPI/enableReadOperationPreview, Value: True.

Now we need a way to use all these settings. Microsoft provides an ajax helper file to assist.
Expand the code below:

(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

To upload this to Portals, we will create a new Web File and upload the code as a .txt file in Notes.

The final step – we need to call on this ajax helper function in order to use the API! The best way to do this is to put it in the footer. Every page has a footer, so calling the script from there will allow you to use it on every page of your website. If you don’t wish to do this, you are welcome to call the script on every page that you plan to use Web API.

Navigate to Web Templates, then Footer. Add the script tag and the name (partial URL).

Now, you’re ready to use Web API in Portals!

Building in Power Apps

The world needs great solutions. Build yours faster. Engage with external customers and partners, enable anyone to build responsive websites, & bring all your data together with with model-driven forms, views, lists, charts, and dashboards to offer more value with each interaction. Ask us about Power Apps! FSi Strategies is a recognized Microsoft Gold-Certified Partner , with over 20 years experience; helping our clients successfully leverage the strategic value of technology to achieve their mission. Contact us today to learn more.

Start a conversation today.

Ask us about integrating your tools & platforms together – with architectural coherence and extensibility. Designing, implementing and supporting Modern Workplace technology is what FSi Strategies specializes in. We’ve helped hundreds of businesses implement modern security strategies in support of their missions. We invite you to discover how together, we can leverage the intelligent Cloud for the security and privacy needs of your business.