Archive

Archive for May, 2022

Power Platform CLI | Authenticate environment using device code

For unversed, Microsoft Power Platform CLI is a developer CLI that empowers developers and ISVs to perform various operations related to environment lifecycle, authentication, and work with Dataverse environments, solution packages, portals, code components, and so on.

In this blog post, lets see how to connect to an Environment using Power CLI ‘Device Code’ authentication option.

Using CLI:

  • Open Command Prompt.
  • Execute pac command to make sure the Power Platform CLI is installed on your machine. You get following screen, if CLI is already installed.
  • If not installed, Download and install¬†Microsoft Power Platform CLI.
  • Now to connect to Power platform environment, we can use following pac auth create command by passing either Username & Password or ApplicationID & ClientSecret combination.
pac auth create [--name] [--kind] [--url] [--username] [--password] [--applicationId] [--clientSecret] [--tenant] [--cloud] [--deviceCode]
  • We can also authenticate using ‘deviceCode’, which I will explain in next section.

Authenticate using Device Code:

Now we can also authenticate to an environment by generating a ‘Device Code’ as mentioned in steps below.

  • From console, run following pac auth create command
pac auth create --url https://{your environment}.crm.dynamics.com -dc
  • You would get a notification with ‘Device Code‘, “To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code RXXXXZ to authenticate.
  • Complete the sign in by providing your credentials.
  • You will get following message post successful authentication.
  • Now you can close the browser and good to start executing pac cli commands from console.

Key Points:

  • Currently, Microsoft Power Platform standalone CLI is supported only on Windows 10 and Windows 11.
  • Power Platform Tools for Visual Studio Code is available on Windows 10, Windows 11, Linux, and MacOS.

ūüôā

Categories: PowerApps Tags: , , ,

Power Apps Maker Portal | Create tables with Table hub and new designer

Have you noticed that the Tables in Maker portal got a new a hub view and designer?. If it looks familiar, hub view and designer was only available in Power Apps for Teams app before and now its available in Maker portal too.

Hub view and designer for a table features :

Following is the list of features.

  • Provides an overview of the table subcomponents (i.e., Columns, Forms, Views, Business rules, etc…) in a single view.
  • New columns can be created in-line with in the table as shown below.
  • Click on ‘Edit’ from above screen, will take you to a focused screen where you can Add Columns and Add Data.
  • With appropriate privileges data can be created and updated by using ‘Add data’ option.
  • Fill columns and tab out, the data gets auto saved.
  • Now we can generate an app starting from your table. This will allow you to quickly create and play the app in your browser.
  • Click on ‘Create’ will take you to ‘App Designer’, where you can further configure and Publish the App.
  • Now my favorite of the lot is the ‘Tools‘ menu, where we can directly navigate to Web API links of ‘Table Definition’ and ‘Table data’.

ūüôā

Microsoft Build 2022 | Power Platform updates

In Build 2022 , Microsoft announced an exciting new Microsoft Power Platform product and many new capabilities across Microsoft Power Platform that include:

Please refer the following links for a deep dive.

ūüôā

Power Platform | Power Apps | Creator Kit (Preview)

If you are a beginner or expert in Power Apps Canvas Apps, building a consistent and intuitive user experience is always challenging, as there were no standard guidelines.

Using the Creator Kit (Preview) from Microsoft Power CAT team, now you can seamlessly create consistent and effective user experiences using pre-built controls and components built on the Fluent UI framework.

In this blog post, lets see how to install and use the ‘Creator Kit’.

Prerequisites:

To use ‘Creator Kit’, following Prerequisites must be fulfilled.

  • A¬†Power Platform environment with Dataverse database¬†
  • Power Apps component framework feature enabled¬†(Refer next section on steps to enable).
    • Feature has to be enabled before you import ‘Creator Kit’ solution.
  • System Customizer security role is needed to use the Creator Kit components.
  • A Premium Power Apps license is required to develop and use apps with custom components.

Enable Power Apps component framework feature:

  • Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data when rendered in Power Apps Studio.
  • Hence to add code components to your app, you need to enable the Power Apps component framework feature in each environment.
  • By default, the Power Apps component feature is enabled for model-driven apps but not for Canvas Apps.
  • To enable sign in to¬†Power Apps with ‘System Administrator’ role.
  • Select¬†Settings¬†Settings., and then select¬†Admin Center.
  • Go to the Environment, and click on ‘Settings’
  • From ‘Settings’ screen, navigate to ‘Product -> Features’.
  • Turn on¬†Power Apps component framework for canvas apps, and then select¬†Save.

