Hi, welcome to the Impulz Technologies LLC blog. In this third and final part of the three parts blog post series, I am going to explain the JS code to interact with the Microsoft Dataverse REST API to fetch the accounts table data.

Before going forward let’s quickly recap what we have discussed so far.

Recap

In the first two parts of the blog post we have covered:

1. How to register an application in Microsoft Azure.
2. How to extract different data elements like tenant Id, application id etc. from the Azure portal. These values are required to successfully execute the code within your environment.
3. Theoretical background of how the Azure Active Directory actually works.

If you have not read the previous blog posts, it is highly recommended to read them first from part-1 and part-2.

What we are going to cover today?

Today, we are going to going to consolidate what we have covered so far and apply those concepts in the actual code. This is the scenario we are going to cover in the code today.

• Try to login the user through a silent login API. That is single sign-on (SSO).
• If SSO failed then show the popup to the user to enter the credentials.
• Upon successful login fetch the data from the Dataverse system table ‘Accounts’.

Assumptions

• You are familiar with Angular and specifically the concepts like components, dependency injection and how it works in Angular, services, routes and http client.
• You already know Angular CLI and some of the basic commands.
• JavaScript and HTML concepts like async programming, local storage etc.
• The user going to sign in has an access the accounts table in the Dataverse environment.

From where to download the code?

The code used in this blog post has been published in the GitHub public repository. You can download or clone the code from this repo https://github.com/RealAhmadH/ng-dataverse

You can setup the code by reading the readme file of the repo.

Let’s now review the code.

src/constants.ts

This file is used to store configuration information of the Azure AD and the Microsoft Dataverse environment. You have to fill in the following in order to successfully connect the Dataverse environment:

• AZURE_APP_ID: this is the application identifier which you have configured on your Azure portal.
• AZURE_TENANT_ID: this is the tenant identifier of the Azure AD.
• DATAVERSE_BASE_URL: this is the URL of yours Dataverse environment. You can get this information from the Microsoft Power Apps admin centre.

Within the same file there exists a configuration JSON object required to connect to the Azure environment using the MSAL package. The only required configuration is the client identifier. Rest of the details are optional.

src/app/services/microsoftad.service.ts

In this file the code exists which actually interacts with the Microsoft Azure AD for Single Sign-on (SSO).

Following is the brief description of the code:

Class constructor

• In the constructor of the class, constant object is been passed as a dependency. Constant object contains important configuration information like configuration JSON object, application id, tenant id etc. required to successfully establish a connection with the Azure AD.

Confidential vs Public Client Application

• In the class constructor we initialized an object PublicClientApplication. Microsoft MSAL supports two types of clients: confidential and public. Confidential clients include secure clients like web server applications whereas public client includes desktop, mobile or browser clients. Since, we are using a browser to connect the Azure, that’s why PublicClientApplication object is used to connect to Azure.

ssoSignIn method

• The class instance method ssoSignIn is defined to try to connect the Azure AD first silently (Microsoft account Single Sign-on typically used in every Microsoft apps). If the single sign-on gets failed then it tries to launch the Microsoft login popup and ask the user to enter the credentials.

Scopes and Microsoft Azure AD

Microsoft also issues the authentication token within a single call in response. Azure AD issues token on based of scopes. It is important to understand that you can merge more than one scope within a single call but all the scopes has to be of the same resource we are trying to access. During the sign-in process, we are actually interacting with Microsoft Graph to allow us the access to the user’s profile. Within the same call we can’t ask to issue the access token for the Dataverse because Dataverse is a different Azure resource or API and it is required to repeat the same process to acquire the access token for the Dataverse scope.

Conluding remarks!

This concludes the three parts blog post series. You can apply the same knowledge and ideally the code to other JavaScript frameworks or even the plain JavaScript appkications. Similarly, authentication and authorization works more or less the same for every Azure resource. Ideally, you can extend the same code to other services like Power BI for example.

About Impulz Technologies LLC

Impulz Technologies, is a Silver Certified Microsoft Partner company. We specialize in the implementation, consulting and development of Microsoft Dynamics and Microsoft Power Platform. Impulz Technologies also provide staff augmentation services all across the US. For more information please contact us at 630-540-6302 or email us at info@impulztech.com

The post Connect the Angular with Microsoft Dataverse – Part 3 of 3 appeared first on Impulz Technologies LLC.

Debugging is an essential part of software development. As Microsoft Power Apps is a low code no code approach still sometimes there is need of small JavaScript code snippets for particular events e.g. onChange in Model-driven apps.

In order to debug the code snippet in your deployed power app you can follow the following steps.

1. In the code snippet add debugger keyword in the code where you want to place your debugging point.
2. After reuploading the updated snippet start your app on Google chrome browser and press F12 to open developer tools.
3. When you trigger the event for which the code was written debug point will hit and from there you can debug your JavaScript code embedded in your power app. Use F10 to move to next line and F11 to step into the next function.

Hope you have found it helpful. Cheers.

The post Microsoft Power Apps: Code debugging in Model-driven App appeared first on Impulz Technologies LLC.

As Power Apps (Model-Driven Apps) developers, often we face this scenario of triggering a change of value in one field when a value in another field is modified. In this blog we are going to see how to apply OnChange event in a model driven app field to trigger values in another field.

1. First of all, create a solution and in that solution create a table or add any existing table (here I have created a new table named TestOnChange). Then go to the table and select form options.

2. In Forms option there are multiple form designs but for our case we will use the main one which is usually used for create new records or edit record.

3. Edit the form and you will be on the following screen. From the right-side panel select event tabs and click on Add Library.

