How To Use Dialog Control Of Fluent UI In SPFx

Introduction

 

A dialog box (Dialog) is a temporary pop-up that takes the focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file or asking people to make a choice.

 

For more details refer to this article.

 

Source from Fluent UI Dialog Component. 

 

So, in this article, we will see step-by-step implementation with SPFx webpart.

 

Scenario

 

In this example, we will show list data in the table format. In the table, we will show only 4 columns with the data and for more details, we are creating a link and with the click of a link, we will open a dialog box with all details.

 

In the end, our output will be like this:

 

 

Implementation

• Open a command prompt
• Move to the path where you want to create a project
• Create a project directory using:

md spfx-fluentui-dialog

Move to the above-created directory using:

cd spfx-fluentui-dialog

Now execute the below command to create an SPFx solution:

yo @microsoft/sharepoint

It will ask some questions, as shown below,

 

 

After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:

code .

Now we will install pnpjs as shown below:

npm install @pnp/sp --save

Now go to the src > webparts > webpart > components > I{webpartname}Props.ts file,

 

Here we will pass the list name from the property pane configuration. 

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface ISpfxUifabricDialogProps {
  description: string;
  listName: string;
  context: WebPartContext;
}

Create a file I{webpartname}State.ts inside src > webparts > webpart > components and create a state interface as below,

export interface ISpfxUifabricDialogState {
  dialogItems: any[];
  selectedItem: any;
  openDialog: boolean;
}

Create a Service folder inside the src folder and then in this folder create a file called SPService.ts. And in this file, we will create a service to get list items as below,

 

Here list name comes from property pane configuration.

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { sp } from "@pnp/sp/presets/all";

export class SPService {

    public constructor(spcontext: WebPartContext) {
        sp.setup({
            spfxContext: spcontext
        });
    }

    public getDialogListItems(litsName: string) {
        let items = sp.web.lists.getByTitle(litsName)
            .items
            .select("Title,ReasonForTravel,Destination,TravelStartDate,TravelEndDate,Airline,EstimatedAirfare,Hotel,EstimatedHotelCost,Approved,Requester/Title")
            .expand("Requester")
            .get();
        return items;
    }
}

Create a folder called Dialog inside src> common > components. And inside Dialog folder create a files DetailsDialog.tsx and DetailsDialog.module.scss.

 

In the DetailsDialog.tsx file, we will create a common dialog component so we can reuse it in our spfx web part. 

 

Create below properties:

• item - we will pass from the parent component,
• open - to open a dialog,
• onClose() - method to close the dialog.

Create a const dialogDetails, in this, will set the label to display in the dialog, and in the value, we will pass the list columns internal name and it comes from an item object.

Create a const dialogContentProps. In this, we have to set dialog type and dialog title.

 

In the render() method we will render a dialog box with details.

import * as React from 'react';
import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
import { useBoolean } from '@uifabric/react-hooks';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import styles from './DetailsDialog.module.scss';

export interface DetailsDialogProps {
  children?: never[]
  item: any;
  open: boolean;
  onClose: () => void
}

export function DetailsDialog(props: DetailsDialogProps) {

  function formatValue(val: string) {
    return (val ? val : "-");
  }

  const { open, onClose, item } = props;

  const dialogStyles = { main: { maxWidth: 800 } };

  const dialogDetails = [
    { label: "Reason For Travel", value: formatValue(item.ReasonForTravel) },
    { label: "Destination", value: formatValue(item.Destination.DisplayName) },
    { label: "Travel Star tDate", value: formatValue(item.TravelStartDate) },
    { label: "Travel End Date", value: formatValue(item.TravelEndDate) },
    { label: "Airline", value: formatValue(item.Airline) },
    { label: "Estimated Airfare", value: formatValue(item.EstimatedAirfare) },
    { label: "Hotel", value: formatValue(item.Hotel.DisplayName) },
    { label: "Approved", value: formatValue(item.Approved) },
    { label: "Requester", value: formatValue(item.Requester.Title) }
  ]

  const dialogContentProps = {
    type: DialogType.normal,
    title: 'Item Details',
  };

  const handleClose = () => () => {
    onClose();
  };

  const modalProps = {
    isBlocking: true,
  }

  return (
    <Dialog
      hidden={!open}
      onDismiss={handleClose()}
      dialogContentProps={dialogContentProps}
      styles={dialogStyles}
      modalProps={modalProps}>

      <div className={styles.detailsGrid}>
        {
          dialogDetails.map(d =>
            <>
              <div>
                <strong>{d.label}</strong>
              </div>
              <div>{d.value}</div>
            </>)
        }
      </div>
      <DialogFooter>
        <DefaultButton onClick={handleClose()} text="Cancel" />
      </DialogFooter>
    </Dialog>
  );
}