Assuming all prerequisites are configured, lets proceed with ‘Creator Kit’ installation and usage.

Install ‘Creator Kit’:

  • ‘Creator Kit’ comes as a ‘Managed’ solution and download the solution from here.
  • Connect to Power Apps maker portal and pick the Environment where you want to install the ‘Creator Kit’.
  • Import the solution.

‘Creator Kit’ Components:

Once you imported the ‘Creator Kit’ solution, open the Solution and you would find following components.

Now that we know how to install and the components of ‘Creator Kit’, lets dive in to the details of each component.

Creator Kit Reference App:

  • This canvas app helps as a guide and allows you to learn about each component, recommended best practices for optimal user experience and see the implementation code (Select the¬†Code¬†tab to see the Power Fx formulas used).

Canvas Template App:

‘Canvas Template’ App contain all the reusable components of ‘Creator Kit’. To use the ‘Creator Kit’ components in your own Canvas App, follow the steps.

  • Create a new Solution. I’ve named my solution as ‘Use Creator Kit‘.
  • Open the Solution and add the ‘Canvas Template‘ app which is part of ‘Creator Kit’ managed solution, by using Add existing¬†>¬†Apps¬†>¬†Canvas¬†action in the ribbon.
  • Now open the ‘Canvas Template‘ app by using ‘Edit’ option.
  • You will get following warning popup because the app contain custom code components. Continue by clicking ‘Open app’.
  • Now, create a copy of the app by select¬†File¬†>¬†Save As¬†and enter a new name for the copy. I named my app as ‘Canvas App from Template‘.
  • Click ‘Save’ and the copy will appear in the same solution (i.e., ‘Use Creator Kit’ in my case).
  • Now we have our own App (i.e., Canvas App from Template) to start with, remove the original ‘Canvas Template‘ app from the solution to avoid confusion.
  • Open our ‘Canvas App from Template‘ app and you would find 2 screens (Template Screen and Controls Screen).
  • ‘Controls Screen’ contain all the code components of ‘Creator Kit’ for our development reference. We can select any of the controls and understand the properties which helps while building our screens.
  • ‘Template Screen’ contain placeholders to head start your development.
  • You can customize ‘Template Screen’ as per your requirement and can also add ‘Code Components/Library Components’ installed from ‘Creator Kit’ as needed.

Fluent Theme Designer App:

Use this app to generate a Theme JSON object for styling components consistently. To generate follow below steps.

  • Either open the ‘Creator Kit’ solution which you downloaded and imported or go to ‘Apps’ from maker portal and select the ‘Fluent Theme Designer App’ and ‘Play’.
  • Choose the Primary color, Text color, and Background color values as per your need.
  • Select¬†Export theme¬†from the top-right corner to generate the Power Fx expression version of the Theme JSON, then copy the value from the panel.
  • Save the Theme JSON as a global variable in the¬†OnStart¬†property of your app, with the ‘palette’ code block as a property of the¬†AppTheme¬†object variable.
Set( AppTheme, {
  palette: {
    themePrimary: "#0078d4",
    themeLighterAlt: "#eff6fc",
    themeLighter: "#deecf9",
    themeLight: "#c7e0f4",
    themeTertiary: "#71afe5",
    themeSecondary: "#2b88d8",
    themeDarkAlt: "#106ebe",
    themeDark: "#005a9e",
    themeDarker: "#004578",
    neutralLighterAlt: "#faf9f8",
    neutralLighter: "#f3f2f1",
    neutralLight: "#edebe9",
    neutralQuaternaryAlt: "#e1dfdd",
    neutralQuaternary: "#d0d0d0",
    neutralTertiaryAlt: "#c8c6c4",
    neutralTertiary: "#a19f9d",
    neutralSecondary: "#605e5c",
    neutralPrimaryAlt: "#3b3a39",
    neutralPrimary: "#323130",
    neutralDark: "#201f1e",
    black: "#000000",
    white: "#ffffff"
  }
});

Canvas components:

Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library.

In ‘Creator Kit’ components are defined in the component library called¬†Power CAT Component Library.

Code Components:

App makers can use Power Apps component framework (PCF) to create code components that can be used in their canvas apps.

  • In ‘Creator Kit’, ‘Code Components’ are defined as individual custom controls in the solution.

