DEV Community: Danish Naglekar

PVA: Let chatbot start the conversation

Danish Naglekar — Thu, 28 Jan 2021 11:00:00 +0000

In past we have seen how we can embed chatbots on a Power Apps portals or a web page using client-side code and custom styling. We also looked at how to add a chatbot on a WordPress site but all of these bots were created where the chatbot did not initiate the conversation but instead will wait for the users to initiate the conversation. This quickly becomes awkward for the users as they are not aware what to ask the bot and some help from the bot can go long way. This is where letting the bot start the conversation like “ Hi, I am bot. I can help answering your question regarding ### ” will provide directions to the user and have an interactive conversation which will feel natural.

As it has been a while I did not worked with Power Virtual Agent I didn’t get a chance to try out the improvements that was announced back in September, 2020 where we can use a custom code that can enable the bot to initiate the conversation. Link to the Microsoft documentation is here.

In this post we are going to utilize a single page application where we will add our chatbot. First thing we will do is add a button inside our <body> tag that will resemble like a chat icon and upon clicking this button the chatbot will be surfaced. The following is the snippet for adding that button:


<button onclick="openChat()" role="openchatbutton" class="open-button">
    <i class="fa fa-4x fa-comments"></i>
</button>

Next we need to prepare the UI so that we can embed the chatbot:


<div role="openchat" id="chatWindow" class="chat-popup"
    style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
    <div id="webchat-wrapper">
        <div id="webchat-header">Talk to TAB!!</div>
        <div id="webchat" role="main" id="webchat"></div>
    </div>
</div>

We have added the code but without style that won’t appear correctly, so let us add some styling to make sure position, visibility and UX is appropriate with the website design. The following styling needs to be added to your .css file and is only for demo purpose so feel free to change or experiment with it:


#webchat-wrapper {
  position: fixed;
  height: calc(100% - 230px);
  z-index: 9999;
  width: 400px;
  top: 140px;
  right: 30px;
  overflow: hidden;
}
#webchat {
  height: 90%;
}
#webchat-header {
  border-radius: 15px 15px 0px 0px;
  background: #f2f2f2;
  padding: 20px;
}
.chat-popup {
  display: none;
}
.open-button {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

Similar to the process we used in my previous post we will be adding styling to the bot UI itself with the following css:


div[role="form"] {
  background: rgba(255,255,255,0.6);
}  
div[role="status"] {
  border-bottom: 1px solid rgb(230, 230, 230);
} 
div[role="status"] button {
  border-color: rgb(0, 0,0,0.4) !important;
  color: rgb(0, 0, 0) !important;
}

Now, we have completed the design process and we need to add a logic to embed and invoke the chatbot. This is done using the following code:


<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
const styleOptions = {

    // Add styleOptions to customize Web Chat canvas
    hideUploadButton: true,
    botAvatarInitials: 'TAB',
    userAvatarInitials: 'You',
    backgroundColor: 'rgba(255,255,255,0.85)'
};

// Add your BOT ID below 
var BOT_ID = "YOUR-BOT-ID-NEEDS-TO-GO-HERE";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
        if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
            dispatch({
                meta: {
                    method: "keyboard",
                },
                payload: {
                    activity: {
                            channelData: {
                                postBack: true,
                            },
                            //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
                            name: 'startConversation',
                            type: "event"
                        },
                },
                type: "DIRECT_LINE/POST_ACTIVITY",
            });
        }
        return next(action);
    }
);

fetch(theURL)
    .then(response => response.json())
    .then(conversationInfo => {
        window.WebChat.renderWebChat(
            {
                directLine: window.WebChat.createDirectLine({
                    token: conversationInfo.token,
                }),
                store: store,
                styleOptions
            },
            document.getElementById('webchat')
        );
    })
    .catch(err => console.error("An error occurred: " + err));
</script>

As you can see from the highlighted code, we instantiated a variable to hold window.WebChat.createStore method which is then supplied to window.WebChat.renderWebChat method as one of the parameter. This piece of code enables the bot to start the conversation using the Greetings which is a system topic. If you wish to change the message that gets displayed when the bot loads you can change the messages in the Greetings system topic.

