Two of the best Design Elements to use to display announcements on your page are the Image List and the Ticker Design Elements.
Announcements connected to an Image List:
Announcements connected to a Ticker:
This article will demonstrate how to connect a SharePoint List (with all your announcements) to the Image List Design Element and the Ticker Design Element.
TABLE OF CONTENTS
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 SharePoint List you want to use to connect.
- Your page must have an existing Image List and Ticker Design Elements.
Connecting a SharePoint List to an Image List
Start the interactive tutorial below to learn how to connect a SharePoint List to the Image List Design Element:
Detailed Guide (Image List)
Follow the steps below for a detailed how to connect to an Image List:
NOTEBefore proceeding to the steps below, make sure you already have an existing SharePoint List with all your announcements. Below is an example of a SharePoint List:
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 Image List Design Element
- Look for the Image 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:
Current Site | allows you to connect ShortPoint elements to existing site assets located on the same site. |
Other Sites | allows you to connect ShortPoint elements to existing site assets located on other sites within your SharePoint tenancy. |
SharePoint Site URL | allows you to connect ShortPoint elements to existing site assets located on another site using a specific SharePoint Site URL. |
- Click the List / Library drop-down and look for the name of your SharePoint List.
- 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.
- Click the link icon for each field to choose the property you want to display. Your list or library's column titles will appear as the options in the drop-down.
NOTE: To 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.
Connecting a SharePoint List to a Ticker
Start the interactive tutorial below to learn how to connect a SharePoint List to the Ticker Design Element:
Detailed Guide (Ticker)
Follow the steps below for a detailed how to connect to a Ticker:
NOTEBefore proceeding to the steps below, make sure you already have an existing SharePoint List with all your announcements. Below is an example of a SharePoint List:
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 Ticker Design Element
- Look for the Ticker 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:
Current Site | allows you to connect ShortPoint elements to existing site assets located on the same site. |
Other Sites | allows you to connect ShortPoint elements to existing site assets located on other sites within your SharePoint tenancy. |
SharePoint Site URL | allows you to connect ShortPoint elements to existing site assets located on another site using a specific SharePoint Site URL. |
- Click the List / Library drop-down and look for the name of your SharePoint List.
- 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.
- Click the link icon for each field to choose the property you want to display. Your list or library's column titles will appear as the options in the drop-down.
NOTE: To learn more about the Connect Feature and Items Mapping, check out ShortPoint Connect: Basic Tutorial.
- Choose the Linking options you prefer. To learn more about linking options, check out Types of Linking Options in Page Builder Elements.
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.
Congratulations! You now know how to connect your SharePoint List to the Image List Design Element and the Ticker Design Element. You can now start using this feature on your SharePoint pages.
Related articles:
- Connection Type: Current Site
- Connection Type: Other Site
- Connection Type: SharePoint Site URL
- ShortPoint Connect: Basic Tutorial
- Types of Linking Options in Page Builder Elements