PowerApps Portals - Change Default Landing Page For Portal Users

Hi All,

Welcome to my Power Guide Mentorship Program.

Today, I am going to share a #PowerGuideTip16 for PowerApps Portal Developers, who want to manage the redirection of the Portal default landing page.

Requirement:

Redirect Anonymous Portal User to Login Page and Authenticated Portal Users to Home Page,

Solution:

Option 1 - 
Anonymous User Default Landing Page - Login Page
Authenticated User Default Landing Page - OOB Home Page

Go to Portals > Web Template > Home

Update the code as per the following:

{% if user %}
//if a user is logged in then
// Paste OOB Home web template Liquid Code inside this block
{% else %}

<script>
//if user is not loggedin, redirect user to Login page
window.location.href='~/SignIn';
</script>

{% endif %}





Option 2 - 
Anonymous User Default Landing Page - Login Page
Authenticated User Default Landing Page - Custom Page or other than OOB Home Page

{% if user %}
//if a user is logged
<script>
window.location.href='~/<WebpagePartialURL>';
</script>
{% else %}

<script>
//if user is not loggedin, redirect user to Login page
window.location.href='~/SignIn';
</script>

{% endif %}


Option 3 - 
Sometimes, you might have the requirement to redirect portal users to the same page after login, where he/she left off, even after closing the browser.

To implement this requirement, you need to use the HTML Local Storage feature.

Set Local Storage -

You need to save the webpage name in Local Storage (browser cache) on each webpage load.

For Example - Let say I have a webpage called submit-request (partial url of webpage), which is associated with case entity form. In order to save the webpage name in local storage. I would use following syntax under Custom JavaScript section:

// Store
var getWebpagePartialURL = location.pathname;
localStorage.setItem("webpagename", getWebpagePartialURL); 


Get Local Storage - 

Now, Go to Home Web Template. You need to write the code to get the local storage value in order to know the webpage name that user had accessed last before closing the browser. And redirect the user accordingly.

{% if user %}
//if a user is logged
<script>
// Retrieve local storage value
var lastAccessedPage = localStorage.getItem("webpagename");
if (lastAccessedPage != null && lastAccessedPage != '')
{
window.location.href = '~/'+ lastAccessedPage ;
}
</script>
{% else %}

<script>
//if user is not loggedin, redirect user to Login page
window.location.href='~/SignIn';
</script>

{% endif %}

PowerApps Portals - Lookup Editor Control

Introduction

Hi Folks,

Welcome to my Power Guide Mentorship Program. Hope you all are doing great and staying safe.

Today, I am going to share #PowerGuideTip15, where I'll show you how you can directly update the lookup record on the portal, without navigating away from the Portal page.

There are many business requirements, where a portal user wants to view/update the lookup record.

Though I have already written an article on the same, however in that approach, I am giving a solution to open the portal lookup record in the new tab, where you can edit/update the lookup value.

Can check here.

The drawback of that approach was the user had to navigate away from the main portal page in order to update the lookup record. And it becomes more complex when a user has to update multiple lookup values.
.
To overcome these issues, Today, I am going to share an advanced approach using that, portal users can View/Update the lookup records without navigating away from the main page.

Let's get started...

Requirement

View and Update Lookup record on Portal Entity Forms

Implementation

Step 1 - Download the web template code from my Git Hub Repository

Step 2 - Create Web Templates

1. Portal Lookup Editor - Purpose of this web template is to convert the normal lookup available on the Portal Entity Form into an editable lookup

2. Portal Lookup Template - The purpose of this web template is to open the lookup record in the webpage associated with an entity form (Edit Mode).

Since this web template has to be used on all the webpages (Step 4) that are required to View/Edit the lookup record information. Therefore, we need to create a Page Template as well

Step 3 - Create Site Settings

1. Lookup Editor - Name - The purpose of the site setting is to provide the lookup attributes schema names (in comma separated format) that you want to show in an editable format.

For Example - Let say, I have three lookups: Customer (customerid), Contact (primarycontactid), and Partners(new_customer) on my Case Entity Form. I want to convert these lookups into an editable lookups. Hence, my site setting value would be like:

customerid,primarycontactid,new_customer

2. Lookup Editor - Page - The purpose of the site setting is to provide the webpage partial URL names (in comma separated format) where you want to display/edit the lookup record information.

For Example - Let say, I have three lookups: Customer (customerid), Contact (primarycontactid), and Partners(new_customer) on my Case Entity Form. I want to convert these lookups into an editable lookup. In order to view/edit the lookup records, I have created two webpages and associated them with an entity forms of the respective lookup entities.

• Webpage - Edit Account (Partial URL - 'edit-account') associated with Account Entity Form, will be used to View/Edit the Customer and Partner Lookup record and

• Webpage - Edit Contact (Partial URL - 'edit-contact') associated with Contact Entity Form will be used to View/Edit the Contact Lookup record.

Hence, my site setting value would be like:

edit-account,edit-contact,edit-account

