A few days ago a twitter user (kr!$#n@) mentioned me and some other developers in a tweet. Included was a question regarding PCF.
I was happy to help and honored to be one of the persons the community asks for help. I suggested to use the Office UI Fabric. Thanks to Scott for mentioning that it is now called differently – Fluent UI. I really appreciate it. I always try to get the names right (even if they change a lot).
But the goal of kr!$#n@ is to not include any external urls.
In my opinion, this can only be achieved when you ship the icons as images and use them inside of the PCF component. I provided a demo repo on GitHub for kr!$#n@.
Since this was a question in the community I thought it is worth an article.
In this article we will learn how to ship and use images in a PCF component.
Actually I have never had the need for images in one of my PCF components so far. But since there is the image type for resources (link to docu) I thought: “Can’t be that hard to implement”.
Unfortunately, it is not as straight forward as I thought/hoped it would be. I searched for a solution and found a discussion in the Power Apps community. The fifth answer (as well from Andrew Ly, who also has asked the question) gave me the hint/solution. It was not 100% working for me but it was pretty close.
The idea is to load the image as a resource, defined in the manifest, via the PCF API (link to docu). The response can then be used as a data URL in the source of an image tag.
Lets dive in and see how this could be achieved.
Update (2021-04-09): SVG-Images are currently not supported. The content you get from the WebAPI when retrieving the image will be empty when you are using SVG-Images.
Lets take a look at our file and folder structure.
First of all, we have to create a new PCF component project. I used the following command in VS Code.
pac pcf init --namespace Demo --name IconDemoComponent --template field
This will create a new project “IconDemoComponent” with the namespace “Demo”.
After creating a new PCF component project we end with the following structure.
The important part is the second line. The getResource (docu) function expects three parameters
Since the PowerApps Component Framework will flatten the file structure we have to “search” the image in the root folder and not in the “img” folder, where we actually have saved it. This is the reason why we only use “user.png” and not “img/user.png”.
Our showError function does actually nothing in this demo. It is just present because the getResource function does need it.
private showError(): void
The setImage function is already a bit more interesting.
In this function, we do get the image data Url from a function called “generateImageSrcUrl”. This function takes the file type and file content (in base64). We will look at this function in a minute. We then set the image data Url as the source of the img element.
The most important part is the “generateImageSrcUrl” function, even though it basically only is one line.
The data URL basically begins with “data” followed by the file type, in our case “image/png”. The file type comes partly as a parameter. After that, we have the indicator that the content is presented in base64. At the end, we do have the actual file content.
If we know how it is working it basically are only some rows of code to achieve our goal of using images in a PCF component.
One important thing to mention is, that this will not work in the harness. It only works in an actual Model-Driven App (MDA). This was mentioned by Oleksandr (OOlashyn) in the mentioned Community discussion.
This is just 1 of 38 articles. You can browse through all of them by going to the main page. Another possibility is to view the categories page to find more related content. You can also subscribe and get new blog posts emailed to you directly.
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.