Skip to main content

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 the search input field.

4.2 View Rendering (updateView Method)

  • Renders the table with records.
  • Applies search and sorting logic.

4.3 Data Processing

  • Sorting Logic:
    • Uses currentSortColumn and isAscending flags.
    • Sorts records based on column values.
  • Filtering Logic:
    • Filters records based on user input.
    • Matches input against all columns.
  • Highlighting:
    • Highlights search query within results.

4.4 Event Handling

  • Search Input: Updates the table on input change.
  • Sortable Headers: Click toggles sorting.
  • Row Click: Opens a modal alert with record details.
  • Close Modal: Dismisses the modal when clicked.

5. Helper Methods

  • loadStyles(): Loads external CSS.
  • createSearchInput(): Creates the search field.
  • renderTable(): Builds the table dynamically.
  • highlightText(value, searchQuery): Highlights search results.
  • sortTable(columnName): Toggles sorting state and updates table.
  • getSortIndicator(columnName): Returns sort icon (▲/▼).
  • showCustomAlert(title, message): Displays a modal alert.

6. Cleanup (destroy Method)

  • Clears the container on component unload.

7. Dependencies

  • Uses ComponentFramework.Context for data binding.
  • Requires external CSS (styles.css).

8. Future Enhancements

  • Add pagination for large datasets.
  • Implement multi-column sorting.
  • Enhance modal with more interactive features.

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...
Post a Comment
Read more

Trigger JavaScript on Click of Button PCF Control

  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...
Post a Comment
Read more