Using PowerApps Component Framework Add Power Virtual Agent Bot To PowerApps Canvas App

Adding a power virtual agent bot to PowerApps is a very common scenario but there is no direct way to add your power virtual agent bot to your application.

The only possible way is by creating a custom PCF component, importing the custom component into your canvas app.

Now let’s take a detailed look at how you can create a PCF component:

Install and update PowerApps CLI using below mentioned command,

Now to create a component project, create a folder and go to that folder, run the below command,

Run the below command to create a new component project and pass the namespace, name of the component, and field as template type as shown below,

Run the below command,

Run -> Code . to open the project folder in VS code editor. The project folder structure should look as shown below,

In this, we will edit ControlManifest.Input.xml and index.ts files

In ControlManifest.Input.xml file add these two lines of code as shown below in the screenshot

<property name="buttonValue" display-name-key="buttonValue" description-key="Button_value" of-type="SingleLine.Text" usage="bound" required="true"/>
<property name="buttonLink" display-name-key="buttonLink" description-key="Button_Link" of-type="SingleLine.Text" usage="input" required="true"/>

Now create a new "PCFButton.tsx" in parallel to index.ts file and include the below code.

import * as React from 'react';
import { ActionButton, Panel, PrimaryButton } from 'office-ui-fabric-react';
export interface IPCFButtonProps {
    // These are set based on the toggles shown above the examples (not needed in real code)
    buttonValue: string;
    buttonLink: string;
}
export const ButtonAnchor: React.FunctionComponent<IPCFButtonProps> = props => {
    return (
        <a href={props.buttonLink} target="_blank">
            {props.buttonValue}
        </a>
    );
};

Now go to index.ts file and update the below mentioned code to the file

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonAnchor, IPCFButtonProps } from './PCFButton';
export class PCFOfficeUIReactButton implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    private theContainer: HTMLDivElement;
    private props: IPCFButtonProps = {
        buttonValue: "",
        buttonLink: ""
    }
    /**
     * Empty constructor.
     */
    constructor() {
    }
    /**
     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
     * Data-set values are not initialized here, use updateView.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
     * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.

     * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
     */
    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
        // Add control initialization code
        this.theContainer = container;
    }
    /**
    * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as labels, visible, etc.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
     */
    public updateView(context: ComponentFramework.Context<IInputs>): void {
        // Add code to update control view
        this.props.buttonValue = context.parameters.buttonValue.raw!;
        this.props.buttonLink = context.parameters.buttonLink.raw!;
        ReactDOM.render(
            React.createElement(
                ButtonAnchor,
                this.props
            ),
            this.theContainer
        );
    }
    /**
     * It is called by the framework prior to a control receiving new data.
     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”

     */
    public getOutputs(): IOutputs {
        return {};
    }
    /**
     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
     * i.e. cancelling any pending remote calls, removing listeners, etc.
     */
    public destroy(): void {
        // Add code to cleanup control if necessary
        ReactDOM.unmountComponentAtNode(this.theContainer);
    }
}

Now go to the ManifestTypes.d.ts file and update the code as shown in the below snippet,

Now it’s the time to test your changes in the local host environment by running the command – npm start

Now create a Solutions folder as shown in below figure,

Now give the path to Solutions folder and run the below command

pac solution init --publisher-name shrushti --publisher-prefix bot

Now open Visual Studio and give a path to your Solutions folder and go to developer command prompt and run the below commands

msbuild /t:build /restore

Run the below commands to package the solution

msbuild /p:configuration=Release

Now run the below commands to create an authentication profile and go to the main folder of the component and push the code to CDS by running 2nd command

pac auth create --url [organization environment url]
pcf push --publisher-prefix bot

Now, let's go to the PowerApps portal and add the custom component to the Canvas App………. Excited right……….

Let’s get started, woo-hoo

Now navigate to PowerApps Admin centre > Environment > Features and make sure that Power Apps component framework for canvas apps feature is toggled ON as shown below,

Now go to your canvas app and go to Settings and make sure to toggle these features ON, look into the below screenshot,

Now go to your app tree view, Components and click on import Component

In Import components panel go to code and you will find the component which you pushed using visual studio. Add that component to your app and yippee, you have successfully added custom component using PCF to your canvas app.

In the below mentioned screenshot, as shown go to your component add a link of your PVA Bot to Button link property and give Button a value as in Button Name (My Bot), now on click of button, PowerApps will redirect you to a Bot screen where you can directly start a conversation. Here in my use case, I had added anchor tag in the code which on giving PVA Bot link render Bot in another tab. You can add Office fabric UI Panel component to render your Bot inside Panel in a canvas app.

This finishes the article on adding PCF custom component to render PVA Bot in PowerApps Canvas app.

I hope this article seems useful for everyone. Stay tuned for my upcoming blogs.

Keep Reading, Keep Sharing!