Archive
[Step by Step] Power Apps portals | Version Control website using Power Platform CLI
In this article, lets see how to version control the Portal website components using Power Platform CLI Portal commands.
What is Version Control
- Version control, also known as source control, is the practice of tracking and managing changes to software code.
- Version control software keeps track of every modification to the code in a special kind of database. If a mistake is made, developers can turn back the clock and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members.
Lets start working with Portal CLI with prerequisites.
Prerequisites:
- A Power Platform environment with Dataverse database
- Create a new Portal app.
Before we jump on to CLI, lets see how portal components can be edited from maker portal.
Edit Portal Website from Maker Portal
Once your Portal application created
- Click on the portal app.
- You will be redirected to your portal website as shown below.
- If you notice, portal website is collection of many components (i.e., Web Pages, Lists, Files, etc…). You can edit the web site by using ‘Edit’ option directly from maker portal.
- You will be redirected to Portal editor and can edit the components.
Challenges with editing Website directly from Maker Portal
As detailed in above section, you can edit the website directly from Maker Portal but at the cost of following challenges.
- Its not version controlled. Meaning, if I want to revert a file with content from last stable release, it not possible with out version control.
- As a Pro developer, you would feel comfortable editing webpage as html file than in the portal editor.
Use Power Platform CLI with portals
Lets see how we can solve versioning using CLI.
- Open a Visual Studio Code and make sure you installed Power Platform Tools extension.
- Open a new ‘Terminal’.
- As a first step, you need to connect to your Dataverse environment by executing following command.
- pac auth create -u {Environment_url}
- Get the list of available Portals by executing following command.
- pac paportal list
- Copy the ‘WebSiteId’ as highlighted above.
- Now download the website components using following command.
- pac paportal download –path [PATH] -id [WebSiteId]
- Website contents gets downloaded and saved locally as below.
- Now, open this folder using VSCode and open the components.
- Lets go ahead and edit the ‘Home’ web page content.
- Upload the modified website components using following command.
- pac paportal upload –path [Folder-location]
- The upload only happens for content that’s been changed. In the above example, since the change is made to a webpage, content is uploaded only for the adx_webpage table.
- Now, lets refresh the portal website and you should see the modified text.
- If you dont see the changes, you can clear the server-side cache as below.
- Navigate to the URL as follows:
<portal_path>/_services/about. - Select Clear Cache.
- Navigate to the URL as follows:
Advantages of CLI for portals development
- We can commit the website components to any of the version control tools like Azure DevOps, GitHub.
- We can now use offline-like capability for portals customization by making changes to the portals content. And once all customizations or changes are saved, upload them to the portal.
- Helps integrate seamlessly with any source control tools, such as “git”
- Easily set up CI/CD pipelines
Limitations
- Portals support for Power Platform CLI is limited to the tables listed here.
🙂
Power Apps Portals | Progressive Web Apps (PWA)
What is a Progressive Web App (PWA):
- PWA at core is a website built using web technologies but that acts and feels like an App.
- Users can install a PWA on any device be it a desktop or mobile from the browser or through app stores.
- Main difference between PWA and Web App is a web app is designed to run inside of a web browser and cannot be installed on a device.
- Users can also pin the PWA app directly to the home screen on their mobile device.
Portals as progressive web apps:
- We can enable a Portal as a progressive web app (PWA), with native app–like look and feel, by using Power Apps portals Studio.
- This capability enables external and internal customers to use a portal as an app.
Steps to build a portal as a progressive web app:
- Connect to Power Apps maker portal.
- Select the Portal App and click ‘Edit’
- Portal opens up in In portals Studio.
- Select Progressive web app icon and set ‘Enable PWA’ option.
- Click on ‘Customize PWA’ to modify App’s details.
- Now click on ‘Browse Website’, which opens up Portal application along with ‘App available’ option.
- Click ‘Install’ to install Portal as a Desktop App.
- Post installation, you would get Portal as Desktop App as below. You have options to pin the App to taskbar or to Start.
Manage offline behavior:
- PWA offers support for a smooth navigation experience when the device being used is offline or disconnected from the internet.
- You can choose the pages within your portal that will be available offline (read-only), and a message page for the rest of the portal capabilities that haven’t been enabled for offline access.
- Under ‘Customize PWA’ pane, click on ‘Manage offline pages’.
- Select the Pages that will be available offline.
Refer documentation for more details.
🙂
Power Apps portals | Query data using portals Web API (Public preview)
Portals Web API:
- The Portals Web API enables building a richer user experience inside Power Apps portals pages.
- We can use the Web API to perform create, update, and delete operations across all Dataverse tables from the portal pages.
- For example, you can create a new account, update a contact, or change the table permissions for a product by using the portals Web API instead of the Portal Management app.
Query data using portals Web API:
Web API operations in portals so far were limited to creating, updating, deleting, associating and disassociating tables. With this public preview, Portals will have the capability to retrieve data using GET requests through portals Web API.
Preview capabilities:
The feature provides the following capabilities during this public preview:
- Query records
- Apply system query options
- Request specific properties
- Filter results
- Order results
- Aggregate and grouping results
- Retrieve a count of rows
- Column comparison
- Retrieve related table records with a query
Refer the Docs link for documentation.
🙂
Power Apps Portal – Multi Language – ‘Invalid website language’ error
Other day, while configuring multi language on Power Apps portal, I was getting following error while adding ‘Hindi’ as new ‘Website Language’.
Reason:
- ‘Hindi’ language was disabled by default in CDS.
Fix:
- From your portal’s ‘Model Driven’ App, go to ‘Advance Settings’, which opens up classic ‘Settings’ sitemap area.
- Under ‘Settings -> Administration -> Languages‘ select the Language which you want to enable and click ‘Apply’.
- Now go to the portal’s ‘Model Driven’ App and you should be able to create new ‘Website Language’ with enabled ‘Language’ (i.e., Hindi).
How Multiple Language works in ‘Power Apps Portal’:
- To enable a new localization (i.e., Language), add a new ‘Localized Content’ record, to every Portal ‘Web Page’.
- ‘Localized Content’ record will have a ‘Portal Language’ lookup of ‘Website Language’ record.
- To add ‘Hindi’ localization to the ‘Web Page’ add a new ‘Localization Content’ record with ‘Portal Language’ lookup set to ‘Hindi’ website language (Refer ‘Fix’ section for how part).
- Make sure ‘Published State’ of ‘Localized Content’ is ‘Published’.
Key Notes:
- By default a ‘Localization Content’ record pointing to base language (i.e., English in my case) gets created when you create a new ‘Web Page’.
- Web Link Sets:
- When a new language is activated , a new set of links are created for the newly activated language.
- Content Snippets:
- When a new language is activated , a new set of Snippets are created for the newly activated language.
- Refer link on usage of ‘Content Snippets’
- If you activate a new language after enabling Portal, the metadata will not be installed automatically for the newly activated language.
- To get the metadata translation for the newly activated language, you must import the metadata translation from the Power Apps Portals admin center.
🙂
Dynamics Portals Styling – Design Forms with rich text and images
Its pretty common requirement in Portals to design the forms with rich text along with images.
One option to achieve this is by adding ‘Web Resources’ with HTML content to Dynamics forms. The downside of using ‘Web Resource’ is that it adds a white space towards the end.
In this article, lets see how we can achieve the styling by leveraging ‘Metadata’.
The Portal Metadata is flexible enough to hold the HTML content. All you need to do is, create a new Metadata for a Section and set the ‘Label’ field with HTML content.
Lets design a simple ‘Registration’ portal form with Logo and Content.
Steps to create a Portal Form:
For this scenario, I am using ‘Contact’ entity and created a new Form by name ‘Registration Form’.
- Open the CRM customization Form and open the ‘Section’, make sure below property is set.
- If this property is unchecked, HTML metadata content, which we are designing in next steps will not be shown on Portal form.
- Save and Publish the CRM form.
- Create a new ‘Entity Form’ and map the ‘Entity Name’ and ‘Form Name’.
- Create a new ‘Web Page’ and map the ‘Entity Form’
- Now, if you browse the ‘Entity Form’ in Portal, it comes as below.
Design the Form with Logo and Content:
Lets beautify this form by adding Logo and Rich text.
- To configure the Logo, first, create a new ‘WEB FILE’ record.
- Note down the ‘Partial Url’. You need to refer the exact value in your HTML.
- Under the ‘Notes’ section of the ‘WEB FILE’, create a new Note and upload the image as an attachment.
- Now lets design the HTML content.
- Open a HTML file using any of the text editor.
- Prepare HTML content as per your requirement
- Once the HTML design completed, open the Portal ‘Entity Form’ which we created in previous section and add a new ‘Entity Form Metadata’ record.
- Set Type as ‘Section’ and in the ‘Label’, paste the HTML content.
- Refresh you Portal screen and you should see the changes.
Note:
- HTML content added to ‘Metadata’ can be moved easily to other environments using Portal Record Movers
🙂
‘Address Suggestions’ in Portals using Esri ArcGIS
In our Dynamics Portals, we got a requirement to show ‘Address Suggestions’ as and when the end user start typing the address.
We implemented the solution by consuming the Esri ArcGIS mapping service, from our Portal’s web page.
‘Entity Form’ with Address Suggestions
In this article lets see how to implement this at a high level.
What is ESRI ArcGIS?
- Its a cloud based mapping and analytics platform.
- For our ‘Address Suggestions’ requirement, we have consumed ESRI ArcGIS’s World Geocoding Service
- World Geocoding Service:
- Its part of ESRI ArcGIS.
- This Service finds addresses and places in all supported countries from a single endpoint.
- The service can find point locations of addresses, business names, and so on.
Steps to fetch ‘Address Suggestions’:
- To fetch the ‘Address Suggestions’, we have used findAddressCandidates operation of ‘World Geocoding Service’.
- findAddressCandidates operation is REST based and takes ‘Input address’ as parameter.
- As an example, to fetch the ‘Microsoft Office’ addresses in ‘Redmond’ the REST URL would be as follows:
https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=Microsoft+Redmond&sourceCountry=USA&category=&outFields=*&forStorage=false&f=pjson
- In the above URL,
- ‘findAddressCandidates’ – Operation name.
- ‘SingleLine’ – Parameter which you need to pass address you are looking for (i.e., Microsoft+Redmond). Use + symbol to combine the words.
- ‘sourceCountry’ – Optional parameter. if provide, results will be specific to provided country code.
- Below is the sample script to call the service from Portal Web Page/Entity Form/ Web Templates.
function GetAddressrecommendations(address) {
var url = https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=”+address+”&category=&outFields=*&forStorage=false&f=pjson;
// To limit the address to ‘United States’ country uncomment below line
// url += “&sourceCountry=USA”;var xhr = createCORSRequest(“GET”, url);
if (!xhr) {
throw new Error(“CORS not supported”);
}
xhr.onload = function () {
var text = xhr.responseText;
// Success and add logic to Parse the Response.
};
xhr.onerror = function () {
alert(“Unable to fetch addresses.”);
};
xhr.send();
}function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if (“withCredentials” in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != “undefined”) {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
How to call the method?
- Call the GetAddressrecommendations function by passing the address you are looking for
- GetAddressrecommendations(‘Microsoft+Redmond’)
Notes:
- Esri ArcGis platform provides both hosted GIS services and a portal with a web UI and APIs for publishing, sharing, and managing content, maps, applications, and users.
- It has both Free and Paid services. Read the documentation before making the decision.
🙂
Dynamics Portals – Web Templates – ‘$ is not defined’ Error
Other day, I was getting ‘$ is not defined’ script error during my ‘Web Template’ load.
From the error, its clear that jQuery file reference was missing in Web Template.
The Web Template has a HTML with Liquid Template and script using jQuery and was rendering with no issues an hour ago and there were no changes made to the Web Template content.
Reason and Fix:
- ‘Use Website Header and Footer’ field was unchecked in ‘Page Template’ which was causing the issue.
- jQuery file would be implicitly available to the ‘Web Template’ when ‘Use Website Header and Footer’ field is checked on ‘Page Template’.
- Save the Page Template
- Clear the portal Cache and issue should be fixed.
🙂
[Code Snippet] Dynamics Portals/ADX – Set ‘Field Requirement’ using script
Below is the code snippet to set the requirement level (i.e., Required/Non-Required) of a field using script in portals. This logic handles all kind of field types including Check boxes.
Set Field As Required:
function SetFieldAsRequired(fieldName) {
if (typeof (Page_Validators) == ‘undefined’) return;
if ($(“#” + fieldName) != undefined && $(“#” + fieldName + “_label”) != undefined) {
$(“#” + fieldName).prop(‘required’, true);
$(“#” + fieldName).closest(“.control”).prev().addClass(“required”);// Create new validator object
var Requiredvalidator = document.createElement(‘span’);
Requiredvalidator.style.display = “none”;
Requiredvalidator.id = fieldName + “Validator”;
Requiredvalidator.controltovalidate = fieldName;
Requiredvalidator.errormessage = “<a href=’#” + fieldName + “_label’>” + $(“#” + fieldName + “_label”).html() + ” is a required field.</a>”;
Requiredvalidator.initialvalue = “”;
Requiredvalidator.evaluationfunction = function () {
var fieldControl = $(“#” + fieldName);
if (fieldControl.is(“span”)) {
var value0 = $(“#” + fieldName + “_0”).prop(“checked”);
var value1 = $(“#” + fieldName + “_1”).prop(“checked”);
if (value0 == false && value1 == false) {
return false;
} else {
return true;
}
}
else {
var value = $(“#” + fieldName).val();
if (value == null || value == “”) {
return false;
} else {
return true;
}
}
};// Add the new validator to the page validators array
Page_Validators.push(Requiredvalidator);
}
}
Set Field As Non Required:
function SetFieldAsNonRequired(fieldName) {
if (typeof (Page_Validators) == ‘undefined’) return;
if ($(“#” + fieldName) != undefined) {
$(“#” + fieldName).closest(“.control”).prev().removeClass(“required”);
$(“#” + fieldName).prop(‘required’, false);for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].id == fieldName + “Validator”) {
// Remove the current field’s ‘Required’ validator from ‘Page_Validators’ array
Page_Validators.splice(i);
}
}
}
}
How to use the functions:
- Above functions can be called from ‘Custom JavaScript’ tab of Portal’s ‘Entity Form’.
- Pass the Dynamics field’s schema name as the parameter to both functions.
- In below example, ’emailaddress1′ is the field name which I want to set the Requirement level.
Refer the article for Portal script syntax’s and usage.
🙂
Dynamics Portals – ‘Record Mover’ and ‘Code Editor’ Tools – XrmToolBox
If you are a Dynamics Portal developer, couple of pain points you would have experienced, are
- Moving configurations from environment to other
- Navigating among multiple screens (Web Pages/Templates/Files etc…) to edit the configurations.
Lets see how these are addressed with below tools from our favorite XrmToolBox
- Portal Records Mover
- Portal Code Editor
Portal Records Mover:
To move the Portal configurations from environment to another, you might have used OOB “Configuration Migration Utility” tool but this tool has limitation as listed below.
- You cannot choose records (For example, only specific Web Templates) as it would export all records for chosen entities.
With the ‘Portal Records Mover‘ tool, now you can pick the sub set of records from Portal entities and you can apply Date filters and many more.
Usage steps:
- From your XrmToolBox, connect to Portal Records Mover tool to your Dynamics instance.
- Click on ‘Load Items’ , which load all Portal related entities.
- From the “Options” tab,
- Apply Date filters, if you want
- Pick the ‘Web Site’, if you have multiple Portals (Custom Portal/Dealer Portal/etc..) installed
Export Records:
- Choose the Portal Entities from left pane, you would like to migrate records from.
- Click ‘Retrieve record’, to load the records from selected Portal entities.
- Pick the records, you would like to migrate.
- Once you completed the record selection, click on “Export Records”
- Choose the location to save the XML file.
- XML file contain the records you selected.
Import Records:
- To import the portal configuration to a Dynamics instance, you must have the XML prepared as mentioned above.
- Click ‘Import records’ button and provide the portal configurations XML file.
Portal Code Editor:
This tool provides an easy way to edit all your Portal configurations in one place.
Note: This tool only works for Dynamics Portals and does not support ADX portals.
Usage steps:
- Connect to Portal Code Editor tool to your Dynamics instance.
- Click on ‘Load Items’ , which load all Portal related entities group by categories (i.e., Web Pages/Entity Forms/…).
- Pick the record you want to update.
- Modify the content and click ‘Save’ from ‘File’ menu.
- ‘Save’ just saves the content in Editor
- To apply changes to your Dynamics instance, click on ‘Apply change to portal’ button
Note:
- Make sure you have the latest XrmToolBox downloaded, if you don’t find these tools.
Thanks to Tanguy TOUZARD for these amazing tools.
🙂
Rajeev Pentyala - Microsoft Power Platform 