Build PCF: Make Specified Attribute(s) ReadOnly on Power Apps Grid Control

Again, another request from my friend Trung Dung Nguyen. He asked me to explore Power Apps Grid Control and make some attributes to be “read-only”. For those who don’t know, Power Apps Grid control allows us to set some features like inline editor (like Editable Grid).

To accomplish the task, the first thing I need to know is to understand the control itself. In the documentation, we can learn that we can leverage the control using PCF control (PCF that calls another PCF) which you can read here. Then, for the sample itself, we can check on this article.

Xrm.Utility.getEntityMetadata to get the localized label

I got a request to basically create PCF for Two OptionSet (boolean) with the main purpose is to keep Yes, No, and Null/Empty values. If you get the requirement, making it is not hard. But, usually in the project, we also need to support multi-languages. There’s an article from Carl de Souza that explaining about how to use “EntityDefinitions WebAPI. But for me, that solution is too complicated. Then I found Xrm.Utility.getEntityMetadata and Inogic have a deeper explanation of how to use it here. In today’s blog post, we will not learn how to create the PCF step by step. But, I’ll reveal the code logic and show you the result.

Model-Driven-Apps: How to use the side pane to show custom HTML

Today we will learn how to create a custom web resource (HTML) using Angular, and show it in the side pane using Xrm.App.sidePanes.createPane method. The end result will be like the below picture:

Let’s try Dataverse DevTools to easily create/update WebResource customizations!

Lately, I’m still preparing my presentation for Reactor Indonesia with the topic “Membangun Solusi Low-Code Dengan Power Platform” and when I’m stumbled to create the WebResource, I remembered about Dataverse DevTools by Danish Naglekar that already being installed in my VS Code for so long since he published the tool but I had never tried it. Looking at the GitHub page it’s already being evolved and makes me want to try it 🤣 (sorry Danish took it so long!). Without further ado, let’s begin!

Exploration: Showing Dynamics CRM Data In Vue.JS (SPA)

Today, I learned how to use MSAL.js 2.0 to do authentication (login) and authorization (checking if the person can access the target resource) to display Dynamics CRM Accounts data in Vue.js. The idea is we want to create a SPA (Single Page Application) that uses Vue.js. The user must log in first and then fetch the account data in the table format. Without further ado, here are the steps:

Dataverse DevOps: Create Tool for Auto Deployment for WebResource + PluginAssembly

One of the topics I wanted to learn and cover is how to do DevOps in a Dataverse environment. DevOps for me is an operation/process that helps to ensure smooth delivery from developer to operation (end-user). The idea is to remove all the unnecessary/recursive processes and automate them so all the stakeholders can focus on the main task. 

In this case, what we will automate is a small part of the development operation whereby Developers are not required to update/create web resources (for the plugin only support update operation) manually. For this demonstration, we will create a small exe, and afterward, I will explain how to set up it in our project. 

Dynamics CRM Model-Driven Apps: Implement Niam.Xrm.Client and Niam.Xrm.Client.Test

Now we go to the last part of the tutorial for Front-end Customization. We will implement Niam.Xrm.Client and Niam.Xrm.Client.Tests on the project we set up earlier. Niam.Xrm.Client is a framework wrapper for Xrm object that focuses on making customization easier, while Niam.Xrm.Client.Tests will mainly focus on Xrm.webApi mock objects and testing-related helpers. Both packages are in beta versions but are already sufficient for the scenario that we will cover in this post.

Dynamics CRM Model-Driven Apps: Setup Testing Environment with chai, Mocha, xrm-mock, and SinonJS

As developers, we are supposed to adapt ourselves to a better working framework or mindset. Following a Test-Driven Development (TDD) mindset, for example, enables us to work more effectively in the long run, compared to not using it. Hence making unit tests has become a crucial part (at least for me), and this post will explain how to set up our project to enable unit testing in our Model-Driven-Apps front-end development. This post is a continuation of this blog post. If you have not yet checked that, you need to go there to get the context (also the zip file).

Dynamics CRM Model-Driven Apps: Developing Frontend Code with Typescript, @types/xrm and webpack

First question: Why TypeScript? We know what JavaScript programming does. The programming language sometimes leads us to confusion because it’s too dynamic. While TypeScript as JavaScript superset trying to fix the whole weakness that it can lead us into. TypeScript offers a more strict language (data type) and supports IntelliSense which is easier for a new developer to catch up and accustom to.

Creating Better PCF Component – Part 3

With all the things settled, now we can continue our journey to make our PCF-Component better. The last commit that we submitted, there are few things that we can enhance:

1. When you choose an image file, then click the Submit button. We can reset the input file.
2. Hide the image-element if no image has been upload.
3. Add image-resizer to make our image smaller in our database.