Now, the button we added is to show or hide the bot so it is not in the way of the user browsing your website. So initially, the <div> that holds the UI for bot is hidden and click of the button shows the <div> that has the bot. This is accomplished by the following code:


<script>
    function openChat() {
        var chatWindowElement = document.getElementById("chatWindow");
        if (window.getComputedStyle(chatWindowElement).display === "none") {
            document.getElementById("chatWindow").style.display = "block";
        } else {
            document.getElementById("chatWindow").style.display = "none";
        }
    }
</script>

Once you have all the pieces tied together you should have a working chatbot on your website. Below is the demo video of how the bot renders and works when embedded on this demo website:

Hope this helps.

Don’t forget to subscribe to my Power Platform Dev Newsletter

Efficiently use SVG animations in canvas apps

Danish Naglekar — Mon, 23 Nov 2020 14:54:42 +0000

I was looking at easy way to create animations in canvas apps; as I have seen so many community members have been creating beautiful apps using animations. But I didn’t want to spend too much time animating but deliver quick value to the users by building something that not only gets the job done but also looks good.

I had seen some post which were focused on just one svg images but none of those images fit my use case. I wanted to find a process to use any svg image, tweak it to my liking and get it done. As said earlier, I did not want to spend a day creating animation. I even went down a path of learning to animate svg; though it was cool but was time-consuming.

Then I found an easy way.

First download any svg image you would want to use. I normally go to https://icons8.com or https://www.iconfinder.com search for the icon that would fit my use case and look for svg images only. Once you have found the right svg image; download it locally. Then comes the fun part – animating it. For that I stumbled upon a nice svg animator website called https://app.svgator.com. Sign up for this website and it will guide you through the tour of the website. Read this blog on more details on how to use SVGator. But I will show you a quick demo as well.

I am using the the below image for animating in this example. As I cannot upload svg image here but if you want to get the similar image you can follow this link.

Once you have the image, head over to SVGator and click on New Project. It will then ask you to upload your SVG file. Now, select the part of the image that you want to animate. Below that is a timeline control; and there you will find “Add animation” button. Clicking that will show you all the animations available for the type of part you have selected. In this case when you select path you get lot of animation properties. We will select “Rotate”.

Now a keyframe will be added to the timeline. Put your timeline indicator at 3 sec. mark; right click and duplicate the keyframe. Edit “Rotate” under Transform section on the right-hand panel as shown in the following image:

Once done you can run the animation by using the play button at the top bar next to you profile icon. This will result in the following animated image:

Using the Export button; you can export it in CSS that will download the svg file. Copy the contents of that svg file on an image property of an image component in canvas app using the following format:


"data:image/svg+xml,"&EncodeUrl("<svg id='eclasfwtqu7q1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
    viewBox='0 0 80 80' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'>
    <style>
        <![CDATA[
        #eclasfwtqu7q4_tr {
            animation: eclasfwtqu7q4_tr__tr 3000ms linear 1 normal forwards
        }

        @keyframes eclasfwtqu7q4_tr__tr {
            0% {
                transform: translate(39.999999px, 39.950002px) rotate(0deg)
            }

            100% {
                transform: translate(39.999999px, 39.950002px) rotate(360deg)
            }
        }
        ]]>
    </style>
    <g id='eclasfwtqu7q2'>
        <g id='eclasfwtqu7q3'>
            <g id='eclasfwtqu7q4_tr' transform='translate(39.999999,39.950002) rotate(0)'>
                <path id='eclasfwtqu7q4'
                    d='M64.700000,40C64.700000,39.700000,64.700000,39.400000,64.700000,39.100000L74.800000,35.800000L70.600000,23L60.500000,26.300000C60.200000,25.800000,59.800000,25.300000,59.400000,24.800000L65.700000,16.200000L54.800000,8.200000L48.500000,16.800000C47.900000,16.600000,47.300000,16.400000,46.700000,16.200000L46.700000,5.600000L33.300000,5.600000L33.300000,16.200000C32.700000,16.400000,32.100000,16.600000,31.500000,16.800000L25.200000,8.200000L14.300000,16.100000L20.600000,24.700000C20.200000,25.200000,19.900000,25.700000,19.500000,26.200000L9.400000,22.900000L5.200000,35.800000L15.300000,39.100000C15.300000,39.400000,15.300000,39.700000,15.300000,40C15.300000,40.300000,15.300000,40.600000,15.300000,40.900000L5.200000,44.200000L9.400000,57L19.500000,53.700000C19.800000,54.200000,20.200000,54.700000,20.600000,55.200000L14.300000,63.800000L25.200000,71.700000L31.500000,63.100000C32.100000,63.300000,32.700000,63.500000,33.300000,63.700000L33.300000,74.300000L46.800000,74.300000L46.800000,63.800000C47.400000,63.600000,48,63.400000,48.600000,63.200000L54.800000,71.800000L65.700000,63.900000L59.400000,55.300000C59.800000,54.800000,60.100000,54.300000,60.500000,53.800000L70.600000,57L74.800000,44.200000L64.700000,40.900000C64.700000,40.600000,64.700000,40.300000,64.700000,40ZM71,46.100000L68.700000,53.200000L59.200000,50.100000L58.600000,51.100000C58,52.200000,57.200000,53.200000,56.400000,54.100000L55.600000,55L61.500000,63.100000L55.400000,67.500000L49.500000,59.400000L48.500000,60C47.400000,60.500000,46.200000,60.900000,45,61.100000L43.800000,61.400000L43.800000,71.400000L36.300000,71.400000L36.300000,61.400000L35.100000,61.100000C33.900000,60.800000,32.700000,60.400000,31.600000,60L30.500000,59.500000L24.600000,67.600000L18.500000,63.200000L24.400000,55.100000L23.600000,54.200000C22.800000,53.300000,22.100000,52.300000,21.400000,51.200000L20.800000,50.200000L11.300000,53.300000L9,46.100000L18.500000,43L18.400000,41.800000C18.400000,41.200000,18.300000,40.600000,18.300000,39.900000C18.300000,39.200000,18.300000,38.600000,18.400000,38L18.500000,36.800000L9,33.900000L11.300000,26.800000L20.800000,29.900000L21.400000,28.900000C22,27.800000,22.800000,26.800000,23.600000,25.900000L24.400000,25L18.500000,16.900000L24.600000,12.500000L30.500000,20.600000L31.600000,20.100000C32.700000,19.600000,33.900000,19.200000,35.200000,19L36.400000,18.700000L36.400000,8.700000L43.900000,8.700000L43.900000,18.700000L45.100000,19C46.300000,19.300000,47.500000,19.700000,48.600000,20.100000L49.700000,20.600000L55.600000,12.500000L61.700000,16.900000L55.800000,25L56.600000,25.900000C57.400000,26.800000,58.100000,27.800000,58.800000,28.900000L59.400000,29.900000L68.900000,26.800000L71.200000,33.900000L61.700000,37L61.800000,38.200000C61.800000,38.800000,61.900000,39.400000,61.900000,40.100000C61.900000,40.800000,61.900000,41.400000,61.800000,42L61.500000,43L71,46.100000Z'
                    transform='translate(-39.999999,-39.950002)' fill='rgb(0,0,0)' stroke='none' stroke-width='1' />
            </g>
            <path id='eclasfwtqu7q5'
                d='M40,26.800000C32.700000,26.800000,26.800000,32.700000,26.800000,40C26.800000,47.300000,32.700000,53.200000,40,53.200000C47.300000,53.200000,53.200000,47.300000,53.200000,40C53.200000,32.700000,47.300000,26.800000,40,26.800000ZM40,50.200000C34.400000,50.200000,29.800000,45.600000,29.800000,40C29.800000,34.400000,34.400000,29.800000,40,29.800000C45.600000,29.800000,50.200000,34.400000,50.200000,40C50.200000,45.600000,45.600000,50.200000,40,50.200000Z'
                fill='rgb(0,0,0)' stroke='none' stroke-width='1' />
        </g>
    </g>
</svg>")

After adding the code in canvas apps it would look like below:

Now, if you want the image to keep looping then you have to change one more property in SVGator. This is shown in the following screenshot:

Hope this helps you create some nice animations.

