Building and Testing the PCF control

We will give you a sample of a basic HTML table in the component.  Let us start by creating a CSS file. We will create a folder with the name of CSS and then create a file inside this folder with the name GridPCFComponent.css

we need to update the ControlManifest.Input.xml to communicate the PCF control that the CSS file for this is component found at the following path

Starting coding 

We will start by creating a container for HTML DivElement type into typescript file name index.ts

Starting coding 

We will start by creating a container for HTML DivElement type into typescript file name index.ts

Now we will inject the div element with a constant element that will contain a predefined HTML table element with some static data. All this will be implemented in the init() method

Now we will run the “npm start” command so that we can start the application component testing in the PowerApps component framework Test Environment.

 

The below screenshot depicts how the component will be displayed.

The image above indicates that the PowerApps component framework gives us an interface for debugging the real data and see what our component will respond to.