Getting FormContext in Power Apps Custom Component framework–Gotchas!

Debajit's Dynamic CRM Blog

Before I proceed further some disclaimers here. If you are thinking from the title that I have been able to resolve the problem completely, unfortunately it’s not. My approach works for certain scenarios and not for all scenarios and I will explain where it works and where it doesn’t. And this is of the time I am writing this blog. Very soon Microsoft may release something much simpler.

Ever since I wrote the article on in-depth walkthrough of Power Apps custom control, I have been flooded with questions and one of them was – “How do I get the formContext inside my custom control code so that I can interact with other attributes on the form?”. And in the series of blogs, I have used Xrm.Page construct to access some attributes on the form and as we all know, it has been deprecated. Honestly when I used Xrm.Page I…

View original post 822 more words

Advertisements

How to – Add Style to Custom Component in PowerApps Component Framework

Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

  • Open ControlManfiest.Input.xml and specify the CSS file to be referred.

  • Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

  • Edit the index.ts file and add the class to the label

  • Edit the CSS file

  • Edit the version number in case of updating the existing control in ControlManifest.Input.xml

  • Followed by the build command
  • npm run build


  • After the successful build, we can see the CSS added in the out folder for the component


  • Run the MSBuild command to generate the new solution zip files



  • Import the managed solution.
  • Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..

Step by Step – Create a very simple PowerApps Custom Component to show the GUID of the record

Go through below articles to get a better understanding

Below is the quick step by step guide to get started (sort of Hello World example) 

  • Install NPM (that comes with Node.js)

https://nodejs.org/en/

http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi

  • Install Visual Studio 2017 or later or Download .NET Core 2.2 along with Visual Studio Code.
  • Create the new folder for the project, and in Developer Command Prompt for VS 2017 navigate to the folder and run the below command to create a new component project

pac pcf init

– -namespace <namespace for the component>

– -name <name of the component>

– -template <component type>


It adds the following files in the folder.


  • Next run npm install command to install the project dependencies.

  • Open the ControlManifest.Input.xml file created inside the folder created with the control’s name.

  • Here we have opened it in Visual Studio Code, for this simple example purpose let us not change the default values.
  • Open the index.ts which wherein we’d be writing code for our custom control

  • Add the following line of code to add a label control that will display that GUID of the record.

  • Run npm run build command to build the control

  • To test the control run npm start command

*Use ctrl + c è to terminate the job.

  • Create a new folder to hold the solution

  • Run the below command to define the publisher name and prefix and initialize the solution files creation

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

  • Run the below command to add reference to our custom control in the solution

pac solution add-reference – -path [path to pcfproj file]

i.e. reference of the below path.

  • This creates the file with extension cdsproj

  • To generate Zip File run the below command in the Developer Command Prompt for Visual Studio 2017
    • MSBUILD /t:restore
    • MSBUILD

  • This adds the Solution zip in the bin Debug folder.

  • To get both managed and unmanaged solution, update the cdsproj file

  • We can see both managed and unmanaged solution created.

  • Import the solution in Dynamics 365 CE and open any of the entity’s form. Here we have created a new text field named GUID in the Contact form and have set our custom control for that field.

For reference à

  • After publishing the changes, we can see the GUID being displayed in the form.

  • To update the control, change the version for it in the ControlManifest.Input.xml

Followed by

  • npm run build
  • msbuild
  • Importing the new solution file generated

In a nutshell below are the high-level steps à

1. Install npm

2. Install PowerApps CLI

3. Install Visual Studio 2017 or later

4. Create a new folder for the project.

5. Navigate to the folder in Developer Command Prompt and run the following command to create the component project

pac pcf init –namespace <component namespace> –name <component name> –template <component type>

6. Install the project dependencies using below command

npm -install

7. Update ControlManifest.Input.xml

8. Update index.ts

9. Build the project

npm run build

10. Use the below command to test the component

npm start

11. Create a folder for holding the solution zip and related files. Navigate to that folder and run the below command.

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

12. Add reference of the custom component in the solution

pac solution add-reference – -path [path to pcfproj file]

13. To create the Solution Zip File

MSBUILD /t:restore

MSBUILD

14. Import the solution file and use it inside Dynamics 365 CE.

 

lastly – Don’t forget to check the wonderful PCF Gallery

https://pcf.gallery/

Hope it helps..

TypeScript Language Quick Reference

Data Types in TypeScript

Access Modifier

  • Any keyword is similar to Var keyword in JavaScript

Properties

Arrow Function

  • TypeScript contains type information for standard JavaScript objects, and using Type Definitions we can refer or get the type information for the external libraries.

https://github.com/DefinitelyTyped/DefinitelyTyped/

  • let has block scope and var has function scope.

Now let us replace var with let keyword, we get an error as shown below

Constructor

For loop

Inheritance

Abstract Class

super

Interface

Namespace

Triple-slash directive to refer other files

Meanwhile check out the new features added as part of 3.5 release.

https://devblogs.microsoft.com/typescript/announcing-typescript-3-5/

Hope it helps..

Getting started with TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft.

TypeScript adds Type support to JavaScript, which makes sure type checking is done resulting in fewer bugs, adds autocomplete supports in the TypeScript editor, supports Object Orientation and structuring and packing of the code, etc.

The code written in TypeScript transpiles to JavaScript by TSC i.e. TypeScript Compiler.

The easiest way to install TSC is to install it as a Node.js package using NPM i.e. Node Package Manager at the command line.

Download and install Node.js first if it is not already installed.

https://nodejs.org/

Make sure to include Node.js runtime and npm package manager.

Now to install TSC, open the terminal and type the below command

npm install -g typescript

g makes sure that it is installed globally and not just in the directory from which we are running the command.

There are different editors available for TypeScript