Don’t forget to subscribe to my Power Platform Dev Newsletter

Changing the owner of Canvas Apps & Flows

Danish Naglekar — Tue, 06 Oct 2020 10:00:00 +0000

Your colleague created a Canvas Apps and bunch of Power Automate Flows; but then he/she left the organization without sharing the canvas app and flows. Even though you are a system admin you find out that you do not have rights to edit or share the canvas apps and flows owned by your colleague who left. Or if you were using ALM process using Power Platform Build Tools in Azure DevOps and the canvas app that was deployed is now owned by your DevOps Admin. Whatever the case – Worry not!! Power Apps have provided bunch of PowerShell scripts for us to work with.

Before we start

First, we need to install the required Power Shell modules. So, open your Windows PowerShell ISE in admin mode.

Copy, paste the below commands in the scripting area pf Windows PowerShell ISE to install the required Power Shell modules.

Install-Module Microsoft.PowerApps.Administration.PowerShell -Force Install-Module Microsoft.PowerApps.PowerShell -Force -AllowClobber Install-Module -Name AzureAD -Force

Run the command by using the Run Script button or pressing F5 on your keyboard.

Change owner of canvas app

Once you have installed the required modules. Let us now look into the process of changing the owner of canvas app. To change the owner, you will need the App Id and Environment Id.

Getting the environment id

To get the environment id you have to login to make.powerapps.com and choose your environment from the environment selector option. Once the page loads with the environment you selected observe the URL. It will be something like: https://make.powerapps.com/environments/12346be2-f047-1234-1234-abcd4d0c1234/home. The GUID after environment is your environment id. Copy and save this id as we will need it later.

Getting canvas app id

Using the environment id, you retrieved above create a new script in Windows PowerShell ISE and copy, paste the below command.

Add-PowerAppsAccount Get-AdminPowerApp –EnvironmentName '12346be2-f047-1234-1234-abcd4d0c1234'

Run the command using F5. After the command fully executes you will see list of all the canvas apps created in this environment (as shown below). Find your app and copy the GUID of your app which is shown as AppName in the list.

Canvas app Owner Change

Now, time to change the owner. As this is an administrative operation you need to be either Global Admin or Dynamics 365 admin. For more information on permissions, read the official MS Docs.

Copy, paste the below command in a new script in Windows PowerShell ISE. This command will assign yourself as the owner of the app.

Add-PowerAppsAccount Set-AdminPowerAppOwner –AppName '4321fda5-abcd-4321-12bd-1234898a4321' -AppOwner $Global:currentSession.userId –EnvironmentName '12346be2-f047-1234-1234-abcd4d0c1234'

If you want to assign it to a user other than yourself then you need to use User’s Object Id from Azure. Execute the following command that will get the user id from Azure and add the provided user email address as the owner on the App:

Connect-AzureAD #Replace this with a correct email address $emailAddress = "user@demo.onmicrosoft.com"; $userID = Get-AzureADUser -ObjectID $emailAddress | Select-Object ObjectId Set-AdminPowerAppOwner –AppName '4321fda5-abcd-4321-12bd-1234898a4321' -AppOwner $userID.objectId –EnvironmentName '12346be2-f047-1234-1234-abcd4d0c1234'

Change the owner of Power Automate flow

After owner of the app has been changed; time to now look at how to change the owner of the Flows. There could be multiple flows assigned to that user so you would want to loop through all the Flows that belong to that particular user and reassign them to you. Below code snippet will allow you to do that.

