Automatically arrange your UI items using the PnP GridLayout control

Introduction

Proceeding with the appointments with the PnP React controls today I want to talk about the GridLayout control.

If you’re interested you can find the code of this sample here.

The control is used to automatically arrange items inside a container.

Visual appearance

As mentioned, the control automatically arranges the displayed items. It does this based on the size of the available space.

To demonstrate the different behaviors with different sizes here are four screenshots of the items arrangement.

The display with the largest screen:

Items arrangement with a smaller screen size:

Items arrangement with an even smaller screen size:

Items arrangement with the smallest screen area:

Show me the code

Install and import the control

To use the PnP React controls, first you need to install the package:

npm install @pnp/spfx-controls-react --save --save-exact

After the installation of the package you can proceed with the following instructions to use the GridLayout control.

---

To use the control you first need to import it and that can be done as following:

import { GridLayout } from "@pnp/spfx-controls-react/lib/GridLayout";

You will also need to import a Fluent UI interface to be used by the onRenderGridItem method exposed by the control:

import { ISize } from '@fluentui/react';

Now let’s cover a little bit more in detail how to use the control.

Use the GridLayout control

The control’s main properties are the items and the onRenderGridItem ones and it can be used as follows:

<GridLayout
  ariaLabel={strings.GridLayoutAriaLabel}
  items={items}
  onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
/>

The ariaLabel is not a required property but it’s a nice accessibility one. It will contains the accessibility text to be used for the GridLayout control.

In detail, the items property accepts a value of type any[]. In this sample solution I’ve used an array of objects representing the various software of the Viva suite. As reference, the objects are composed as following:

{
  title: 'Viva Amplify',
  description: '<omitted for brevity>',
  thumbnail: require('./../assets/Amplify.png')
}

Once defined what is the data source for the GridLayout control, it will be necessary to define how to display the items.

To specify how the items are composed you will need to use the onRenderGridItem property. This property accepts a method with the following signature:

(item: any, finalSize: ISize, isCompact: boolean)

Here is where the ISize interface from the Fluent UI package is used.

In the sample I’ve used a simple div element with an image and some text inside. However, you can use whatever you need to create your elements. The only “rule” to keep in mind is that the item control should be of a rectangular shape.

For reference, the method from the sample to generate the items is the following:

private _onRenderGridItem = (item: any, _finalSize: ISize, isCompact: boolean): JSX.Element => {
  return <div className={styles.gridItem}>
    <div className={styles.gridItemImage}>
      <img src={item.thumbnail} alt={item.title} />
    </div>
    <div>
      <Label>{item.title}</Label>
      <Label className={styles.gridItemContent}>{item.description}</Label>
    </div>
  </div>;
}

In the official documentation, for example, the items are rendered using the DocumentCard control from the Office UI Fabric package. If interested, here you can find the paragraph that cover this development.

Conclusions

The GridLayout control is an excellent addition to your SharePoint Framework solution. It enhances displaying various items without the hassle of handling their disposition.

If you want to know more about this control you can find the official documentation here.

Hope this helps!