# Engagement Board
## What is Engagement Board
Engagement Board is a web part designed to facilitate the **collection of ideas** within your organization. Thanks to this innovative solution, employees can take advantage of the **corporate intranet** to actively contribute **suggestions**, **proposals**, and **feedback**, creating a collaborative and stimulating environment.
Engagement Board functions as a **virtual bulletin board** where users can **post their ideas** and **vote on those of others**. The following steps describe the essential workings of the component:
* **Idea submission**: users can easily add new ideas by describing their content and objectives. They simply need to click the **Add** button **(1)**.
* **Approval**: an approval flow can be implemented so that ideas are published only after being approved by selected people.
* **Voting**: each user can vote for the ideas they find most valuable and promising. The number of likes (votes) is displayed on each post **(2)**.
* **Filtering**: ideas can be filtered and organized based on various criteria, such as the number of likes **(3)** or the category they belong to **(4)**.
* **Leaderboard**: users who have proposed the most ideas are displayed on a leaderboard **(5)**, which further incentivizes participation.
The use of Engagement Board brings numerous advantages to your organization, including:
* **Creativity encouragement**: it allows all intranet users to contribute their ideas, fostering a creative and innovative environment.
* **Employee engagement**: it increases the sense of belonging and involvement of employees, who feel they are an active part of the decision-making process.
* **Decision support**: it provides a solid basis for making informed and strategic decisions, thanks to the collection of feedback and the active participation of employees.
{% hint style="info" %}
Explore the **advantages** of Intranet.ai **Engagement Board** by [**clicking here**](https://intranet.ai/features/engagement-board/) to learn more.
{% endhint %}
***
## Add the Engagement Board web part to a SharePoint Page
* If your page is not already in edit mode, click **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this: 
* Click on it and, in the web part search box, enter **Engagement** to quickly find and select the Engagement Board web part, which is named "IAI - EngagementBoard".
* Click on the **Edit** **properties** button on the left of the web part to open the property pane and set options such as View settings, List settings, Filter settings, Display order and pagination settings, and Text settings. See below for more information on each of these sections.
***
## Configuration
1. [View settings](#view-settings)
2. [List settings](#list-settings)
3. [Filter settings](#filter-settings)
4. [Display order and pagination settings](#display-order-and-pagination-settings)
5. [Text settings](#text-settings)
### View settings
The view settings allow you to customize the appearance of your application by adjusting various layout settings.
By opening this first configuration, you will see the following options:
* **Do you want to hide the background?** You can choose to hide or display the webpart background The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
* **Do you want to hide the background shadow?** You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
* **Select the type of background shadow**: if you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
* If you select High contrast, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
* By choosing the Light background shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
* Finally, the Dark background shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.
* **Enter title of the application**: thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Engagement Board” at the top left angle of the webpart.
* **Do you want to hide the title?** Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
### List settings
In this section you need to specify the lists from which the web part will retrieve information. Specifically, Engagement board relies on three SharePoint lists:
* **Engagement Posts**: this list stores the posts containing users' ideas.
* **Engagement Likes**: this list stores the likes given to the posts.
* **Engagement Categories**: this list is used by the intranet's administrators to create categories. To learn how to create categories, please read the [dedicated section](#create-categories-in-the-engagement-categories-list).
* Enter the **URL of the site** where the **Engagement Posts** list is located.
* Select the **Engagement Posts** list from the drop-down menu.
* Enter the **URL of the site** where the **Engagement Likes** list is located.
* Select the **Engagement Likes** list from the drop-down menu.
* Enter the **URL of the site** where the **Engagement Categories** list is located.
* Select the **Engagement Categories** list from the drop-down menu.
Each post on the idea board appears as a **card** with the following information:
* The **title** of the idea;
* The **author** of the idea (this information can be hidden);
* The **publication date** (this information can be hidden);
* The **category**, identified by an **icon** (this information can be hidden);
* The number of **likes**;
* A **button** to **copy the link** to the post (this button can be hidden).
Clicking on the card opens a panel which shows the **description** of the idea. The description may include one or more **images**.
This section of the property pane includes a number of settings to **hide** the following elements:
1. The **category name**;
2. The **category icon**;
3. The **author** of the post;
4. The **publication date**;
5. The **Copy link** button
Finally, you have two options to:
* **Enable image loading**: if you activate this option, users will be able to load pictures to better illustrate their ideas. As mentioned above, these images will appear in the description of the idea.
* **Set the maximum number of images** that can be uploaded: here you need to select a number **from 1 to 5**.
### Filter settings
This section serves the main purpose of configuring filters and pre-filters.
{% hint style="info" %}
* If you're not in edit mode already, click **Edit** at the top right of the page.
* Select the Engagement Board web part, then click **Edit web part** on the left side of the Engagement Board web part.
{% endhint %}
Firs of all, click on **Configure filters** and complete the panel as follows:
* **Choose filter**: Category.
* **Enter custom filter name**: type the name of the filter, which will be displayed on the right side of the application.
> For example: "Category"
* Choose **whether to show the search field**: tick this box if you want to show a search bar in the drop-down menu of the filter. This search bar allows you to search for categories, so it is particularly useful if you have a significant number of categories, as it allows you to find them more quickly.
* Indicate **whether the filter is open by default**: here you can choose if the drop-down menu of the filter will be open or close by default. Tick this box if you want it to be open by default.
When the configuration is complete, click **Save** to close the panel.
Then, you can decide to:
* **Hide filters**: if you enable this option, the **filter panel** won't be displayed.
* **Hide the ranking**: if you enable this option, the **leaderboard** won't be displayed.
* **Hide the Add button**: if you enable this option, the **Add** button won't be displayed.
{% hint style="success" %}
This functionality may be useful in the following use case: imagine creating a themed idea board where users can submit ideas and suggestions during a specific time frame. Once the submission period ends, the **Add** button can be hidden. This prevents users from adding new ideas while still allowing them to view the board and interact with existing posts. This functionality is particularly useful for managing **time-sensitive initiatives or campaigns**.
{% endhint %}
Finally, you can configure a **pre-filter** to display only ideas that belong to a **specific category**. The steps to take are as follows:
* **Choose the field for the pre-filter**: select **Category** from the drop-down menu.
* **Enter the value for the pre-filter**: type the **name of the category** you would like to display.
### Display order and pagination settings
In this section you can set the number of posts to display.
{% hint style="info" %}
* If you're not in edit mode already, click **Edit** at the top right of the page.
* Select the Engagement Board web part, then click **Edit web part** on the left side of the Engagement Board web part.
{% endhint %}
Set the **number of ideas to display** by selecting a number **from 1 to 6**. Users will be able to view more posts by cliking the **Load more** button.
### Text settings
This section allows you to customize some labels of the web part.
Specifically, you can type a custom name for:
* The **Add** button;
* The **scoreboard**;
* The **All** button;
* The **Most voted** button.
When the configuration is complete, click on **Publish** or **Republish** to publish your changes.
***
## Submitting ideas: how does it work?
Intranet visitors can add new ideas to the board by clicking the **Add** button in the upper right corner of the application. Clicking the **Add** button opens the **Create new** panel, with a number of fields to fill in. The fields marked with an **asterisk (\*)** are **mandatory.**
* **Insert title**: here the user is asked to type the title of the post.
* **Insert description**: the user can use this field to describe their idea more in detail.
* **Select category**: a category must be selected from the drop-down menu, which displays the categories previously created by the intranet's administrators. To learn how to create categories, please read the [dedicated section](#create-categories-in-the-engagement-categories-list).
* **Upload image**: if this option is enabled, the user can upload one ore more images to better illustrate their suggestion.
After completing the panel, the user needs to click on **Submit**. If an approval flow has been implemented, the idea won't be added to the board until it is approved. Otherwise, it will immediately be displayed on the board. For further information on the approval flow, please read the [dedicated section](#implement-an-approval-flow).
***
## Create categories in the **Engagement Categories list**
This section explains how to add categories to the **Engagement Categories** list.
* First of all, click on the **Settings** icon at the top right of the page, then click on **Site contents**.
* Scroll down and select the list named **Engagement Categories**.
* To add a new category, click on **+ Add new item**.
* Fill in the **Title** field with the **name of the category**. This is the only **mandatory** field, as indicated by the asterisk.
* If you have created a custom icon and uploaded it to SharePoint, complete the **IconUrl** field with the picture URL.
{% hint style="info" %}
To create the icon URL, follow these steps:
1. Access the folder where you have uploaded the image. Usually, pictures are uploaded to the **Site Assets** document library.
2. Select the picture.
3. Click on the **Info** icon at the top right of the screen.
4. Click on the **Path** icon to copy the URL of the icon.
5. Finally, paste the **icon URL** into the required field.
{% endhint %}
* Alternatively, you can choose an icon from [this library](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons) and fill in the **IconName** field with the name of the selected icon.
When you have completed the panel, click on **Save**.
***
## Implement an approval flow
As mentioned previously, an approval flow can be implemented so that ideas are added to the board only after being approved by selected people. To add this flow, two actions are required:
**1)** Create the flow manually with **Power Automate**;
**2)** Configure the **Engagement Posts** list by **changing the** **default value** of the **Approved** field. By default, the default value of this field is **Yes**: in this case, you need to change the defealt value to **No**. To do so, take the following steps:
* Click on the **Settings** icon at the top right of the page, then click on **Site contents**.
* Scroll down and select the list named **Engagement Posts**.
* Select the **Approved** column and click on **Column settings > Edit**.
* Change the default value **from Yes to No**.
* Click on **Save**.
***
## Configure the Engagement Posts and Engagement Likes lists
The **Engagement Posts** and **Engagement Likes** lists require a **specific configuration** so that intranet visitors can interact with the idea board. To learn how to configure these lists, read the [dedicated guide](https://docs.intranet.ai/sharepoint-intranet/other-configurations/configuration-of-favorites-lists-and-user-lists). In particular, please refer to the **Second type of configuration** section.
{% embed url="" %}
button on the left of the web part to open the property pane and set options such as View settings, List settings, Filter settings, Display order and pagination settings, and Text settings. See below for more information on each of these sections.
***
## Configuration
1. [View settings](#view-settings)
2. [List settings](#list-settings)
3. [Filter settings](#filter-settings)
4. [Display order and pagination settings](#display-order-and-pagination-settings)
5. [Text settings](#text-settings)
### View settings
The view settings allow you to customize the appearance of your application by adjusting various layout settings.
on the left side of the Engagement Board web part.
{% endhint %}
