---
source_url: https://itmustbecode.com/pcf-control-generate-shields-io-badges-in-the-powerplatform/
title: PCF control - Generate Shields.IO Badges in the PowerPlatform
date: 2022-04-07T02:49:10+00:00
categories:
- blog
- projects-and-tools
tags:
- dataverse
- pcf
- powerapps
word_count: 1133
reading_time_minutes: 6
type: posts
---
One of the thing I like the most about **PCF controls** for the PowerPlatform is the ability to change the normal behavior and rendering of forms attributes to add a new twist to the user experience.
With that in mind, for my latest communityPCF control, [ShieldsIO.Badge.PCF](https://github.com/drivardxrm/ShieldsIO.Badge.PCF), I wanted to bring the ability to render custom (and awesome ) **Shields.IO badges** to the **PowerPlatform**.
Using badges in Model-driven or Canvas Apps forms is a great way to provide **concise**, **actionable** and **visually appealing** controls to end users.
For example, these out-of-the-box Model-driven forms fields :
{{< figure src="./image-11.png" alt="" caption="" >}}
Can be turned into these slick looking badges :
{{< figure src="./image-12.png" alt="" caption="" >}}
## What is Shields.IO
But, before we dive into the PCF control implementation, let's introduce the **Shields.IO** service.
Even if you are not familiar with **[Shields.IO](https://shields.io/)** badges, chances are that you've already seen them (virally) poping here and there while browsing your favorite platforms. The service is very popular especialy to display **status badges**.
You can see some good example in the [read.me](https://github.com/badges/shields) of the Shields.IO project github repo.
{{< figure src="./image-3.png" alt="" caption="" >}}
> 💸 If you like Shields.IO , please consider **donating** here : [shields.io - Open Collective](https://opencollective.com/shields) 💸
The concept behind Shields.IO is to render **dynamic badges**(images) that are expressed with **URLs** that contains the needed **metadata**.
```
badgeurl = https://img.shields.io/{badge-metadata}
```
So, when an **URL** is defined as the source of an html image tag **** , the image is dynamically fetched and served from the **shields.io** service when requested.
This makes the Shields.IO badges very useful to display **dynamic** data that changes over time like build status, download count, social media followers... you name it.
### **Predefined badges**
There are a ton of **predefined** badges model for different popular services like github, nuget, twitter just to name a few. (Check the official [shields.io](https://shields.io/) site for more examples)
As can be seen in this screenshot of one of my [github repo](https://github.com/drivardxrm/XTB.CustomApiManager) . These **nuget** badges Urls will render the **download count** and the **current version** badges of my package.
```
https://img.shields.io/nuget/dt/XTB.CustomApiManager
https://img.shields.io/nuget/v/XTB.CustomApiManager
```
{{< figure src="./image.png" alt="" caption="" >}}
Or this one that will render a follow link to my Twitter acount with my follower count.
```
https://img.shields.io/twitter/follow/david_rivard?style=social
```
[](https://twitter.com/david_rivard)
### **Custom badges**
Most importantly, one of the great feature of **Shields.IO** is the **custom badges** system that uses a **generic** notation that looks like this :
```
https://img.shields.io/badge/