How to Configure a Quick Preview for a Connected Document Library

This article will demonstrate how you can configure a document preview for your connected files. 

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Switch to Grid Mode
  • Step 3: Edit the File List Design Element
  • Step 4: Connect using the connection type you prefer
  • Step 5: Map Items to display
  • Step 6: Update and Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have an existing Document Library with files.
• You must have an existing File List Design Element on your page.

Interactive Tutorial

Start the interactive tutorial to learn how you can configure a document preview for your connected files:

Step-by-step Tutorial

NOTEBefore proceeding with the steps below, make sure you already have an existing Document Library with files. Below is an example of a Document Library:

Step 1: Edit the ShortPoint web part

• Go to the SharePoint site you want to use and click Edit.

• Click the ShortPoint tag.
• Click the pencil icon.

Step 2: Switch to Grid Mode

• Click the Switch to Grid Mode icon.

Step 3: Edit the File List Design Element

• Look for the File List Design Element and click the cogwheel icon.

Step 4: Connect using the connection type you prefer

• Go to the Connect tab.
• Select the connection type you want to use. You can choose from:

• Click the List / Library drop-down and look for the name of your Document Library.
• If you have created a custom view for your SharePoint List / Library, click the View drop-down to select your preferred view.
• Then, click Connect to establish the connection.

Step 5: Map Items to display

• Go to the Items tab.
• Delete all default content.
• Go to the Title field, click the link icon, and select File Name.

• Go to the Link field, click the link icon, and select Document Preview.

• Go to the Linking options field and select Lightbox.

NOTETo learn more about the Connect Feature and Items Mapping, check out ShortPoint Connect: Basic Tutorial.

Step 6: Update and Save

• Click Preview to see how the Design Element will look on your page.
• Once satisfied, click Update.
• Then, click the eye icon to see how your page will look in real-time.

• Click Save to apply your changes.

That’s it! You now know how to set up a document preview for your connected files. Try it out on your SharePoint sites now.

Related articles:

• How to Increase the Items Limit of Connected ShortPoint Elements (Modern Experience)
• How to Connect an Image List to SharePoint Image Library
• How to Show All Occurrences of a Recurring Event in ShortPoint Events Element