Introduction

Microsoft PowerApps Portals provide us the configuration surface which allows users to add forms to collect data in the portal without custom development. Web Template is a Power Apps entity (adx_webtemplate), included with Power Apps portals, that is used to store template source content. A web template will generally contain Liquid for dynamic content rendering and is the central entity used to integrate Liquid templates with the rest of the Power Apps portals system.

While the most common use cases for Web Templates will be to render HTML, rendering the entire response (by deselecting Use Website Header and Footer) gives you the option of rendering any text-based format you choose. This is where the MIME Type attribute of Web Template becomes relevant. When a Page Template that does not use the website header and footer is rendered, the HTTP response Content-Type header will be set to the MIME type of the associated Web Template. (text/HTML will be used if no MIME Type is provided.).

In this blog, we will see how we can create a Web Template with application/jsonMIME Type to get data using FetchXml and how we can retrieve that JSON data through Ajax request in the script.

Here, we will take the example of filtering Account lookup (which is rendered as a dropdown) based on different Relationship Types field value. So, to retrieve Account entity data we will configure JSON type Web Template and to get the data based on different Relationship Types field value we will require to pass specific Relationship Type to Web Template through query string parameter.

Below are the configurations steps required to retrieve data using JSON type Web Templates,

1. Configure Web Template with MIME Type = application/json. Then add FetchXml and code to generate JSON of retrieved data in Source field of the Web Template as per requirement. For reference find below screen clip,

Get Account JSON Web Template:

Below is the sample code to retrieve Account data using FetchXml and generate JSON of retrieved data which we have added in Source field of GetAccountJSON Web Template:

{% fetchxml accounts %}

<fetchversion=”1.0″output-format=”xml-platform”mapping=”logical”distinct=”false”>

<entityname=”account”>

<attributename=”name”/>

<attributename=”primarycontactid”/>

<attributename=”telephone1″/>

<attributename=”accountid”/>

<orderattribute=”name”descending=”false”/>

<filtertype=”and”>

<conditionattribute=”customertypecode”operator=”eq”value=”{{request.params[‘relationshiptype’]}}”/>

</filter>

</entity>

</fetch>

{% endfetchxml %}

{% if accounts.results.entities.size > 0 %}

{

“results”:

[

{% for account in accounts.results.entities %}

{

“name”:  “{{account.name}}“,

“id”: “{{account.accountid}}”

}

{% unless forloop.last %},{% endunless %}

{% endfor %}

]

}

{% else %}

No data found.

{% endif %}

In above sample code, {{request.params[‘relationshiptype’]}}is added to get relationship type from query string parameter. And in the same way, we can pass multiple parameters and use them in FetchXml.

2. Create Page Template record to get account JSON and then set GetAccountJSON web template in Web Template field of Page Template. Also, uncheck the Use Website Header and Footer checkbox of Page Template as shown below,

Get Account JSON Page Template:

3. After that create Web Page record and set Get Account JSON Page Template in Web Page as shown below. Also, the Partial URL will be useful to retrieve JSON.

Get Account JSON Web Page:

4. Create Entity Permission for the respective entity and add appropriate Web Role in that entity permission to be able to read the respective entity records. In this example, we will create entity permission for Account For reference find below screenshot,

Account Entity Permission:

After all the above configurations, we will be able to retrieve the data from JSON type Web Template using Ajax request in script code. So, we will add the below code in the Custom JavaScript section of Entity Form to retrieve Account data from JSON type Web Template and bind retrieved data in Account lookup,

Entity Form:

Code:

$(function () {

//Get account data

getAccountData();

//Execute on relationship type change

$(‘#new_relationshiptype’).change(function () {

try {

//Get account data

getAccountData();

} catch (e) {

console.log(“onChangeOfRelationshipType :: ” + e.message);

}

});

//Function to get account data

function getAccountData() {

var webTemplateURL = “”;

var relationshipType = “”;

var accountName = “”;

var accountId = “”;

var accountCollection = null;

try {

//get selected relationship type

relationshipType = $(“#new_relationshiptype”).val();

//Clear account field

$(“#parentcustomerid”).empty();

//Add empty option in the account dropdown

$(“#parentcustomerid”).append(‘<option value=”” label=” “></option>’);

//Validate relationship type

if (!isValid(relationshipType)) { return; }

//Web tempalte url to retrieve account url

webTemplateURL = “/getaccountjson/?relationshiptype=” + relationshipType + “”;

//Request to custom page to get account data in json format

accountCollection = getResponse(webTemplateURL);

//Validate account result

if (accountCollection.results.length > 0) {

//Check for each account from account collection

accountCollection.results.forEach(function (account) {

//Check for account name and account id from account collection

if (isValid(account.name) && isValid(account.id)) {

//Get account name

accountName = account.name;

//Get account id

accountId = account.id;

//Append options to account dropdown

$(“#parentcustomerid”).append(‘<option value=’ + accountId + ‘>’ + accountName + ‘</option>’);

}

});

}

} catch (e) {

console.log(“getAccountData :: ” + e.message);

}

}

//Function to execute ajax request

function getResponse(webTemplateURL) {

var response = null;

try {

$.ajax({

type: “GET”,

url: webTemplateURL,

dataType: “json”,

async: false

}).done(function (json) {

response = json;

});

} catch (e) {

console.log(“getResponse :: ” + e.message);

}

return response;

}

//Validate attributes

function isValid(attributes) {

try {

if (attributes != null&& attributes != undefined && attributes != “”) {

returntrue;

}

else {

returnfalse;

}

} catch (e) {

console.log(“isValid :: ” + e.message);

}

}

});

In above code, webTemplateURL = “/getaccountjson/?relationshiptype=” + relationshipType + “”;is the URL prepared to get account data and this URL getaccountjsonis nothing but the Partial URL added on Get Account JSON Web Page. Also, relationshiptype=” + relationshipType + “is added to pass Relationship Type as a query string parameter.

Note: Instead of Home parent page if you want to set any other parent page in Web Page of JSON page then you need to add Partial URL of Parent Page as well in Ajax request i.e. suppose in above example we select Profile page as a parent page instead of Homepage then the URL for Ajax request will be as below,

Get Account JSON Web Page:

Ajax request URL:

webTemplateURL = “/profile/getaccountjson/?relationshiptype=” + relationshipType + “”;

Now, on the portal side, we can see if Relationship Type is not selected then Accountfieldnot listing any account to select,

And, below is the screen clip with Relationship Type selected and filtered accounts listed in Account dropdown,

Conclusion

In this blog, we have seen how we can use JSON type Web Templates in Power Apps Portals.

 

Please follow Source