Archive

Posts Tagged ‘Portals’

[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:

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 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.

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.

🙂

Categories: Portals Tags: , ,

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.

🙂

Categories: Portals Tags: ,

Power Apps portals | Query data using portals Web API (Public preview)

November 12, 2021 Leave a comment

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.

🙂

Categories: Portals Tags: ,

Power Apps Portal – Multi Language – ‘Invalid website language’ error

February 1, 2020 Leave a comment

Other day, while configuring multi language on Power Apps portal, I was getting following error while adding ‘Hindi’ as new ‘Website Language’.

Portal_Lng2

Reason:

  • ‘Hindi’ language was disabled by default in CDS.Portal_Lng5

Fix:

  • From your portal’s ‘Model Driven’ App, go to ‘Advance Settings’, which opens up classic ‘Settings’ sitemap area.

Portal_Lng4

  • Under ‘Settings -> Administration -> Languages‘ select the Language which you want to enable and click ‘Apply’.

Portal_Lng6

  • 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).

Portal_Lng7

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’.

Portal_Lng8

  • ‘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).

Portal_Lng9

  • 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.

Portal_Lng11

  • 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’

Portal_Lng10

  • 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.

🙂

 

‘Address Suggestions’ in Portals using Esri ArcGIS

September 15, 2019 2 comments

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.

ESRI_1

‘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.

ESRI_3

  • 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

ESRI_2

  • 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.

Portal_$_1

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.

Portal_$_2

  • 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

April 28, 2019 3 comments

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.

ADXJ_1

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 tools

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.

Portal Mover

  • Once you completed the record selection, click on “Export Records”
  • Choose the location to save the XML file.

Portal Mover - 2

  • XML file contain the records you selected.

Portal Mover - 3

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 Mover - 4

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.

Portal Code Editor

  • ‘Save’ just saves the content in Editor
  • To apply changes to your Dynamics instance, click on ‘Apply change to portal’ button

Portal Code Editor 2

Note:

  • Make sure you have the latest XrmToolBox downloaded, if you don’t find these tools.

Thanks to Tanguy TOUZARD for these amazing tools.

🙂