DetailsDialog.module.scss 

.detailsGrid {
    display: grid;
    grid-template-columns: 50% 70%;
}

Now move to the {webpartname}Webpart.ts and create a listname property in property pane configuration and pass a context and selected list property as below:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'SpfxUifabricDialogWebPartStrings';
import SpfxUifabricDialog from './components/SpfxUifabricDialog';
import { ISpfxUifabricDialogProps } from './components/ISpfxUifabricDialogProps';

export interface ISpfxUifabricDialogWebPartProps {
  listName: string;
  description: string;
}

export default class SpfxUifabricDialogWebPart extends BaseClientSideWebPart<ISpfxUifabricDialogWebPartProps> {

  public render(): void {
    const element: React.ReactElement<ISpfxUifabricDialogProps> = React.createElement(
      SpfxUifabricDialog,
      {
        description: this.properties.description,
        listName: this.properties.listName,
        context: this.context,
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneTextField('listName', {
                  label: strings.ListNameFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Move to the {webpartname}.tsx file and then bind the service using current context and call service to get the list items and set values in the state and render it in a table format and on the click of particular items we will show all the item details in the dialog box as shown below:

• Import all the required components like state, dialog component, etc. 
• Create a constructor to bind service and initialize states.
• Create a method getDialogItems() and set items in a state.
• Create a method componentDidMount() and componentDidUpdate() to call getDialogItems().
• Create a method openDialog() to open a dialog for a selected item.
• Create a method closeDialog() to close the dialog.

Render the data by states.

import * as React from 'react';
import styles from './SpfxUifabricDialog.module.scss';
import { ISpfxUifabricDialogProps } from './ISpfxUifabricDialogProps';
import { ISpfxUifabricDialogState } from './ISpfxUifabricDialogState';
import { escape } from '@microsoft/sp-lodash-subset';
import { SPService } from '../../../common/Services/SPService';
import { DetailsDialog } from '../../../common/Components/Dialog/DetailsDialog';
import { Label } from 'office-ui-fabric-react';

export default class SpfxUifabricDialog extends React.Component<ISpfxUifabricDialogProps, ISpfxUifabricDialogState> {

  private _spService: SPService;

  constructor(props: ISpfxUifabricDialogProps) {
    super(props);
    this.state = {
      dialogItems: [],
      openDialog: false,
      selectedItem: {}
    }
    this._spService = new SPService(this.props.context);
  }

  public openDialog(item) {
    return function () {
      this.setState({ selectedItem: item, openDialog: true });
    }
  }

  public closeDialog() {
    this.setState({ openDialog: false })
  }

  public async getDialogItems() {
    let { listName } = this.props;
    if (listName) {
      let items = await this._spService.getDialogListItems(listName);
      this.setState({ dialogItems: items });
    }
  }

  public componentDidMount() {
    this.getDialogItems();
  }

  public componentDidUpdate(prevProps: ISpfxUifabricDialogProps) {
    if (prevProps.listName !== this.props.listName) {
      this.getDialogItems();
    }
  }

  public render(): React.ReactElement<ISpfxUifabricDialogProps> {
    return (
      <div>
        {
          this.state.dialogItems.length ?
            <div className={styles.spfxUifabricDialog}>
              <div>
                <strong>{this.props.description ? this.props.description : ''}</strong>
              </div>
              <table className={styles.detailsTable}>
                <thead>
                  <th>Title</th>
                  <th>Travel Start Date</th>
                  <th>Travel End Date</th>
                  <th>Reason For Travel</th>
                  <th>Details</th>
                </thead>
                <tbody>
                  {
                    this.state.dialogItems.map(i => (
                      <tr>
                        <td>{i.Title}</td>
                        <td>{i.TravelStartDate}</td>
                        <td>{i.TravelEndDate}</td>
                        <td>{i.ReasonForTravel}</td>
                        <td><a href="#" onClick={this.openDialog(i).bind(this)}>More Details</a> </td>
                      </tr>
                    ))
                  }
                </tbody>
              </table>
              {
                this.state.openDialog ?
                  <DetailsDialog
                    open={this.state.openDialog}
                    item={this.state.selectedItem}
                    onClose={this.closeDialog.bind(this)}
                  >
                  </DetailsDialog>
                  : <></>
              }
            </div>
            : <></>
        }
      </div>
    );
  }
}

Output

 

 

 

Find the full source code here. 

 

Summary

 

In this article, we have seen how to implement dialog control of fluent UI in the SPFx webpart.

 

I hope this helps.

 

Sharing is caring!