General availability of Power Apps for Windows

With “Power Apps for Windows”

  • You can find all your canvas and model-driven apps including your Dynamics 365 apps and use them online or offline just like you can on iOS and Android!
  • You can configure model-driven apps to work automatically offline by creating an offline profile. For canvas apps, you can use the LoadData/SaveData functions to create a seamless offline experience.
  • Get device capabilities like camera, microphone, file picker, barcode scanning, geo-location and many others.

This app has been optimized for great app performance and supports the latest advanced feature provided by the Power Platform like the native Dataverse connector, Guest access and AI Builder.

Installing the App

  • Go to the Microsoft Store and install Power Apps for Windows.
  • When the app is installed, open it and sign in.
  • All your canvas and model-driven apps including your Dynamics 365 apps will be shown up as below.

Refer official documentation for more details.

🙂

Categories: PowerApps Tags:

PCF | Using Fluent UI and React | Error during react installation

Other day while building PCF project using Microsoft Fluent UI and React, got an error while installing ‘React’ using following command.

npm install react react-dom @fluentui/react

Reason and Fix:

  • Reason was, React 18 was installed in my machine and Fluent UI will not install since it requires a React version less than 18.
  • To fix the issue run following commands which uninstalls the current version and installs Fluent compatible version of React.
npm uninstall react react-dom @fluentui/react
npm install react@16.8.6 react-dom@16.8.6 @fluentui/react@8.29.0

Please refer Scott Durow article on the same issue.

🙂

Categories: PowerApps Tags: , ,

Power Platform CLI | Pack and Unpack solution using map xml

June 16, 2022 1 comment

Microsoft Power Platform CLI is a developer Command Line Interface, 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 article lets learn how to use Pack and Unpack Solution Commands with map xml file.

Getting started with CLI:

  • There are 2 ways to install and use CLI.
    • Standalone Power Platform CLI :
    • Using Power Platform Tools for Visual Studio Code:
      • Follow steps specified here.
      • Power Platform Tools for Visual Studio Code is available on Windows 10, Windows 11, Linux, and MacOS.

Understanding Unpack and Pack commands:

  • Solutions are the mechanism for implementing application lifecycle management (ALM).
  • Its imperative to version control the Solution components to platforms such as Azure DevOps, Git Hub to maintain healthy ALM.
  • With the help of Unpack and Pack commands we can commit the Solution Components which enables version control.
Using Unpack command:
  • Lets you unpack solution zip files after they’ve been exported to the filesystem.
  • First export the solution to your machine.
    • In my case, I have ‘almplugins_1_0_0_0‘ solution exported and placed in ‘D’ drive.
  • To use ‘Unpack’, open the Command Prompt in ‘Admin Mode’ and run following command.
pac solution unpack -z D:\Practice\CLI\almplugins_1_0_0_0.zip -f D:\Practice\CLI\almpluginsunpacked.
  • Once the command executed successfully, Solution components unpack to “D:\Practice\CLI\almpluginsunpacked” path as specified in unpack command.
    • Note: My ‘almplugins_1_0_0_0.zip‘ solution had only a ‘Plug-in assembly’ and ‘Plugin Steps’ hence you would see only those designated folders.
    • If the solution contains other components like Entities, Security Roles, Flows, etc. other relevant folders gets generated.

Using pack command:
  • Lets you pack files on a filesystem into a solution zip file.
  • Now, lets pack the Solution Components from the almpluginsunpacked folder using following pack command.
pac solution pack -z D:\Practice\CLI\almpluginpacked.zip -f D:\Practice\CLI\almpluginsunpacked.
  • Once the command executed, you would find a new zip folder with name (i.e.,almpluginpacked.zip), specified in ‘pack’ command.

Now that you got some knowledge on usage of unpack and pack. Now lets use them with map xml file.

Why we need map xml:

  • Files that are built in an automated build system, such as plug-in assemblies, are typically not checked into source control.
  • If you open the almpluginsunpacked folder generated by unpack, there will be .dlls which are not supposed to be presented.
  • Also, while packing the solution components using ‘pack’, you would want the latest .dlls from your Plugin VS project to be packed.
  • map xml helps in above 2 scenarios. Lets see the usage of map xml in next section.
<?xml version="1.0" encoding="utf-8"?>
<Mapping>
    <FileToFile map="PFESamplePlugins.dll" to="..\..\src\\Plugins\bin\**\PFE.Sample.Plugins.dll" />

    <FileToPath map="WebResources\*.*" to="..\..\src\WebResources\dist\**" />
    <FileToPath map="WebResources\**\*.*" to="..\..\src\WebResources\dist\**" />
</Mapping>

unpack command with map xml:

  • As my almplugins_1_0_0_0 solution has 2 Plug-in assemblies, I got following 2 folders by executing unpack command.
  • If I go deep in to folders, there are alm-plugins2.dll and almplugins.dll as they were unpacked from almplugins_1_0_0_0 solution.
  • Lets run unpack again with map.xml.
Prepare map xml
  • My Plug-in projects folder structure is as follows.
  • Path of my alm-plugins2.dll will be C:\Users\rajeevpe\Source\repos\alm-plugins-v2\alm-plugins2\bin\Release\alm-plugins2.dll
  • Path of my alm.plugins.dll will be C:\Users\rajeevpe\Source\repos\alm-plugins-v2\alm-plugins\bin\Release\alm.plugins.dll
  • The map.xml structure will be as below
<?xml version="1.0" encoding="utf-8"?>
<Mapping>
    <FileToFile map="D:\Practice\CLI\almpluginsunpacked\PluginAssemblies\**\alm-plugins2.dll" to="C:\Users\rajeevpe\Source\repos\alm-plugins-v2\alm-plugins2\bin\Release\alm-plugins2.dll" />
    <FileToFile map="D:\Practice\CLI\almpluginsunpacked\PluginAssemblies\**\almplugins.dll" to="C:\Users\rajeevpe\Source\repos\alm-plugins-v2\alm-plugins\bin\Release\alm.plugins.dll" />    
</Mapping>
  • Save the map xml file with above content and execute following unpack command.
pac solution unpack -z D:\Practice\CLI\almplugins_1_0_0_0.zip -f D:\Practice\CLI\almpluginsunpacked\. -m D:\Practice\CLI\map.xml
  • This time, map file was considered by unpack command and skipped the generation of dlls in unpack folder location.

pack command with map xml:

As we have seen, unpack with map file would not generate dlls in to unpacked folder. The objective of map file during pack is to consider the latest .dlls from your Plugin VS project location.

Since we already prepared map xml file, we can refer the same in pack command as below.

pac solution pack -z D:\Practice\CLI\almplugins_1_0_0_0.zip -f D:\Practice\CLI\almpluginsunpacked\. -m D:\Practice\CLI\map.xml
  • If you notice, .dlls were mapped (i.e., copied) from plug-in VS projects location and packed in to a zip folder which can imported to target environments.

Hope you gained some knowledge on usage of pack and unpack commands using map xml file. In this article I only considered Plug-ins but map file can be used with Web resources as well.

Following articles provides more details.

Note:

  • Azure DevOps pipeline’s ‘Power Platform Pack Solution’ and ‘Power Platform UnPack Solution’ tasks uses PAC CLI and at the time of writing this article, both ‘Power Platform Pack Solution’ and ‘Power Platform UnPack Solution’ tasks does not support map xml.

🙂

Categories: PowerApps Tags: ,

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.

  • 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