V5 Modern - Modern Web Part Tile

The Modern Web Part Tile in V5 Modern allows the use of Custom and OOTB SPFx web parts. Using the Modern Web Part Tile in Page Designer requires a web part to be configured on a SharePoint page first, so that the Web Part Configuration Data can be pulled into the tile. Since V5 Modern is a single part app page, we can only render web parts in read mode. A future consideration will be to allow web parts to be edited from Page Designer, but in the interim, the steps below will allow the use of Web Parts in Page Designer for Modern.

Creating and Placing Web Parts in V5 Modern

You'll want to start by creating a new Modern SharePoint page to store the web parts you will want to use. Once created, start placing the web parts you want to use in Page Designer into the SharePoint page. Afterwards, configure those web parts and save the page.

Next, you'll want to open a page in V5 Modern, or create a new page. Once on the Design Canvas, place the Modern Web Part Tile on the canvas. Next, open the Tile Settings. Under the General tab, there is a spot for Web Part Data (default value is null), and a button to Pick Web Part from Existing Page. Click on this button. The media picker will appear showing a selection of pages that contain web parts, along with the amount of web parts stored on each page.

Find the page created in SharePoint. In the above example, I'm using Home which contains 6 web parts. Once you click on the page, the media picker will show all of the web parts associated with the selected page.

Click on a web part and then click Select. This will close the Media Picker, and fill the Web Part Data with the configuration of the web part.

Click Done to confirm the tile settings. Now the web part will display in the tile.

Once a web part is used in a LiveTiles Page, it will also be a source for pulling web parts into other pages. Newly saved LiveTiles pages will appear in the media picker, along with associated web parts.

Updating Web Parts

If a web part has been updated on the source SharePoint page, the web part won't update on the LiveTiles Page. In order to update the web part, configure the web part tile and reselect the web part from the media picker. This will update the web part data in the tile.

Future

We recognize that the limitation for being able to display web parts in Page Designer as a read only process isn't convenient. We'll be investigating ways to bring edit capability to web parts directly in the Page Designer product, circumventing the process of saving web parts in a SharePoint page. If you would like to submit any ideas on how we can improve the Modern Web Part Tile, please reach out to us at https://ideas.livetiles.nyc/ and leave an idea in the Page Designer (Modern SharePoint) product. If you don't have access to the ideas portal, please submit a request to support@livetiles.nyc.