PL-400: Microsoft Power Platform Developer Exam - Implementing PCF Component Interface

Implementing PCF Component Interface

Question

You add a PCF component for image upload to the model-driven app.

The component consists of the default image and the Upload button.

When you click on the button, the component opens a file browser and asks you to select an image for upload.

After the upload, the chosen image is rendered within a control instead of the default image.

You create the manifest file and implement the component logic in a Typescript TSImageComponent class.

What manifest node would you use to define an implementation of the component interface?

Answers

Explanations

Click on the arrows to vote for the correct answer

A. B. C. D. E. F.

Correct Answer: E

The Components are reusable blocks that help you develop the Power Apps applications.

Power Apps provides out-of-the-box standard controls (components) for creating applications, like HTML Text, Vertical Gallery, or Edit Form.

If your Power Platform solution requires more than standard controls, Power Apps also provides tools to create and reuse custom code components.

Power Apps Component Framework (PCF) is a foundation for building these components.

The PCF code components include three parts: Manifest - is an XML document that defines the component's metadata.

Component implementation - contains the code of the component in the index.ts file that defines the UI and functionality.

You can code using TypeScript or Javascript.

Resources - the files needed to construct the component visualizations.

The resource files defined in the Manifest file are required for the component.

The Manifest consists of several nodes: control, type-group, property, data-set, resources, and feature-usage.

The resources node is a sub-node of the control node.

It defines the files required for the implementation of the components interface.

This node consists of four elements:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>

<control namespace="CBImageControl" constructor="TSImageUploadControl" version="1.0.0" wu...

<resources>
<code path="index.ts" order="1" />
<css path="css/TSImageComponent.css" order="1" />

<img path="img/default.png" />
<resx path="strings/TSImageComponent.1033.resx" version="1.0.0" />

</resources>
</control>
</manifest>

All other options are incorrect.

For more information about the PCF implementation of the component's interface, please visit the below URLs:

The correct answer is D. control.

The PowerApps Component Framework (PCF) is a framework for creating custom controls that can be used within the model-driven app. A PCF control is defined in a manifest file, which contains metadata that defines the control's behavior and appearance. The manifest file also references the Typescript class that implements the control.

To define an implementation of the component interface in the manifest file, you would use the "control" node. The control node contains properties that define the behavior and appearance of the control, including the name of the Typescript class that implements the control.

Here is an example of a control node in a PCF manifest file:

json
"control": { "type": "name_of_control", "displayName": { "resourceKey": "control_display_name" }, "description": { "resourceKey": "control_description" }, "template": { "schema": "https://developer.microsoft.com/json-schemas/pcf/v1/component-manifest.schema.json", "parameters": { "image": { "type": "string" } }, "markup": { "path": "name_of_control.html" } }, "version": "1.0.0", "dependencies": { "react": "16.8.6", "react-dom": "16.8.6", "office-ui-fabric-react": "6.189.0" }, "implementation": { "class": "TSImageComponent" } }

In this example, the "control" node defines a control with the name "name_of_control". The "implementation" property specifies that the control is implemented by the "TSImageComponent" Typescript class.

Therefore, the correct answer is D. control.