Skip to content
Petkir Blog
XLinkedinBluesky

The Christkind's - Optimization of Delivery with a Custom Control

— Code, M365, Copilot, Xmas2024 — 4 min read

Story

After weeks of optimizing the preparations, it’s finally time for the Christkind to focus on delivery. One key task is decorating the Christmas tree—a challenge requiring precise calculations and planning.

The Christkind starts by determining the tree’s volume based on its height and diameter. Using the volume and a "fill factor" of 0.7 (ensuring some greenery remains visible), it calculates how many ornaments and candles are needed. Ornaments should cover 40% of the tree’s volume, while candles account for 30%. However, if the tree is dry, the number of candles must be reduced for safety.

While spreadsheets in Excel could do the job, the Christkind envisions a better, more engaging solution: a Power App. A Canvas App would be easy to deploy and share with all the helpers, allowing them to enter tree dimensions and instantly calculate the required decorations. A preview feature within the app would make the process even more intuitive and fun.

Thanks to its growing developer skills, the Christkind takes it a step further by building a custom control for the Power App. This control not only provides precise calculations but also displays a realistic visual preview of the decorated tree.

With this innovative approach, the Christkind is ready to turn a challenging task into a delightful experience for everyone involved!

PowerApps

Add four Text Input controls for:

  • Tree Height (e.g., txtHeight)
  • Tree Diameter (e.g., txtDiameter)
  • Ornament Fill Factor (default: 0.4, e.g., txtOrnamentFactor)
  • Candle Fill Factor (default: 0.3, e.g., txtCandleFactor)

Add the "Calculate" Button and set OnSelect property to a formula"

Set(Volume, Pi() * Power(Value(txtDiameter.Text) / 2, 2) * Value(txtHeight.Text));
Set(OrnamentCount, Round(Volume * Value(txtOrnamentFactor.Text), 0));
Set(CandleCount, Round(Volume * Value(txtCandleFactor.Text), 0));

Display Results with two Label controls"

  • One to show ornaments ("Ornaments: " & OrnamentCount).
  • One to show candles ("Candles: " & CandleCount).

Custom Control

I'm using the Power Platform CLI

Create a New PCF (PowerApps Component Framework) Control

In your desired folder, initialize a new PCF project:

pac pcf init --namespace MyNamespace --name MyCustomControl --template field

Navigate to the project folder:

cd MyCustomControl

Add React to Your Project

Install React and React-DOM:

npm install react react-dom

Build the React Component

Open Control.tsx (create if it doesn’t exist).

Create your SVG-based React component, e.g., a countdown timer or visualization. Example:

import React from "react";


const CustomControl = ({ value }: { value: string }) => (
  <svg width="200" height="200">
    <circle cx="100" cy="100" r="90" stroke="blue" strokeWidth="5" fill="none" />
    <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" fontSize="20" fill="blue">
      {value}
    </text>
  </svg>
);


export default CustomControl;

Integrate React with PCF

Update index.ts to render your React component:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { IInputs, IOutputs } from "./generated/ManifestTypes";
import CustomControl from "./CustomControl";


export class MyCustomControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
  private container: HTMLDivElement;


  public init(container: HTMLDivElement): void {
    this.container = container;
  }


  public updateView(context: ComponentFramework.Context<IInputs>): void {
    ReactDOM.render(<CustomControl value={context.parameters.value.raw || ""} />, this.container);
  }


  public destroy(): void {
    ReactDOM.unmountComponentAtNode(this.container);
  }
}

Build and Test Your Control

Build the control:

npm run build

Test the control in a local environment:

pac pcf start

Package and Deploy

Package the control:

pac solution add-reference --path .
pac solution pack

Import the solution into Power Apps via the Solutions area in the Power Platform Admin Center.

Use Your Control

  • Add the custom control to a Power Apps form.
  • Configure it to bind with the required data fields.

Your custom React and SVG control is now ready to elevate your Power Apps experience! 🎨

Remark

A Power App is easy to share, and with extensions, it unlocks nearly limitless possibilities!

Links

XMAS 2024 Overview