Rendering and Updating Components

1. Understanding the Component's Core Logic: index.ts

When you initialized your project, the CLI created a folder for your component containing a file named index.ts. This TypeScript file is where all of your component's behavior is defined. Inside, you'll find a class that implements the ComponentFramework.StandardControl interface, which mandates four key methods:

• init(): Called once when the component is loaded. Use it for one-time setup.
• updateView(): Called initially after init and then again anytime a value in the property bag changes. This is where you'll handle dynamic updates.
• getOutputs(): Called by the framework when it needs to retrieve data from your component.
• destroy(): Called when the component is removed from the DOM. Use it for cleanup.

Today, we focus on the first two, which are responsible for everything the user sees.

2. The init Method: Building Your Component's UI

The init method is the entry point for your component's lifecycle. It's called only once, making it the perfect place to build the static structure of your UI, set up initial values, and attach any necessary event listeners.

The init method receives four parameters, but the most important for us right now are context and container.

• context: The property bag. It contains all the data, metadata, and utility functions your component needs, including the values of any fields it's bound to.
• container: An empty HTMLDivElement provided by the Power Apps host. Your component must render all its visual elements inside this container.

Let's look at the standard approach for implementing init.

As you saw in the documentation, the core pattern in init is:

1. Create your HTML elements (e.g., document.createElement("div")).
2. Configure them (e.g., set attributes, classes, or initial values from context.parameters).
3. Append them to the container element provided by the framework.

Let's see a very simple, practical example of this.

3. The updateView Method: Reacting to Data Changes

While init runs only once, updateView is designed to run many times. The framework calls it whenever any property in the context object changes. This could be because the user modified another field on the form, the data was refreshed, or even because the browser window was resized.

Its primary job is to ensure your component's UI is always synchronized with the latest data.

The updateView method receives the updated context object as its only parameter. You use this to get the new values and update the HTML elements you created in init.

4. A Robust Pattern: Separating Structure from Updates

A common mistake is to recreate HTML elements inside updateView. This is inefficient and can lead to bugs. A much better pattern, which your C# background in object-oriented design will make intuitive, is to:

1. In init: Create the component's DOM structure once and store references to key elements in private class members.
2. In updateView: Use those stored references to update the properties of the existing elements.

Let's apply this pattern to the simple example from the video.

Open the index.ts file in your PCF project and modify your class to look like this.

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class MyFirstComponent implements ComponentFramework.StandardControl<IInputs, IOutputs> {

    // A private class member to hold a reference to the main div element.
    private _mainContainer: HTMLDivElement;
    
    // A private member to hold the bound field's value.
    private _value: string | null;

    constructor() { }

    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
        // 1. Create the main div element
        this._mainContainer = document.createElement("div");

        // 2. Configure it
        this._mainContainer.style.backgroundColor = "lightblue";
        this._mainContainer.style.padding = "10px";
        this._mainContainer.style.border = "1px solid blue";

        // 3. Read the initial value from the context
        this._value = context.parameters.sampleProperty.raw;
        this._mainContainer.innerText = `The initial value is: ${this._value}`;

        // 4. Append the new element to the host container
        container.appendChild(this._mainContainer);
    }

    public updateView(context: ComponentFramework.Context<IInputs>): void {
        // Get the latest value from the context
        this._value = context.parameters.sampleProperty.raw;
        
        // Update the innerText of the element we created in init
        this._mainContainer.innerText = `The updated value is: ${this._value}`;
    }

    public getOutputs(): IOutputs {
        return {};
    }

    public destroy(): void {
        // Add code to cleanup control if necessary
    }
}

This code is more efficient because it doesn't destroy and recreate the div on every update; it simply changes its text content.

5. Building and Testing Your Component

Now it's time to see your code in action. The Power Platform CLI provides a local test harness that lets you build and run your component in a browser without needing to deploy it to a Dataverse environment.

1. Save your changes in index.ts.
2. Open the terminal in Visual Studio Code.
3. Run the build command:

   npm run build
   

   This command compiles your TypeScript code into JavaScript. You must run this every time you make a code change.
4. Once the build is successful, start the test harness:

   npm start
   

This command will open a new tab in your browser, loading your component. In the test harness, you can change the value of sampleProperty and see how your updateView method responds instantly.

The following video clip shows this build and test cycle clearly.

public updateView(context: ComponentFramework.Context<IInputs>): void {
    // Get the latest value from the context
    this._value = context.parameters.sampleProperty.raw;
    
    // Update the innerText of the element
    this._mainContainer.innerText = `The updated value is: ${this._value}`;
    
    // Add conditional logic for the background color
    if (this._value && this._value.length > 10) {
        this._mainContainer.style.backgroundColor = "lightcoral";
    } else {
        this._mainContainer.style.backgroundColor = "lightblue";
    }
}

Conclusion

Congratulations! You have now implemented the two most critical methods in the PCF lifecycle. You can render a user interface and have it react dynamically to data changes from the host application.

Key Takeaways:

• init is for one-time setup: Use it to create your DOM elements and perform initial configuration.
• updateView is for dynamic updates: It's called every time data changes, and its job is to refresh your UI to reflect the new state.
• The context object is your data source: It provides access to bound field values via context.parameters.
• A robust pattern separates creation from updates: Create elements in init and store references to them. Use these references in updateView to apply changes efficiently.
• Local testing is key: Use npm run build and npm start to rapidly iterate on your component's design and logic.

What's Next?

So far, our component can only display data. It can't send any changes back to the form. In our next lesson, "Implement the getOutputs and destroy methods to return data to the host and perform cleanup," we will complete our tour of the component lifecycle. You'll learn how to use the getOutputs method to pass values from your component back to the Dataverse form, making your controls truly interactive.