Add-PowerAppsAccount Connect-AzureAD #Replace this with a correct email address $previousUserEmailAddress = "user@demo.onmicrosoft.com"; $previousUserID = Get-AzureADUser -ObjectID $emailAddress | Select-Object ObjectId Write-Host "Previous User Id: "$previousUserID.objectId #Replace this with your environment id $environmentName = '12346be2-f047-1234-1234-abcd4d0c1234' $flows = Get-AdminFlow –EnvironmentName $environmentName | Select-Object FlowName, DisplayName foreach($flow in $flows){ try{ $flowOwners = Get-AdminFlowOwnerRole –EnvironmentName $environmentName –FlowName $flow.FlowName | Select-Object PrincipalObjectId, RoleId foreach($flowOwner in $flowOwners){ Write-Host "Identifying: "$flow.DisplayName" | "$flow.FlowName if($flowOwner.PrincipalObjectId -eq $previousUserID.objectId){ Write-Host "Changing the owner" Set-AdminFlowOwnerRole -PrincipalType User -PrincipalObjectId $Global:currentSession.userId -RoleName CanEdit -FlowName $flow.FlowName -EnvironmentName $environmentName Remove-AdminFlowOwnerRole -RoleId $flowOwner.RoleId -FlowName $flow.FlowName -EnvironmentName $environmentName } Write-Host "---" } } catch [System.Exception]{ Write-Host $\_.Exception.Message } }

Make sure to change the values on the highlighted rows above. And as we did for canvas app instead of using $Global:currentSession.userId you can use any user’s object id from Azure.

Hope this helps.

Don’t forget to subscribe to my Power Platform Dev Newsletter

Add Power Virtual Agent Chat Bot on WordPress site

Danish Naglekar — Wed, 02 Sep 2020 15:52:54 +0000

In my previous post I have explained how to style you chat bot when adding it on custom website or portals. But I always wondered can I add chat bot on a WordPress site, and I was able to find the answer to that question. So, let us see how we can achieve that. In this post I am only showing how to add bot to a WordPress site. To understand the styling refer to my previous post.

Before we begun, build your bot using Power Virtual Agent; also ensure that you either have managed WordPress or if you are using WordPress.com then you need Business Plan or above. Next you need to install Head and Footer Scripts Inserter plugin. Once you have these prerequisites then you can move forward. I will be using a managed WordPress site to do my changes.

Construct your page

You can pick an existing page but before you do this I would recommend to add a new page so you can test your bot before adding the code on your existing page.

After you add a page application will navigate you to the page editor. On this editor switch from Visual Editor to Code Editor (as shown below). Add the code provided below, and publish/update the page.

<!-- Chat Bot -->
<button onclick="openChat()" role="openchatbutton" class="open-button">
 <i class="fa fa-4x fa-comments"></i>
</button>
<div role="openchat" id="chatWindow" class="chat-popup" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
 <div>
  <div id="webchat" role="main"></div>
 </div>
</div>

Add Scripts

Now let us add appropriate scripts. To do so, from the Settings menu; go to Script Inserter (as shown below).

On this page, you will see few text blocks with two section; one for Head section and another for Footer section. Now add the following scripts in appropriate textblocks.

In the Head section on second text block add the following script.

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

In the Footer section on first text block add the following script and replace the highlighted code with your own Bot Id.

<script>
    // Only for Power Apps Portals
    const styleOptions = {

        // Add styleOptions to customize Web Chat canvas
        hideUploadButton: true,
        botAvatarInitials: 'TAB',
        userAvatarInitials: 'You',
        backgroundColor: 'rgba(255,255,255,0.85)'
    };

    // Add your BOT ID below 
    var BOT_ID = "YOUR BOT ID";
    var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

    fetch(theURL)
        .then(response => response.json())
        .then(conversationInfo => {
            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({
                        token: conversationInfo.token,
                    }),
                    styleOptions
                },
                document.getElementById('webchat')
            );
        })
        .catch(err => console.error("An error occurred: " + err));
</script>

As you can see we have defined the background color to the bot in the above script but if you want to add more styling to your bot as well as your buttons then you need to add some css. To do that you need to navigate to Appearance > Customize. This will launch the customizer screen; on this screen if your theme permit you will see an option Additional CSS (or some thing similar depending on your theme), click on it. This will show a CSS editor text block; add following css in this text block, and click Publish.

