Try ShortPoint nowShortPoint Countdown Design Element can display the number of days left before a specific date for an upcoming event found within a SharePoint calendar list just like this example.
In this article, we will show you how you can achieve the same results as seen below. We will divide the process into two parts.
TABLE OF CONTENTS
- Prerequisites
- Part 1: Create a Custom View for the SharePoint List
- Part 2: Connect Countdown Design Element to Custom List View
- Bonus Part: Connect Text Design Element to Show Upcoming Event Title
Prerequisites
- You have ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
- You have a SharePoint calendar list containing all upcoming events. In our use case, we have a list of maintenance schedules.
- You have a Countdown Design Element already inserted into your page.
Part 1: Create a Custom View for the SharePoint List
We have to ensure that the Countdown Design Element only displays upcoming events. This can be done by creating a custom view for the SharePoint calendar list.
Interactive Tutorial
Learn the steps in creating the custom list view. Click Get Started to begin.
Step-by-step Tutorial
Follow these detailed steps to set up a custom list view.
Step 1: Create a custom view
- Go to your SharePoint list and expand the list view options.
- Select Create new view.
- Name the new list view.
Step 2: Edit the new view
- In the list view options, select Edit current view.
Step 3: Set Sort and Filter criteria
- Scroll down to the Sortsection and input the following:
- Click the ascending-order radio option.
- Set up to sort according to the column containing event dates on your list.
- Go to the Filtersection and input the following:
- Click Show items only when the following is true radio option
- Set the criteria to filter by the column containing event dates, is greater than or equal to using special value: [Today]
Step 4: Save list view edits
- Hit OK to save all your changes.
You now have a custom view for the list of upcoming events.
Part 2: Connect Countdown Design Element to Custom List View
Now, we can use ShortPoint Connect to pull data from the newly created custom list view.
Interactive Tutorial
Click Get Started to go through the interactive tutorial showing the steps to connect the Countdown Design Element.
Step-by-step Tutorial
Here are the steps you can follow to establish a connection between the Countdown Design Element and the custom list view.
Step 1: Edit ShortPoint web part
- Edit the SharePoint page.
- Select the ShortPoint web and press the pencil icon to edit it.
Step 2: Edit the Countdown Design Element
- In the Action Toolbar, hit Switch to Grid Mode.
- Navigate to the Countdown Design Element on the page.
- Click the cogwheel icon to open the settings window.
Step 3: Connect to the custom list view
- Go to the Connect tab.
- Select the appropriate connection type. (This varies depending on the location of your SharePoint list.)
- Select the SharePoint list you are connecting to and ensure that you choose the custom list view you created.
- Limit the items to display to one (1).
- Hit Connect.
Step 4: Map to event dates column
- Go to the Design tab
- Map the Date field to the column on your list that contains the event dates
Step 3: Update and save
- Preview the result.
- Once satisfied, Update the Countdown Design Element, and;
- Remember to Save all your changes.
Your Countdown Design Element is now connected to your SharePoint calendar list and shows the contents of your custom list view.
Bonus Part: Connect Text Design Element to Show Upcoming Event Title
To identify the specific event shown in the Countdown Design Element, you can connect a Text Design Element to show the Title column on your SharePoint list.
Interactive Tutorial
Take the interactive tutorial to learn how to connect a Text Design Element.
Step-by-step Tutorial
These are the instructions on how to set up the connection between a Text Design Element and your SharePoint list.
Step 1: Edit ShortPoint web part
- Edit the SharePoint page.
- Select the ShortPoint web and press the pencil icon to edit it.
Step 2: Edit the Text Design Element
- In the Action Toolbar, hit Switch to Grid Mode.
- Navigate to the Text Design Element on the page.
- Click the cogwheel icon to open the settings window.
Step 3: Connect to the custom list view
- Go to the Connect tab.
- Select the appropriate connection type. (This varies depending on the location of your SharePoint list.)
- Select the SharePoint list you are connecting to and ensure that you choose the custom list view you created.
- Limit the items to display to one (1).
- Hit Connect.
Step 4: Map to the event title column
- Go to the Content tab.
- Hit the connection icon and select the event title column property.
- You can edit the text according to your preference.
Step 3: Update and save
- Preview the result.
- Once satisfied, Update the Text Design Element, and;
- Remember to Save all your changes.
Your users will now easily identify what event is happening and how many days are left leading to the event.
Related articles:
- How to Customize the Countdown Design Element in Live Mode
- ShortPoint Connect: Basic Tutorial
- How to Connect ShortPoint Events Design Element to a SharePoint Calendar