Hope you got some knowledge on the usage of ‘Creator Kit’ and I highly recommend to explore this.

The best part is its an open source project and you can view the code in the latest version of the ‘Creator Kit’ in the¬†GitHub repository

ūüôā

Categories: PowerApps Tags: , ,

Power¬†Platform¬†| Data source environment variables

Recently, I got a deployment (ALM) specific query from my SharePoint colleague who was exploring Power Platform’s Canvas Apps.

Query:

  • SharePoint team got 3 Sites (i.e., Dev/QA/Prod) and they also use 3 different Power Platform environments for Development, QA, and Production.
  • On Development environment, a Canvas App was built connecting to ‘Dev’ SharePoint site.
  • When the ‘Canvas App’ moved to QA and Production environments using Solution import, it must connect to the ‘QA’ and ‘Prod’ SharePoint sites.
  • Following diagram depicts the topology.

Solution:

  • It’s pretty a common scenario and one option would be post solution import to QA/Prod environments, reestablish the Connection reference manually. This option is time consuming and not intuitive.
  • Other recommended option is “Data source environment variables”. We will see the ‘How’ part in next section.

Data source environment variables:

  • As we know, Environment variables store the parameter keys and values, which then serve as input to various other application objects.
  • Environment variables are now much simpler to work with and can store¬†parameters required to connect to data.

In this article, lets see how to create and consume Data source environment variables in Canvas App.

Configure Data source environment variables:

Create Environment variables:

In this article, I am using SharePoint site to connect from Canvas App.

  • Create a SharePoint site if not exists already and add a list using native ‘Issue Tracker’ template (You can also use any List of your choice).
  • From Power Apps maker portal, connect to Dev environment and create a new solution.
  • Create a new ‘Canvas App’ from the Solution.
  • Now, from Canvas App, go to ‘File-> Settings’, enable the setting to¬†Automatically create environment variables when adding data sources.
  • Add a SharePoint data source and configure the Site and List.
  • Once you add the ‘SharePoint’ data source, you would notice a banner message, indicates Environment Variables were auto created.
  • Click on the ‘Manage them here’ will redirect you to the Solution where you can access the auto created ‘Environment Variables’.
  • That’s all needed to create Environment Variables.

Configure Environment variables during Solution Export and Import:
Exporting Solution:
  • Before exporting the solution, select one of the Environment variables and choose ‘Edit’ and select ‘Remove from this solution’.
    • This is step is important. You will¬†not¬†be prompted for new values during solution import if the environment variables already have either a default value or value present, if not chosen the ‘Remove from this solution‘.
  • Repeat this step for other Environment variables.
  • Export the solution.
Importing Solution:
  • Select the target environment (I.e., QA in my case) and choose import the Solution.
  • You will get following ‘Connections’ pane which will allow you to configure to the QA SharePoint site.
  • You will be redirected Connections screen to establish connection to QA SharePoint site. Once you establish connection, it looks as below.
  • Go back to Solution import process and map the new connection configured in above step.
  • In the next step of import, system will ask you to provide values for the Environment variables (i.e., Site, List).
  • You would not get above Connection reference and Environment Variables panes, if you have not chosen the ‘Remove from this solution‘ option.

This approach eliminates manual step of reestablishing connection post solution import to Target environment.

Important Points:

  • ‘Data Source Environment’ variables doesn‚Äôt¬†require querying environment variables via Dataverse connector or¬†require premium licenses.
  • The Environment variables can be unpacked and stored in source control using DevOps Power Platform tools.
  • We can also use ‘Pre-existing’ data source Environment variables by creating a new ‘Environment Variables’ of ‘Data Type’ of ‘Data source’.
    • Use this option, if you don’t want auto creation of Environment Variables (i.e., By enabling the setting to¬†Automatically create environment variables when adding data sources).

Refer docs for more details.

ūüôā

Categories: CRM

Power Fx | String Interpolation

If you are familiar with C# language’s string interpolation feature now Power Fx does too.

C# String Interpolation Example:
string name = "Mark";
var date = DateTime.Now;

// String interpolation:
Console.WriteLine($"Hello, {name}! Today is {date.DayOfWeek}, it's {date:HH:mm} now.");

In Power Fx, use string interpolation to embed formulas within a text string.

This is often easier to work with and visualize the output than using the Concatenate function or & operator.

