Contact Detail Dashboard PCF Control

-

 

Building a Dynamic Contact Detail Dashboard in Power Apps with Chart.js

Overview

The Contact Detail Control is a Power Apps Component Framework (PCF) solution designed to make customer relationship data visual, interactive, and easy to explore. Instead of static contact lists, it transforms Dataverse data into a dynamic dashboard where users can search, analyze, and view insights at a glance. Using Chart.js for visualizations, this control helps organizations make faster, data-driven decisions by presenting customer and related record information in an intuitive interface.

From a business perspective, the control improves productivity and visibility by consolidating information that typically requires multiple screens or reports. Users can instantly view contacts by city or job title, explore related records such as opportunities or activities, and see distribution charts that reveal actionable patterns in CRM data — all within one screen.

Building a Dynamic Contact Detail Dashboard in Power Apps with Chart.js

In modern business apps, users expect data to be not just available — but visual, interactive, and easy to explore. That’s why I built the Contact Detail Control, a Power Apps Component Framework (PCF) control that turns Dataverse contact records into a rich dashboard complete with search, tabs, and dynamic charts powered by Chart.js.

What the Control Does

The Contact Detail Control brings CRM data to life with three main functions:

  1. Displays and searches contacts pulled directly from Dataverse.

  2. Visualizes distribution by city or job title, using multiple chart types (bar, pie, doughnut, etc.).

  3. Shows related records such as opportunities, activities, orders, and more — with live counts and lists.

Everything is displayed inside a clean, responsive layout:

  • Left panel: A searchable contact list.

  • Right panel: A chart area and a set of tabs showing detailed and related data.

Core Architecture

The control is implemented as a TypeScript PCF class that extends the ComponentFramework.StandardControl interface.
It initializes the layout, event handlers, and data loading all within a self-contained, reusable component that can be dropped into any Power Apps environment.

Layout and Interaction

The dashboard layout includes a left panel for searching contacts and a right panel with chart visualizations and tabbed details.
A dedicated CSS file ensures everything looks clean and remains responsive inside Power Apps.

Users can:

  • Search contacts by name.

  • Change the chart type from a dropdown.

  • Toggle between “By City” and “By Job” views.

  • Switch tabs to explore related data.

Chart.js Integration

Chart.js provides flexible, colorful visualizations that update dynamically as users interact with the dashboard.
Users can switch between Bar, Pie, Doughnut, Line, Radar, and Polar Area charts without reloading the component.

The chart refreshes when users toggle between city and job title groupings, or when they switch tabs to explore related entities.

Loading Data from Dataverse

The control connects directly to the Dataverse Web API to retrieve contact records.
Each record is mapped into a lightweight Contact object containing name, email, city, and job title fields.
Clicking on a contact displays their details and loads related information (mock data for now, easily replaceable with live Dataverse queries).

This setup makes the control fully extensible — it can be adapted to show any entity or related data model you choose.

Tabs and Related Records

Each tab represents a related data category — Opportunities, Activities, Orders, Quotes, Products, Accounts, and Leads.
Switching between tabs refreshes the right-hand content area and updates both the list and chart based on mock data.

In a production environment, you’d simply replace these mock records with filtered Dataverse queries using the selected contact’s ID to show real relationships.

Why This Matters

By combining PCF, Dataverse, and Chart.js, this control delivers an interactive, visual way to understand CRM data.
It empowers users to explore customer insights without switching screens or running reports — everything they need is in one place.

This means:

  • Better decision-making through visual insights.

  • Less friction for sales and support teams.

  • Higher engagement with data inside Power Apps.

Output:
   


Tech Stack

  • Power Apps Component Framework (PCF)

  • TypeScript

  • Chart.js

  • Dataverse Web API

  • CSS Modules

Comments

Post a Comment

Popular posts from this blog

Attachment PCF

-
Overview The AttachmentControl component is a PowerApps Component Framework (PCF) control designed for handling file uploads. It supports multiple file uploads, drag-and-drop functionality, file previews, and base64 encoding for easy data handling. Features Supports multiple file uploads Drag-and-drop functionality File type and size validation Base64 conversion for uploaded files Preview support for images, PDFs, and text files File removal functionality Code Breakdown Importing Dependencies import { IInputs, IOutputs } from "./generated/ManifestTypes"; The component imports IInputs and IOutputs from the generated manifest file to define the control's input and output types. Component Definition export class AttachmentControl implements ComponentFramework.StandardControl<IInputs, IOutputs> { Defines the AttachmentControl class, implementing the StandardControl interface from PCF. Class Variables private container: HTMLDivElement; private fileInput: HTMLInputEl...
Read more

Contacts View PCF Control

-
  1. Overview The ContactsControl component is a custom PowerApps control that displays a searchable and sortable table of contact records. It provides an interactive UI for filtering and selecting records. 2. Functionalities Search Feature: Allows users to filter records by entering text. Sorting: Clickable column headers enable ascending/descending sorting. Record Selection: Users can select a record to trigger a modal alert. Dynamic Rendering: Updates view dynamically based on search and sort input. Custom Styling: Uses external CSS for styling. 3. Component Structure Main Container ( HTMLDivElement ) : Holds the search bar and table. Search Input ( HTMLInputElement ) : Enables real-time search. Table ( HTMLTableElement ) : Displays the records with sortable headers. Modal Alert ( HTMLDivElement ) : Displays selected record details. 4. Implementation Details 4.1 Initialization ( init Method) Sets up the main container. Loads external styles. Creates...
Read more

Trigger JavaScript on Click of Button PCF Control

-
Image
  Overview The TriggerJavascript control is a custom PCF (PowerApps Component Framework) control that renders a button with customizable label, icon, and on-click script execution. The control allows users to dynamically trigger JavaScript code upon clicking the button. Dependencies IInputs, IOutputs from ./generated/ManifestTypes (Auto-generated types from PowerApps) CSS styling from ./CSS/TriggerJavascript.css Class: TriggerJavascript This class implements ComponentFramework.StandardControl<IInputs, IOutputs> and manages rendering a button inside a container, dynamically executing JavaScript code on button click. Properties Private Properties _container: HTMLDivElement - A reference to the container element where the button will be rendered. Methods constructor() Initializes a new instance of the TriggerJavascript control. init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLD...
Read more