Let us see how to configure TypeScript for Visual Studio Code.

Download link for Visual Studio Code (if not already installed)

https://code.visualstudio.com/

Open Visual Studio Code and select the working folder or

in Node.js command prompt, create the directory and open the visual studio code from there

From file explorer in Visual Studio Code, create the new .ts file

Create the typescript file with the extension .ts and add the JavaScript code

To compile the TypeScript code, open the integrated Terminal in Visual Studio Code and type

tsc <<FileName.js>>


This creates a new corresponding JavaScript file for the TypeScript file.

To run it use the node command

node <<filename>>

We can also modify the TypeScript compiler’s default behavior by adding tsconfig.json.

Here we have added tsconfig.json file in the project with the following code

Check below link for different compilerOptions

https://www.typescriptlang.org/docs/handbook/compiler-options.html

To configure the build, execute Run Build Task…

As we have created the tsconfig.json file earlier, we will be presented with the following option

Select tsc: build to run the build task.

If tsc: watch is selected the compiler will watch for the changes in TypeScript files and runs the transpiler whenever the changes are saved.

To set the build or watch task as default, select Configure Default Build Task from the Terminal menu.

On selecting tsc: build task, tasks.json file is added inside .vscode

This sets build task as default, so now when we run the Run Build Task, we are not prompted to select a task.

This completes the basic environment setup for using TypeScript with Visual Studio Code.

Hope it helps..

{In-depth end-end walkthrough} Develop your custom controls using Power Apps Component framework and use it on your CRM interface.

Step by Step series on understanding and developing PowerApps Custom Controls using PowerApps Component Framework.

Also the below article

https://danishnaglekar.wordpress.com/2019/05/18/create-custom-controls-using-powerapp-component-framework/

Debajit's Dynamic CRM Blog

Before I stepped in the wonderful world of Dynamics, I used to develop custom controls in ASP.NET. Couple of days back when Microsoft announced the release of Power Apps component framework using which you can develop custom controls and use it on Dynamics forms, I was overwhelmed. It was kind of nostalgia for me. Going back to the old glory days of custom control development.

And here I was reading the pre-release documentation from Microsoft. https://docs.microsoft.com/en-us/powerapps/developer/component-framework/custom-controls-overview

As I was reading I could find that while all the pieces are documented, there are certain areas in documentation where developers may get stuck. Also the documentation does not show end to end of how your custom control can end up being used on a CRM Form.

So I am penning down this blog for all my blog readers. A detailed, end-end scenario where you will develop your custom controls and use in…

View original post 142 more words

Few improvements in new model-driven form designer WYSISYG Preview in PowerApps

Few months back I wrote about the features of the new model drive form designer in PowerApps.

https://nishantrana.me/2018/12/24/the-new-model-driven-form-designer-wysisyg-in-powerapps-for-model-driven-apps-dynamics-365-ce-preview/

There are few improvements done in it since then

For e.g.

  • Fields and Sections can now be selected and positioned.

Phone field:

Address Section:

  • Header and Footer are available now for customization.

However still there are few important features missing when compared to our classic form designer like

  • Sub Grid control are not available on the form for configuration.
  • No Business Rules or Form Properties dialog box.
  • No Enable Security Roles option
  • No field explorer or Relationship explorer so cannot create new fields or relationships.

The new model driven form designer looks promising, however we’d have to wait a bit more, before it can have all the expected (or some new) features added to it.

Hope it helps..

{Dynamics 365 for Sales AI} How are relationship analytics calculated? Let Microsoft Docs tell you

Debajit's Dynamic CRM Blog

Recently I have been working on setting up various features of Sales AI for a customer and I have to tell you that there is so much to it than meets the eye. And one of them is the Relationship Analytics. If you go to Account/ Contact/ Lead/ Opportunity form then you would see some Relationship Analytics showing up. Below is the screenshot for an opportunity.

image

But the question is – “How is Microsoft showing up all these values? After all they must be based on some logic right?”.

Then answer is – “ Yes they are.” But believe me, if you are not aware of the logic behind it, it may be very difficult to understand. And frequently when we are distress we come home to find salvation. And so you should come back to Microsoft Docs to understand what the complexity is all about.

When I asked my…

View original post 109 more words

Error: The “Derived Column” failed because truncation occurred, and the truncation row disposition on “Derived Column.Outputs[Derived Column Output].Columns[FilePath]” specifies failure on truncation. A truncation error occurred on the specified object of the specified component.

We might get the error while using Derived Column in our SSIS Package

To fix it right click the Derived Column component and select Show Advanced Editor ..

Go to Input and Output Properties tab, expand Derived Column Output and select the field and update the length in the properties window.

Hope this helps..

Fixed – Workflows not firing “Waiting For Resources” in Dynamics 365 On-Premise

Recently in one of our environments, we started getting the issue that all our workflows were getting stuck at “Waiting for resources”.

As usual first step was to check if Microsoft Dynamics 365 Asynchronous Processing Service is running it or not.

The service was disabled, so we enabled it. But still, it didn’t fix the issue.

Next thing we tried was as suggested in the below article

https://www.powerobjects.com/blog/2013/03/28/how-to-fix-a-crm-workflow-stuck-in-progress/

The value for AsyncSdkRootDomain was blank which we updated followed by a restart of the service. Still no luck.

Eventually, we came to know that Servers setting for the roles Full Server were in the disabled state inside the Deployment Manager for the organization.

The reason CRM was still working because these services (including IIS Web Site) were already manually started earlier, however, the status was still disabled for this setting within Deployment Manager. (These settings were done by the network team who were planning to create the replica of these machines, and they wanted to disable the applications and our CRM technical team was unaware of it.)

Enabling it fixed the issue for it.

Hope it helps..