3. Lookup Editor - Role - The purpose of the site setting is to provide the web role names (in comma separated format) to whom you want to enable/disable the lookup editable control feature.

I want, that anyone who is authenticated on the portal or either having Team Lead or Team Manager web role could see the lookup editor control. Hence, my site setting value would be like:

Authenticated,Team Manager,Team Lead

4. Lookup Editor - Icon - The purpose of this site setting is to configure the Lookup Editor Icon based on your business need. By default, this site setting value is 'glyphicon glyphicon-pencil', which displays the 'pencil' icon on the portal lookup fields and indicate that lookup record can be Viewed and Edit both.
However, if you have a requirement to allow portal users only to View the lookup record, then you can change the site setting value to 'glyphicon glyphicon-eye-open

To View/Edit Lookup Record - glyphicon glyphicon-pencil

To View Lookup Record - glyphicon glyphicon-eye-open

Default Value - glyphicon glyphicon-pencil

Important Note-  Make sure, there is no white space in all the Site Setting values.


Step 4 - Create Web Pages and Entity Forms

Webpages and Entity Forms need to be created based on your business requirement.

• One webpage would be required to show an entity form on the portal, where you want to edit your lookup values. In my demonstration, I have created a webpage and associate it with the Case entity form. And case entity form has 3 lookups - Customer, Contact, and Partner.

• This webpage must include the Web Template (Portal Lookup Editor) created in Step 1. 

• Rest other Webpages and Entity forms would need to be created based on the number of editable lookup fields you want to have on the portal. For Example, In my demonstration, I have three lookups. One lookup refers to the Contact entity and rests 2 other lookups refer to the Account entity. Hence, I require 2 more webpages along with 2 entity forms (account and contact).

Step 5 - Demo 

Portal Lookup Editor - Security

1. Portal Lookup Editor Control provides Web Role-based Security. That means you can enable and disable this feature based on the portal web role.

For Example - If you want this control to be enabled only for those portal users who are having Webrole1 or Webrole2, then you can manage it using Lookup Editor - Role Site Setting (mentioned in Step 3). However, if you want to provide a more granular level of security, then configure the Entity Permission and enable the Entity Permission Checkbox on your Entity form. So that unauthorized Portal users would not be able to Edit the Lookup record

2 If you have a requirement to allow portal users only to View the Lookup record, then you need to create your Entity Forms (created in Step 4) in Readonly mode instead of 'Edit mode'. Also, change Lookup Editor - Icon Site Setting value to 'glyphicon glyphicon-eye-open'.

PowerApps Portals - Send Auto Generated Username & Password to Invited Portal Users

Introduction

Hello Everyone,

Hope you all are staying safe and healthy.

Today, I am going to share a very useful #PowerGuideTip14 related to PowerApps Portals Authentication, which will help you to design a process, where you require to automate your PowerApps Portals Authentication.

You might know, Portal Users has following ways to access PowerApps Portals:

Local Authentication: User hits the Portal URL in browser > Register and Can start accessing the Portals through their chosen Username and Password.

External Authentication: User hits the Portal URL in browser > Register through either Social Media Accounts, Azure AD, B2C, B2B account and can start accessing the Portals.

In both the type of authentications, any type of audience is allowed to Register and Start accessing the Portal. However, sometimes you want to restrict your Portal traffic and want to allow accessing the Portal to the Invited users only.

Here comes, the Portal Invitation Process.

Portal Invitation is the process where your organisation decides, who'll access the portal by sending the personal email invitation.

Now, this invitation could be sent to either New Users or your Existing Users (Contacts).

You can have a look at this article to know more about the PowerApps Portal Invitation process.

While sending the Portal Invitation there might be a business need where you might require to send Autogenerated Username and Temporary Password. So today in this article, I am going to share the solution of the same.

Requirement

1. Send Autogenerated Username and Password to the Portals Invited Users.
2. Redirect User to Password Reset Page immediately after the successful login.

Local Authentication

Solution

I have designed a Real-Time Workflow (that you can download from my Git Hub repo) to auto-generate the username and password for the portal users. You can update the workflow steps as per your business need.

Solution Component

Workflow Name: Portals - Auto Generate Username and Password
Trigger Point: On-demand (configure the trigger point as per your business need, like on creating of contact record or you can trigger it on the update of any field also)
Scope: Organisation
Type: Real-Time

This workflow has 4 steps

Step 1- Generate a Unique Temporary Password (OOB Custom Workflow of AdxStudio)
Step 2 - Update Contact record with relevant information, that is required to access the Portals. Like

• Turn On the Login Enabled and Lockout Enabled Field.
• Copy email address from the Email (emailaddress1) field to the Username field

Step 3 - Update the uniquely generated password (Step1) in the Contact record in the Hash format. (OOB Custom Workflow of AdxStudio)
Step 4 - Generate a Security Stamp, which is mandatory to be generated for the generated password and portal login (OOB Custom Workflow of AdxStudio)
Step 5 - Send an Email to User with Username and Password

