PCF – Iban Validator

My first blog post is about my experience with the PowerApps Component Framework so far.

What excites me about this framework is that it provides developers with a native way to integrate development into Model-driven PowerApps / Dynamics 365 Customer Engagement. No longer are we restricted by IFrame’s where we have little connection to the app. It promises to provide us with the same API’s the Microsoft development team uses. Last but not least, this framework will come to canvas apps soon.

I created an IBAN validator. This is validation we build for a lot of customers, so this is a good component to start with.

• Download the solution here
• Download the source code from GitHub

Currently my solution uses deprecated code (the Xrm.Page object), so use with caution.

Installing PowerApps Component Framework

To install the tools and create the framework for my first component I followed the steps in this excellent blog post by Debajit Dutta.

The experience was a breeze. I do not have a lot of Node experience, but most of the commands are pretty self-explanetory. There are however a lot of steps involved to publish and test your app inside a Dynamics environment. Luckily the community quickly responds and added a XrmToolBox plugin. I recommend checking that out, but only after you’ve manually followed the steps once. Just so you know what happens behind the scenes. 

You can debug the component on your local machine where you can test your component. This work great for actually testing your logic. However images you want to include to your component will not load. The api used to get your image does not return a resource.

Iban Validator and validation

On to the actual validation part of creating the iban validator component. I always use this npm iban package and I love how you can open up the command line and just:

npm install IBAN

And then we can simply include and use it in our Typescript file. The tooling detects the dependency when building the solution and includes the script.

var IBAN = require('iban');

if (IBAN.isValid(iban))

Writing the code using examples and tutorials available is easy. We add event listeners to the elements we create and when the value changes we validate the iban. Based on the result we display one of the two images we included in our component.

Sadly we cannot prevent the save of the entity using a supported way. We have no access to the FormContext inside the component logic. Currently adding this functionality to the framework is the top most voted idea, so hopefully this will be implemented in the near future. For now my component uses the deprecated Xrm.Page object where we set and clear the form notification.

Xrm.Page.ui.setFormNotification("Iban is invalid.", "2", "IbanValidator");
Xrm.Page.ui.clearFormNotification("IbanValidator");

Consistent styling is hard

To style the object the way we want we can use CSS. However in my component I want to style my fields the same way the Model App is styled. Copying the html classes of an object we want to mimic does not result in exactly the same styling. I ended up copying the style of all attributes and added these to my own css class. This basically hardcoded my styling and whenever the host app changes his styling, our component will look different.

The team is looking at styling ideas, so hopefully this will be made easier in the future.

Conclusion

I think the PowerApps Component Framework was not made for validation scenario’s. I really like the idea of choosing a field type out of the box which includes the validation. It would make life of a consultant easier and for a developer less repetitive. With a few new features to the framework we can make it work.

The component framework does provide developers with a lot of capabilities to extend Model Driven Apps. With support for Canvas Apps coming soon a whole new range of possibilities opens up. I Love working with the framework and enjoy seeing the components of other community members.