'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Open SharePoint List Hyperlinks in a Preview Window
Question details
The user needs a hyperlink stored in a SharePoint list field to open dynamically in a preview frame instead of merely showing the list item properties.
- Product
- Microsoft SharePoint
- Device & OS
- not provided
- Scenario
- Customizing a SharePoint modern page with List web parts to enhance how external or internal links are viewed by users.
- Observed behavior
- Selecting a list item currently displays its text properties, but it does not render the target of the hyperlink in a visual preview.
Ensure you have Site Edit permissions for the SharePoint page and verify that the target URLs in your list allow external iframe embedding.
Use Connected Web Parts with the Embed Web Part
Connect your existing List web part to an Embed web part to pass the hyperlink data and dynamically preview the destination link directly on the page.
SharePoint modern pages allow you to connect certain web parts to create interactive experiences. By passing the hyperlink data from your List to an Embed web part, you can render the target URL as an embedded preview window.
Navigate to the target SharePoint page and click 'Edit' at the top right corner of the screen.
Hover over the page section where you want the preview to appear, click the '+' icon, and select the 'Embed' web part.
Click the pencil icon next to the Embed web part to open its property pane. Click the ellipsis (...) in the top right of the pane and select 'Connect to source'.
Choose your List web part from the source dropdown menu, then configure the Embed address to use the specific hyperlink column from your list properties.
Test the preview by selecting an item in the List web part. Once verified, click 'Republish' to save your dynamic layout.
Looking for a Simpler Way to Collaborate on Documents?
If managing SharePoint lists and connected web parts feels too complex, try WPS Office for a simpler approach. It provides a lightweight, unified workspace to share, preview, and co-edit files effortlessly without requiring advanced web configurations.
- 1. Download the software: Visit the official WPS Office website and download the free installation package.
- 2. Install and sign in: Run the installer and log into your account to activate your free cloud storage workspace.
- 3. Share and preview: Upload your office files to WPS Cloud to easily share links with built-in automatic file previews for your entire team.
Frequently Asked Questions
Why does my SharePoint Embed web part show a 'Connection Refused' error?
This usually happens because the website you are trying to preview has security policies (like X-Frame-Options set to DENY or SAMEORIGIN) that prevent it from being embedded within an iframe on third-party sites.
Can I preview Microsoft Office documents directly inside a SharePoint list?
Yes. If you store actual files in a SharePoint Document Library rather than placing URLs in a custom list, clicking the file name will automatically open it in the built-in Office Online previewer.
How do I pass data between web parts in SharePoint modern pages?
You can pass data by editing the page, selecting the target web part (like an Embed or List properties web part), opening its property pane, clicking the ellipsis (...) to access the 'Connect to source' option, and selecting the web part that holds your source data.
