How to Present Announcements by Department in a SharePoint Page

You can use ShortPoint Connect to display department-specific announcements on your SharePoint page by assigning departments to announcements in your SharePoint List.

Here’s an example of how it may look on your SharePoint pages:

Follow the steps below to get started.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Assign Departments to Announcements
    • Step 1: Add Department Column
    • Step 2: Assign Departments
    • Step 3: Create Department Views
  • Part 2: Display Announcements by Department Using ShortPoint Connect
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Switch to Grid Mode
    • Step 3: Add a Design Element Inside a Department Tab
    • Step 4: Connect
    • Step 5: Map Items
    • Step 6: Repeat Steps
    • Step 7: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint page.
• You must be a ShortPoint Designer with an active license.
• You must have a SharePoint List with all your department announcements:

• You must already have the Tabs Design Element on your SharePoint page:

Step-by-step Tutorial

The steps have been divided into two parts. Follow them closely to display announcements by department successfully on your page.

Part 1: Assign Departments to Announcements

This section demonstrates how to add a department column, how to assign departments to each announcement, and how to create a view for each department.

Step 1: Add Department Column

NOTEBefore proceeding, make sure you already have a SharePoint List with department announcements. 

Go to the SharePoint list with announcements and click + Add column:

Select [1] Choice and click [2] Next:

Write “Department” as the column name:

Under choices, write all the departments in your organization:

Enable [1] Allow multiple selections and click [2] Save:

NOTEAllow multiple selections is enabled, so you can assign multiple departments to each announcement. Doing so will make it easier to showcase company-wide announcements to every department in your organization. 

Step 2: Assign Departments

Click Edit in grid view:

Assign a department/s to each announcement:

Select Exit grid view:

Step 3: Create Department Views

Select the filter icon:

Choose only [1] one department. Then, [2] close the filter pane:

Click the [1] view drop-down and select [2] Save view as…:

Write the [1] view name and click [2] Save:

You will be redirected to a new tab where you’ll see all the selected department’s announcements:

Go back to the All Items tab:

Repeat step 3 for the other departments:

That’s it! You will now see a tab for each department you have. You can now proceed to Part 2.

Part 2: Display Announcements by Department Using ShortPoint Connect

This section demonstrates how to use ShortPoint Connect to display announcements by department.

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Edit the ShortPoint web part:

Step 2: Switch to Grid Mode

NOTEBefore proceeding, make sure you already have a Tabs Design Element on your page. Each tab must have the names of the departments in your organization. If you don’t have this yet, check out How to Customize the Tabs Design Element for more information. 

Since ShortPoint Connect is currently only available in Grid Mode, click the Switch to Grid Mode icon:

Step 3: Add a Design Element Inside a Department Tab

Click the plus icon inside one of the tabs. In our example, we started with the IT tab:

Look for the Design Element you want to use to connect. For this guide, we’ll use Simple List:

NOTEYou can use any Design Element you prefer. However, we recommend using Design Elements that allow listing of multiple items, including Simple List, Icon List, Image List, etc.

Step 4: Connect

Then, go to the Connect tab:

Select the connection type you want to use. Since our SharePoint List is located in the site we’re using, we’ll use Current Site:

Choose the [1] name of your SharePoint List and the [2] department view you want to use. Since we started with the IT tab, we’ll select the IT Announcements view:

NOTEThe options you see for each connection type will differ. Just make sure to select the right SharePoint List name and view name to successfully connect your announcements.

Then, click Connect:

Step 5: Map Items

Go to the Items tab:

Use the link icon to map the properties you want to display:

For this guide, we mapped the following properties:

• [1] #LinkTitle - displays the title of the announcements as the Title.
• [2] #Description - displays the description of the announcements as the Description.

Click Preview to see how your Design Element will look:

Once satisfied, click Insert:

Step 6: Repeat Steps

Repeat steps 3-5 for each department tab you have:

Step 7: Save

Click the eye icon to see your page in real-time:

Save your changes:

Congratulations! You can now showcase your announcements by department:

Related articles:

• How to Display Dynamic Greetings on Your SharePoint Page Using the Code Design Element
• How to Embed an Entire LinkedIn Feed to a SharePoint Page Using the Code Design Element
• How to Create an Anchor Link That Opens to a Specific Paragraph on a SharePoint Page