Splicing a long string with the ‘&’ operator or ‘Concatenate’ function:

  • Following is an example of splicing a string with ‘&’ operator or ‘Concatenate’ function.
"Hello User : " & User().FullName & " Your Email is : " & User().Email // '&' operator
Concatenate("Hello User : ",User().FullName," ;Your Email is : ",User().Email) // 'Concatenate' function

Using Power Fx String Interpolation:

Above String splicing can be easily done using String Interpolation

  • Prefix the text string with a $ and enclose the formula to be embedded with curly braces { }.
  • To include a curly brace in the text string, use repeated curly braces: {{ or }}.
  • String interpolation can be used anywhere a standard text string can be used

$"Hello User : {User().FullName} Your Email is : {User().Email}"

Few more Examples:

$"2+3 = {2+3}"  
// result: 2+3 = 5

$"{{this is inside curly braces}}" // result: {this is inside curly braces}

With( {x:5, y:7},
      $"Point ({x},{y}) is {Text( Sqrt( x^2+y^2 ), "#.###" )} from the origin" )
// result: Point (5,7) is 8.602 from the origin

With( {FirstName: "John", MiddleName: "Q.", LastName: "Doe"},
      $"{Trim( $"Welcome {FirstName} {MiddleName} {LastName}" )}, we're glad you are here!" )
// result: Welcome John Q. Doe, we're glad you are here!

ūüôā

[Step by Step] Model-driven apps | In-app notifications

Using in-app notification feature (Preview) we can notify Users with in the Model-driven apps. In this article lets learn how to enable the feature and use the in-app notifications with different options step by step.

Enable In-app notifications feature:

  • Connect to Power Apps Maker Portal.
  • Open the ‘Model Driven App’ using ‘Edit in preview’ option.
  • In the App Editor, select ‘Settings -> Upcoming’ and enable the¬†In-app notifications (Preview) as below.

Create a Test User:

  • To test the In-app notifications, create a new user account. This User acts as recipient of notification.
    • Note: If you already have more users in your environment, skip this step and use one of the existing Users as recipient.
  • I’ve created an User named ‘Test User 1’ to send the notifications to.
  • Open the Model driven app in another browser using the Test User account.
  • Next copy the ‘Test User 1’ GUID by opening the User from ‘Advanced Find’. We will use this GUID while creating notification.

As we completed pre-requisites, its time to create notifications.

Creating our first notification:

  • Notification features uses an OOB table called “appnotification”.
  • We create a record in ‘appnotification’ table which turns out to be a notification for targeted User.
  • Each notification row is meant for a single user, identified by the¬†Owner¬†column value.
  • If a notification needs to be sent to multiple users, a record needs to be added for each recipient.
  • The sender controls the recipient through the¬†Owner¬†column.

Following is code snippet is using ‘Client API’ to create a basic notification.

function showBasicNotification() {
    // GUID of User (i.e.,Test User 1 in my case) whom you want to send the Notification to.
    var systemuserid = "0758fd55-c2ca-ec11-a7b5-00224808dd66";
    var notificationRecord =
    {
        "title": "Welcome",
        "body": "Welcome to the world of app notifications!",
        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
        "icontype": 100000000, // info
        "toasttype": 200000000 // timed
    }
    // Create notification record
    Xrm.WebApi.createRecord("appnotification", notificationRecord).
        then(
            function success(result) {
                console.log("notification created with ID: " + result.id);
            },
            function (error) {
                console.log(error.message);                
            }
        );
}
  • Register the showBasicNotification() function on one of the form jscript events (i.e., On Load/On Save/Field_OnChange).
  • For this blog post, I’ve registered script on ‘On Load’ event.
  • Use Browser ‘DevTools’ (F12) to check the successful execution of function.
  • Up on executing the script, end user (i.e., Test User 1) would get a notification as below.

Notification with Action(s):

  • Using “data” tag we can create notifications that include actions, custom body definitions, and custom icons.
  • Following code snippet contain 2 actions (i.e., 2 URLs to navigate to) in Notification.
    • ‘actions’ is an array.
function showNotificationWithMultipleActions() {
    //‚ÄĮNotification‚ÄĮwith‚ÄĮmultiple‚ÄĮactions as center dialog 
    var systemuserid = "0758fd55-c2ca-ec11-a7b5-00224808dd66";
    var notificationRecord =
    {
        "title": "Different Search Options",
        "body": "This is to inform you that you can use following search options",
        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
        "icontype": 100000000, // info
        "data": JSON.stringify({
            "actions": [
                {
                    "title": "Bing",
                    "data": {
                        "url": "https://bing.com",
                        "navigationTarget": "dialog"
                    }
                },
                {
                    "title": "Google",
                    "data": {
                        "url": "https://google.com",
                        "navigationTarget": "dialog"
                    }
                }
            ]
        })
    }
    Xrm.WebApi.createRecord("appnotification", notificationRecord).
        then(
            function success(result) {
                console.log("notification created with multiple actions: " + result.id);
            },
            function (error) {
                console.log(error.message);
            }
        );
}
  • Up on execution, End User gets a notification with 2 navigation actions as below.

Notification with a custom Title and Body:

  • The¬†data¬†field supports overriding the Title and Body simple strings with a limited subset of markdown based.
  • Below is the supported markdown.
Text StyleMarkdown
Bold**Bold**
Italic_Italic_
Bullet list- Item 1\r- Item 2\r- Item 3
Numbered list1. Green\r2. Orange\r3. Blue
Hyperlinks[Title](url)
  • Newlines can be included with the body using¬†\n\n\n\n.
  • Following is a code sample using ‘Markdown’ to customize Title and Body.
    • Under ‘actions’ tag, url is pointing to an existing record.
function notificationWithCustomTitleAndBody() {
    var systemuserid = "0758fd55-c2ca-ec11-a7b5-00224808dd66";
    var notificationRecord =
    {
        "title": "Example of Custom Title and Body",
        "body": "Maria Campbell mentioned you in a post.",
        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
        "icontype": 100000004, // mention (Displays @ symbol)
        "data": JSON.stringify({
            "title": "[Potential Prospect](?pagetype=entityrecord&etn=raj_prospect&id=48f5d750-cbca-ec11-a7b5-00224808dd66)",
            "body": "Here is a [Potential Prospect](?pagetype=entityrecord&etn=raj_prospect&id=48f5d750-cbca-ec11-a7b5-00224808dd66)",
            "actions": [
                {
                    "title": "View record",
                    "data": {
                        "url": "?pagetype=entityrecord&etn=raj_prospect&id=48f5d750-cbca-ec11-a7b5-00224808dd66"
                    }
                }
            ]
        })
    }
    Xrm.WebApi.createRecord("appnotification", notificationRecord).
        then(
            function success(result) {
                console.log("notification created with custom title and body: " + result.id);
            },
            function (error) {
                console.log(error.message);
            }
        );
}
  • Up on execution End User receives notification as below.

Notification with a custom Icon:

  • Within the notification, set¬†iconType¬†to¬†Custom¬†and in the body, include¬†iconUrl¬†with a value pointing to a web resource.
    • “icontype”: 100000005, // custom
    • “data”: “{ ‘iconUrl’: ‘/WebResources/cr245_AlertOn’}”
  • The icon can be either an SVG or PNG file type.
  • Following is the ‘notificationRecord’ object.
var notificationRecord = 
{
  "title": "Welcome",
  "body": "Welcome to the world of app notifications!",
  "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",
  "icontype": 100000005, // custom
  "data": "{ 'iconUrl': '/WebResources/cr245_AlertOn'}"
}
  • Notification with Custom icon looks as below.

Key points on Notification usage:

  • If you don’t specify “ownerid@odata.bind” in ‘notificationRecord’ object, notification will go to the User who created Notification.
  • Notification Polling:
    • In-app notifications uses polling to retrieve notifications periodically when the app is running.
    • New notification are retreived at start of the model-driven app and when a page navigation occurs as long as the last retreival is more than one minute ago.
    • If a user stays on a page for a long duration, new notifications will be retrieved.
  • Notifications appear in the notification center until the recipient dismisses them or they expire. By default, a notification expires after 14 days but your administrator can override this setting
  • You can change in-app notification behavior by setting¬†Toast Type¬†to one of the following values.
Toast TypeBehaviorValue
TimedThe notification appears for a brief duration (the default is four seconds) and then disappears.200000000
HiddenThe notification appears only in the notification center and not as a toast notification.200000001
  • You can change the in-app notification icon by setting¬†Icon Type¬†to one of the following values.
Icon TypeValueImage
Info100000000Info Icon
Success100000001Success Icon
Failure100000002Failure Icon
Warning100000003Warning Icon
Mention100000004Mention Icon
Custom100000005

ūüôā

Categories: CRM