4. This will let you include already added JavaScript file which contains the OnChange event code or you can add a new one. In our case we will add a new file in which the logic is written.
Note: You can also add this file under web resources of your solutions before adding from this dialog.

5. The code in the JavaScript file is below where getAttribute refers to the logical name of the field.

Note: To check the logical name of the field you can go to the following tab.

6. After adding the file you will see OnChange option on the event tab. Select the field first on which you will apply the event and click on Event Handler.

7. Set the following properties. Function is the name of the function defined in the JavaScript file which will be called on OnChange event.

8. Once done select the table field which will trigger this OnChange event.

9. Once all steps are done just save and publish your app. Now whenever the Name values is changed the OnChange trigger will update the value in FirstName field as defined the JavaScript function.

The post Model-Driven Apps – Update field based on other field value using OnChange event appeared first on Impulz Technologies LLC.

This blog reflects the approach to connect .Net client console application with Microsoft Dataverse. We will first have to create a connection between Dataverse and our console application. The connection process via API which we followed is explained in this blog divided into three sections.

1. Creating a basic console application with the required NuGet packages
2. Creating client application in Azure Active Directory.
3. Linking Azure client application id with the Power Apps.

1. Creating a basic console application with the required NuGet packages

The NuGet packages we use to create 2the connection are Microsoft.Identity.Client and Newtonsoft.Json.Linq

Authentication

The requirement is to authenticate then allow access. We built the connection through a client token generated on providing sensitive information depending on the authentication library used. Since we used ConfidentialClientApplicationBuilder our requirement to generate client token is (client ID, client secret, Redirecturi and Tenantid). How did we get these secret items will be discussed in the later sections. We store the response and later pass it to a built-in method to acquire token. This part covers Authentication.

Client Configuration

We used HTTP Client to send http request which requires base address to hit. This can be found in PowerApps portal > Developer Resources > WebAPI Endpoint.

The Web API implements the OData (Open Data Protocol). This is an open data protocol to exchange data over the web. The protocol is HTTP based and has been designed with a RESTFUL mindset meaning you use a URI as a base address and HTTP headers to interact from the endpoint of server. The default Web API Whoami is used to fetch the results.

More information about OData can be found on: OData overview – OData | Microsoft Docs

We use HTTP headers in our code they are used for additional communication between the client and the server with an HTTP request or response. We use HTTP Authorization request header to provide credentials that authenticate a user agent with a server, allowing access to a protected resource. We added a connection check which if the connection is successful returns the User ID of user otherwise returns the reason for failure.

2. Creating client application in Azure Active Directory

Before moving on to create a client application, we first need to understand the need for its creations. The answer is simple, to integrate and grant permissions we create a client application in Azure Active Directory (AAD) and later integrate it with our console application. The AAD App is different from the application in Visual Studio. AAD App generates secret keys representing your access level. You can have many applications in an Active Directory. Each application will have a different access level.

Creating client application facilitates authentication and authorization and you can grant access permissions accordingly.

We can control multiple aspects via AAD like Supporting Account Types, Certificates and Permissions. We can configure platforms, which could be android, web, and many more platforms. In short, we can authenticate and authorize easily for a variety of different client types.

Steps to Create an app

To create a client application, we will have to login Microsoft azure portal. Under services search for App Registrations and create a new registration. The registration page will look like the snapshot below:

1. First give a meaningful name to the application.
2. Select which account types to support access. We wanted our app to be accessed in any organizational directory so selected multitenant.
3. The Redirect URI can be added here or later. We added a redirect URI *localhost* and let the Uri decide whatever port is available and connects to.
4. Redirect URI is the location where a user’s client is redirected and sends the security token after authentication.
5. Register

The client application is registered.

Follow the step by step details for registering an app in Azure Active Directory in: Quick start: Register an application with the Microsoft identity platform

Modifications to Integrate with Console App

As we have successfully registered client application in previous section and now, we head to modify some properties in order to integrate our console application with the app just registered.

Integration requires a token and to generate token for client, multiple things are required.

We used ConfidentialClientApplicationBuilder which requires the following parameters to generate a token for authentication (client ID, client secret, Redirecturi and Tenantid).

The client ID shown in the Overview pane is one of the input required by an authentication library used in your application’s code for authentication via token and integration.

For client secret we will head to Manage > Certificates & Secrets and add a client secret. Please note that Client secret values cannot be viewed, except for immediately after creation. Be sure to save the secret value when created before leaving the page since we will be needing this to generate the token.

The Redirect URI that was mentioned in Steps to Create an app while Tenantid can be found after logging into PowerApps portal then Settings > Session Details.

Then switch to Azure portal and head to Manage > Manifest where we can see many properties. Our concern here is allowPublicClient. Set allowPublicClient to true and save.

Lastly in Azure portal, head to Manage > API permissions > Add permission then search for Dynamics CRM and select user_impersonation and add it.

We also granted admin consent for your organization since without admin consent the connection might raise errors.

Now all the necessary modifications have been made for our connection to be built and the client application is successfully created and ready to be integrated in code. But before that the connection still requires one last thing otherwise the connection will be forbidden. This is because we have linked Azure application within our console app but it still isn’t aware of PowerApps so we link Azure client application with PowerApps in the next section.

3. Linking Azure client application id with the Power Apps

To link Azure client application just registered with Power Apps, login to Power Apps > Settings > Admin Centre.

Then head to Environments Section shown on left pane and select the relevant environment and look for Users under Access section.

Then open app users list and add a new app user which requires Business Unit (your organization) and define System Admin role for the app and add your registered client application from Add an app.

In the end, a notification pops confirming that Power Apps is linked with our client application successfully.

The post Microsoft Dataverse Web API using .Net client console application appeared first on Impulz Technologies LLC.