Text PCF Control

 

Functional Overview

The TextControl is a highly customizable PCF (PowerApps Component Framework) control for Dynamics 365 / Power Apps that allows users to display text with advanced styling and behavior options.

Key Functional Features:

1. Dynamic Text Display:

   • Users can input any text dynamically using the inputText property.

2. Customizable Styling:

   • Font style (normal, italic, etc.)

   • Font weight (normal, bold, etc.)

   • Font size and family

   • Text color and background color

3. Optional Animations:

   • Blinking text effect

   • Horizontal scrolling/moving text with support for left-to-right or right-to-left directions

4. Notification Badge:

   • Option to show a small notification marker next to the text, customizable via notificationText.

5. Safe Defaults & Robustness:

   • All style and behavior inputs have default values to prevent UI breakage.

   • Flags are safely coerced from strings to booleans to avoid runtime errors.

---

Technical Implementation

The control is implemented as a standard PCF component using TypeScript:

1. Initialization (init method):

   • Creates a div container for the text.

   • Appends it to the PCF-provided container.

   • Calls updateView() for initial rendering.

2. Rendering (updateView method):

   • Reads component properties (context.parameters) for text, styles, and flags.

   • Safely converts optional parameters to defaults when undefined.

   • Determines CSS classes for animations: blink, move-ltr, move-rtl.

   • Injects HTML dynamically into the container.

3. Output (getOutputs method):

   • Currently empty since the control doesn’t push data back to the model.

   • Can be extended to support output if needed in the future.

4. Cleanup (destroy method):

   • Placeholder for future memory cleanup or event detachment.

Example CSS for animations (to include in your PCF control):

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

.move-ltr {
  display: inline-block;
  white-space: nowrap;
  animation: move-ltr 5s linear infinite;
}

.move-rtl {
  display: inline-block;
  white-space: nowrap;
  animation: move-rtl 5s linear infinite;
}

@keyframes move-ltr {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes move-rtl {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

Output:

---

Summary:
This TextControl component enhances UX by allowing dynamic text content with custom styling, animations, and notification markers, making it suitable for dashboards, alerts, and banners in Power Apps and Dynamics 365 environments.