Pre-requisites to use the solution

1. You need to have PowerApps Portal installed (any portal type) in your Dynamics 365 Instance.
2. Managed Solution (Download it from my Git Hub Repo).

Usage Steps

Dynamics 365:

1. Import the Managed Solution downloaded from Git Hub
2. Open any existing Contact record (must have unique emailaddress)
3. Go To the Flow from the Ribbon Bar
4. Choose Portals - Auto Generate Username and Password workflow from the list
5. Provide the confirmation
6. Open the Portal Contact form > Go to Web Authentication Tab.
7. You'll see the portal authentication-related information has got updated on the form.
8. Check the email or can directly open the email record from Timeline.
9. You'll see the Username (email address) and a temporary password has got generated.

PowerApps Portal:

1. Hit the Portal URL in the browser.
2. Enter the username and password received in the email
3. Once logged In successfully, you'll be redirected to Password Reset Page, where you can reset the password as per your wish.

Note: In order to redirect the user to the Password Reset page immediately after the login, I have written the following script on the Profile Webpage. However, you need to call this code only the first time after the login, not every time. Otherwise, every time when user tried to open the profile page, it'll take the user to the Password Reset page,

May be to do that, you can create a custom field (two option) on Contact entity and update its values to true, as soon as user resets the password (can update the field in OOB Action called- 'Send Password Reset To Contact') and in your Profile webpage, you can put the condition:

If {{user/ firstlogin != 'true'}}

{

window.location.href='/en-US/Account/Manage/ChangePassword/'

}

Live Demo

External Authentication

For External Authentication, if you are allowing customers to register/login on Portal through their Social Media accounts like Yahoo, Gmail, LinkedIn, Twitter, Facebook, etc. Then there is no need to send the autogenerated username and password. Because they already have their username and password for all their social media account.

However, for Azure AD B2C and Azure AD B2B authentication. You need to create the guest user account in your Azure Active Directory. In the normal process, the User chooses Azure AD B2C as a Login option, Sign Up in Azure AD B2C, and then log in to PowerApps Portal. This created a guest user in your Azure AD tenant.

However, if you don't want to allow external users to register on the portal through Azure AD B2C and only want to allow when you send them the invitation then you might need to generate username and password in Azure AD.

Can check this article for more details about Azure AD B2C setup in PowerApps Portals.

In order to automatically create a user in Azure AD B2C, you have only two options available.

either uses Microsoft Graph API or use the Powershell command. As I am always in favour of Low Cede No Code solution, hence I would recommend going with Microsoft Graph API.

Microsoft Graph API can also be triggered based on your business need either through Power Automate or C# code.

I have provided a Power Automate solution that automatically creates a Guest User (Azure AD B2C) in your Azure AD tenant along with Username and Password and sends them the invitation as well.

Pre-Requisites

In order to use this Power Automate Solution, you need to consider following pre-requisites

1. Appropriate License to use Power Automate
2. Download my Power Automate solution from Git Hub Repository.
3. Azure AD B2C setup in Azure and Portals both. Can check this article for more details.
4. Trigger Point to trigger the Power Automate solution. I have kept my Power Automate trigger is Manual, however you can trigger it as per your business need)

Usage Steps

1. Import the Power Automate Solution downloaded from Git Hub
2. Update the Azure AD configurations like Clientid, Secret Key, Tenant ID etc
3. Change the Power Automate Trigger as per your business need.
4. Run the Power Automate

To know everything about Microsoft Graph API, it's setup, and how to call it using Power Automate, Please check my following article and can watch my 365 Saturday session recording as well.

https://arpitmscrmhunt.blogspot.com/2020/05/add-guest-users-in-azure-active.html

https://arpitmscrmhunt.blogspot.com/2020/04/automate-microsoft-teams-integration.html

Demo

Git Hub Repository

Local Authentication - Autogenerate Username & Password

https://github.com/arpitdynamics/Dynamics365Code/blob/master/PortalLocalAutogenerateUsernamePassword_1_0_0_0_managed.zip

Azure AD B2C Authentication - Autogenerate Username & Password

https://github.com/arpitdynamics/Dynamics365Code/blob/master/Portals-AzureADB2CAutogenerateUsername%26Password_20200713142409.zip


Important Points

• This article is just a guidance to autogenerate username & password, I am using contact record Guid for unique temporary password generation> However, if you have a need to generate the temporary password more complex, or in a specific format (including Uppercase/Lowercase/Special Character) or as per your business need. You can use Power Automate as well.
• I have kept Real-Time Workflow and Power Automate Solution On-Demand. Hence, change the trigger point and run it as per your business need.
• Once you import the managed solution (downloaded from git hub) in your Dynamics 365 instance. Real-time Workflow may be available in Draft mode. You need to Activate it after making the configuration as per your organization need.

Hope you find this article useful and helpful to solve your business need.

Stay Tuned for my next #PowerGuideTip15

Cheers