div[role="form"] {
  background: rgba(255,255,255,0.6);
}  
div[role="status"] {
  border-bottom: 1px solid rgb(230, 230, 230);
} 
div[role="status"] button {
  border-color: rgb(0, 0,0,0.4) !important;
  color: rgb(0, 0, 0) !important;
} 
#webchat {
    position: fixed;
    height: calc(100% - 230px);
    z-index: 9999;
    width: 400px;
    top: 140px;
    right: 30px;
    overflow: hidden;
}
.chat-popup {
    display: none;
}
.open-button {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

Once all these steps are complete you can navigate to the page you added to see a button surfaced on the top-right corner. Clicking that button should show your bot window. To check out the demo click here.

To check out live demo I have kept the page still available on my wife’s website; so go to http://coffeecompasscreations.com/test-bot/.

Have fun chatting!!

Making Canvas Apps solution aware

Danish Naglekar — Mon, 24 Aug 2020 13:08:45 +0000

In this blog, we are going to look at two methods to make an existing Canvas App solution-aware. But before we start let us briefly cover what does “solution-aware” means? When you create your app directly from the App section on make.powerapps.com they get created outside of a solution. To deploy them from one instance to another you will have to export it from canvas apps details page. Now, when you want to automate your deployment or even keep all components together you might want to add them into a particular solution. Even though you may have created the app outside of a solution there are ways to make them solution-aware; or in other words make them part of a particular solution.

When you go to canvas apps details page currently you do not see list of all solutions that a particular app is part of. If you like this idea then vote for this idea.

As stated earlier as far as I know there are two ways of doing it. If you have any other way please let me know and I will add it to this blog (credits will be given to you).

1. Out of box way

Open your desired solution
From the ribbon (menu) select Add Existing > App > Canvas App. This will open a sidebar with list of existing canvas apps
There are two tabs on this sidebar. Select “Outside solutions”. Click on this tab.
Select your app and click “Add”.

This tab will present you with the list of all canvas apps that are not part of any solution. Adding it here will make them part of Common Data Service.

Demo:

2. Copy existing app to new app

Now, most of the time first method should work. But in case the app doesn’t show up in the list of “Outside solutions” there is another way to make them solution-aware.

Open your desired solution
Create a new app. From the ribbon (menu) select New > App > Canvas App > (either Phone-form or tablet-form). Provide your desired (temporary name), save and close this app.
Go back to your existing app which is outside the solution and export it. Save the file locally.
Use the import feature and with the above downloaded file start the import process.
Here map the importing canvas app to your newly created (temporary name) solution-aware canvas app.
Click on Import.

Demo:

Hope this helps.

Don’t forget to subscribe to my Power Platform ProDev Newsletter

Create Application User in Dataverse

Danish Naglekar — Mon, 10 Aug 2020 11:47:28 +0000

During integration there is always a need to perform authentications with several systems/applications; in this blog we are interested in Dataverse and while you can create an Office 365 user with username/password and configure it in Dataverse; it will consume a license. And if multi-factor authentication (MFA) is setup for that particular user then authentication might be little difficult. That is why Microsoft enabled users to create an application user that uses service principal based authentication.

To create application user you need an active Azure subscription and a Dataverse license. The process is divided into two pieces: one register an App in Azure and second create user in Dataverse.

App Registration in Azure

Once you log into Azure Portal, search “App registrations” in the search box. On the App Registrations page, click New from the menu bar and you will be taken the registration page. On this page provide the name of your name and keep all other options as default. Click Register; this will take you to the Overview page.

On the overview page, you can find the tenant id, application id. Copy these ids as we will be needing them later.

Now, we need to create a client secret which will be used during authentication. To create the client secret, click on “Certificates & secret” on the left blade, then under section “Client secrets” click on New client secret. This will pop-out a modal for you to enter your description and expiration. Enter a description that you can remember and choose “Never” for Expires. The system will create a random client secret for you. Please copy and save the secret as this will be the only time you will see it.

At this point you should have tenant id, application id and client secret. But, we need to provide access to different APIs. To do so, click on “API permissions” on the left blade, then click on Add Permission. Under Microsoft API, choose Dynamics CRM ; and under permission check user_impersonation ; click Add permissions.

Similarly you can add more APIs, like for Power Platform Service Connection in Azure DevOps you need to add PowerApps Runtime Service. Once you have added all the APIs, you will need to grant admin consent to those APIs. If the Grant admin consent is disabled then you will need to reach out to the Azure Admin to provide the consent. Finally the API permission page should look like below.

Creating user in Dataverse

Now, head to your Dataverse environment and go to Settings > Security > Users. Make sure to change the view to Application Users. Once on that view click on “ New “. If “User” form loads then change it to “Application User” from the form selector. On this page enter your preferred username; something like integration.admin@yourdomain.com. Now, paste the copied application id from Azure on the Application ID attribute; enter the fullname and email address (can be same as username). Save the form – even though Azure Object ID is required it will let you save – and system should populate “Application ID Uri” and “Azure AD Object ID”.

Don’t forget to provide proper security role to this user.

Now, you can use this user to authenticate using Service Principal; for that you will need Application Id and Client Secret we had copied from Azure.

Hope this helps.

Don’t forget to subscribe to my Power Platform Dev Newsletter

Authoring version in Canvas Apps

Danish Naglekar — Mon, 03 Aug 2020 13:07:58 +0000

Recently I came across an ability to change the authoring version of Power Apps Studio in Canvas App. So what exactly is authoring version?

When you edit a Canvas app from make.powerapps.com you are working with Power Apps Studio or some times also referred to as Authoring tool; where you build you apps. Microsoft keeps rolling out updates to this authoring tool on a regular basis. You can check out the history of released versions here. So, authoring version is nothing but the version you are using to create your app in the Power Apps Studio.

The feature I stumbled upon is the ability for us to change the authoring version of the Power Apps Studio and I am not sure if it already existed before or not but I found it useful as sometimes you want to keep using the old version just because you might not be ready to upgrade. But when you are ready, you can just hop in here and upgrade to latest version. When to upgrade would solely depend on the features that are rolled out in new version and your decision (obviously).

So how do you change it? First, open any of your existing canvas app in the Power Apps Studio using the ‘ Edit ‘ button. Under File menu, you will find ‘ Account ‘ as an option; click that and your screen will look like below.

Click on the link that says “ Change authoring version ” as highlighted in above image. This will display a popup with list of versions; one would be the recommended version. Select your preferred version and click the button that states “Reload + apply version”. This will close the current app and reopen in edit mode with the updated version that you selected.

To verify if the changes were applied you can go to “ Account ” option under File and verify the version as shown below.

Hope this helps. Keep PowerApp’ing

Don’t forget to subscribe to my Power Platform Dev Newsletter

Getting Auth Token in Node JS without msal library

Danish Naglekar — Sun, 26 Jul 2020 21:15:59 +0000

In my current project, we had a need to build a Node JS app that will authenticate with an App Registration client id and client secret. First thing that came into my mind was to use msal library. But I hit a snag due to CORS issue and there was very little I could do with the code as it was a boiler plate code and changes were limited.

So, I went to the basics of Web Api call from JavaScript to authenticate with App Registration. For this I use the request object and the code is as below.

const getAuthToken = async function() { let config = require(\_\_dirname + "/../config/config.json"); var request = require('request'); var options = { 'method': 'POST', 'url': 'https://login.microsoftonline.com/3bd27ef8-8d38-4656-86d2-5f0d90a73981/oauth2/token', 'headers': { 'Authorization': 'Basic ' + new Buffer(config.clientId + ":" + config.clientSecret).toString('base64'), 'Content-Type': 'application/x-www-form-encoded' }, form: { 'grant\_type': 'client\_credentials', 'resource': 'https://analysis.windows.net/powerbi/api' } }; return new Promise( (resolve, reject) => { request(options, function (error, response) { if (error) { reject(error); } resolve(JSON.parse(response.body)); }); } );}module.exports.getAuthenticationToken = getAuthToken;

You will notice that the config entries are defined in config.json file. Then we define request object and configure the options object. In this options object we define the method, url and headers needed along with the form. Because this is an authentication request, we need to supply the following headers:

Authorization which will be basic authentication with username and password encoded in base64.

Content-Type will be application/x-www-form-encoded

We also need to pass the body as a form; as highlighted in the code. If you are going to use the token retrieved for some other request then need to pass the request domain in the resource. Under form you should also specify grant_type as client_credentials.

This module returns a Promise object by parsing the response body; as highlighted on the code.

Hope this helps.

Don’t forget to subscribe to my Power Platform Dev Newsletter