PnP React Controls Part 12 – IFramePanel & IFrameDialog

Introduction

Hi everyone, this is part 12 of PnP React Controls Series. This post will explain the usage of the PnP IFramePanel and IFrameDialog control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control could be very useful when you would like to display the content from another application. Not only it support the content, you can even display the entire application external to SharePoint or a page from SharePoint on the Panel or Dialog. In this demo, I had displayed one of my videos from Microsoft Stream.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named iFrameDemo. Below is the IFrameDemo.tsx file.

import * as React from 'react';
import { FC } from 'react';
import styles from './IFrameDemo.module.scss';
import { IIFrameDemoProps } from './IIFrameDemoProps';
import { IFramePanel } from "@pnp/spfx-controls-react/lib/IFramePanel";
import { PanelType } from '@fluentui/react/lib/Panel';
import { PrimaryButton } from '@fluentui/react/lib/Button';
import { IFrameDialog } from "@pnp/spfx-controls-react/lib/IFrameDialog";
import { DialogType } from '@fluentui/react/lib/Dialog';

const videoUrl: string = '<external URL>'

const iFrameDemo: FC<IIFrameDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [iframePanel, setOpenIFrame] = React.useState<boolean>(false);
    const [hideiframedialog, setHideIFrameDialog] = React.useState<boolean>(true);

    const _openIFrame = (event: any) => {
        setOpenIFrame(true);
    };
    const _closeIFrame = (event: any) => {
        setOpenIFrame(false);
    };

    const _openIFrameDialog = (event: any) => {
        setHideIFrameDialog(false);
    };
    const _closeIFrameDialog = (event: any) => {
        setHideIFrameDialog(true);
    };

    return (
        <section className={`${styles.iFrameDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div className={styles.welcome}>
                <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
            </div>
            <div>
                <h3>PnP IFrame Demo</h3>
                <p><h4>IFrame Panel</h4></p>
                <div>
                    <PrimaryButton text="Open Video Panel" onClick={_openIFrame} allowDisabledFocus />
                    <IFramePanel url={videoUrl}
                        type={PanelType.large}
                        headerText="Auto Copy Files"
                        closeButtonAriaLabel="Close"
                        isOpen={iframePanel}
                        onDismiss={_closeIFrame}
                    />
                </div>
                <p><h4>IFrame Dialog</h4></p>
                <div>
                    <PrimaryButton text="Open Video Dialog" onClick={_openIFrameDialog} allowDisabledFocus />
                    <IFrameDialog
                        url={videoUrl}
                        hidden={hideiframedialog}
                        onDismiss={_closeIFrameDialog}
                        modalProps={{
                            isBlocking: true,
                        }}
                        dialogContentProps={{
                            type: DialogType.close,
                            showCloseButton: true,
                            title: 'Auto Copy Files'
                        }}
                        width={'800px'}
                        height={'500px'} />
                </div>
            </div>
        </section>
    );
};

export default iFrameDemo;

Below are the updates done to the file.

Changed the class component to the react hooks
Created a method named _openIFrame, _closeIFrame, _openIFrameDialog and _closeIFrameDialog to open and close the IFrame Panel and Dialog.
Following are some of the properties of the control that allows us to customize based on our requirement
- type – Panel type
- url – Url to be displayed in the Panel or Dialog
- isOpen or hidden – To show or hide the panel or dialog
- onDismiss – To hide the panel or dialog
- Width & Height – For the dialog size

Note: The IFramePanel control inherits the Panel control properties and IFrameDialog control inherits the Dialog control properties.

Reference URL

IFramePanel – @pnp/spfx-controls-react

IFrameDialog – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the pnp control. There are lot to come in future.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…