Create employee badges with Power Apps

In slightly larger organizations, personnel use employee badges at work. The badges are either ordered from an external service provider or printed by themselves. For printing, you need a special printer and an application for making badges. Unless you want to make them with, for example, Word.

Could printing employee badges be implemented as a canvas Power Apps?

The need is not that complicated. We have one or more badge templates, from which we choose the right one. We add the person’s information (name and title) and a photo. Finally, we print the badge.

The finished badge could look something like this.

In practice, however, there is one problem here. Let’s forget everything else about the implementation and focus on this problem.

Fitting the image to the badge

The problem is the images. Their cropping is not standard. For each badge we have to position the image manually. How can this be done?

Power Apps doesn’t have any “drag and drop” feature, so positioning the image has to be done a little more tediously.

Let’s start by adding an image control to the application. Let’s upload a sample image of an employee.

The idea is that the person’s picture is on the back of the badge template and by moving and zooming the picture, it can be positioned in the right place.

Moving the image

Four buttons are added to move the image.

When the screen is displayed (Screen OnVisible), a local variable is initialized to maintain information about the image’s location.

UpdateContext({locImgY:190, locImgX:155)}

Let’s change the image to use these variables as its x and y values.

Pressing the buttons (OnSelect) updates the x or y value of the image.

OnSelect: UpdateContext({locImgY:locImgY-5})

Now we can move the image in different directions.

Zooming an image

Only the face should be visible on the badge, so the image should also be able to be zoomed in. When the screen is displayed, variables for the height and width of the image are also initialized.

UpdateContext({locImgY:190, locImgX:155, locImgHeight:377, locImgWidth:290})

Add buttons to the screen to zoom in and out. The image is enlarged by increasing its width and height, and by moving it slightly so that the center remains in the same place.

OnSelect: UpdateContext({locImgY:locImgY-5, locImgX:locImgX-5, locImgHeight:locImgHeight+10, locImgWidth:locImgWidth+10})

Image rotation

Let’s add the ability to rotate the image. Let’s add information about how much the image has been rotated (ImageRotation) to our variables.

UpdateContext({locRotation: ImageRotation.None, locImgY:190, locImgX:155, locImgHeight:377, locImgWidth:290})

The last button rotates the image 90 degrees at a time.

Formula used:

UpdateContext(
    {
        locRotation: Switch(
            locRotation,
            Blank(),
            ImageRotation.Rotate90,
            ImageRotation.None,
            ImageRotation.Rotate90,
            ImageRotation.Rotate90,
            ImageRotation.Rotate180,
            ImageRotation.Rotate180,
            ImageRotation.Rotate270,
            ImageRotation.Rotate270,
            ImageRotation.None
        )
    }
)

Now you can move, zoom and rotate the image. You still need an ID card around the image.

Finishing the badge

The size of the typical badge is 86*54mm. We will add frames (rectangle control) to the card with this aspect ratio.

We want only the face to be visible in the image. Let’s add another image on top of the image. It’s a large white box in SVG format with a round transparent hole in the middle.

Picture:

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='600' height='800'><mask id='hole'><rect width='100%' height='100%' fill='white' fill-opacity='1'/><circle cx='300' cy='350' r='100' fill='black'/></mask><rect width='100%' height='100%' fill='white' mask='url(#hole)'/></svg>")

Finally, the company logo and personal information are added.

This solves the problem of centering the image. If the solution is good enough, everything else you need can be built around it (different templates, entering the person’s information on the badge, uploading and printing the badge).

Option 1 – PCF control

I suppose you could drag the image to the right place by making your own PCF control for this. But who wants to code anything anymore when you can vibe-code!

Which brings us to the next option.

Option 2 – Generative pages

What if you could implement the whole thing with generative pages ?

Let’s give it a sample image of an badge and some instructions. The end result doesn’t look bad at all.

Minor cosmetic flaws, the uploaded image is positioned a little oddly.

But you can zoom in on the image and drag it to the right place, which works exactly as we want. The entire image is visible while dragging.

Eligible!

With traditional Power Apps, it’s easier to make pixel-perfect templates. You should think about making them in a completely different way with generative pages. I don’t even want to think about the actual printing.

For these reasons, I would implement this example (for now) as traditional Power Apps. If the tools of choice are canvas Power Apps and generative pages.