Display iframe Tag in Canvas App

In this article, we will create code components to display an iframe tag in Power Apps.

Prerequisites

For this tutorial, ensure you have the following components installed:

• Visual Studio Code (VSCode): Ensure the “Add to PATH” option is selected.
• Node.js: The LTS version is recommended.
• Microsoft Power Platform CLI: Use either Power Platform Tools for Visual Studio Code or Power Platform CLI for Windows.
• .NET Build Tools: Install one of the following (at minimum, select the workload .NET build tools):
  • Visual Studio 2022
  • Visual Studio 2022 for Windows & Mac
  • Build Tools for Visual Studio 2022
  • Visual Studio 2019

Step 1: Create a Folder in Visual Studio and Open the Terminal Window

In the terminal, use the following command:

pac pcf init --namespace pcfiframe --name iFrame --template field --run-npm-install

This command will create the folder structure successfully, and you can view the files in your Visual Studio Code editor on the left side.

Manifest File

The control manifest is an XML file that contains the metadata of the code component and defines its behavior. In this tutorial, the manifest file is created under the demoPCF subfolder.

When you open the ControlManifest.Input.xml file in Visual Studio Code, you’ll notice that the manifest file is predefined with some properties. Use the following code in the manifest file:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="iframe" constructor="iframe" version="0.0.1" display-name-key="iframe" description-key="iframe description" control-type="standard">
    <external-service-usage enabled="true"></external-service-usage>
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
    <resources>
      <code path="index.ts" order="1"/>
    </resources>
  </control>
</manifest>

Index File

Use the following code for the index.ts file:

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

export class iframe implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    private iframe: HTMLElement;
    private container: HTMLDivElement;
    private varboolen: boolean;

    constructor() {}

    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
        this.container = container;
        this.varboolen = false;
    }

    public updateView(context: ComponentFramework.Context<IInputs>): void {
        if (!this.varboolen) {
            this.varboolen = true;
            this.iframe = document.createElement("iframe");
            this.container.appendChild(this.iframe);
        }
        const srcurl = context.parameters.sampleProperty.raw;
        srcurl && this.iframe.setAttribute("src", srcurl);
    }

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

    public destroy(): void {}
}

To Test the Iframe Component Use below commond

npm start

Packaging your code components

Create a new folder named Solutions inside the iframe folder and navigate into the folder. & Open In VS Code.

use below command in terminal

pac solution init --publisher-name Samples --publisher-prefix samples

Once the new solution project is created, you need to refer to the location where the created component is located. You can add the reference by using the following command:

 pac solution add-reference --path ..\..\

Building the Solution

Use the following command to build the solution:

dotnet build

The generated solution zip file is located in the Solution\bin\debug folder.

Importing the Solution

Manually import the solution into Dataverse using Power Apps once the zip file is ready, or automatically using the Microsoft Power Platform Build Tools.

✨ Thanks for reading! ✨

I hope you found this blog on the Microsoft Power Platform helpful! From Power Apps, Power Automate (Cloud & Desktop), Canvas Apps, Model-driven Apps, Power BI, Power Pages, SharePoint, Dynamics 365 (D365), Azure, and more, I cover a wide range of topics to help you harness these powerful tools. Don’t miss out on future tips, tutorials, and insights—hit that subscribe button to get the latest posts right to your inbox. 💌

💬 I’d love to hear your thoughts! Drop a comment below with your questions, ideas, or feedback—let’s get the conversation started!

🔗 Let’s connect and grow together!
Follow me, Ravindra Jadhav, on your favorite platforms for even more content and updates on Microsoft Power Platform and related technologies:

• 💼 LinkedIn – Let’s network and share ideas!
• 💻 GitHub – Explore my projects and code.
• 🐦 Twitter – Stay updated with quick tips and industry news.
• 📺 YouTube – Watch tutorials and deep dives on Power Platform, Power Apps, Power Automate, and more!

Let’s build something amazing together with Power Platform and Azure! 🚀