Mood
The web part which encourages self-expression and provides insights into the collective mood of your team.
Last updated
Was this helpful?
The web part which encourages self-expression and provides insights into the collective mood of your team.
Last updated
Was this helpful?
Mood is a web part designed to foster a sense of community and emotional awareness within your organization. By allowing each user to select an emoticon that best represents their mood of the day, this web part encourages self-expression and provides valuable insights into the overall well-being of your team. The web part is composed of three sections:
The user's daily mood: each user can choose from a variety of emoticons to represent their mood for the day. The interface is simple and intuitive, making it easy for users to update their mood with just a few clicks.
The user's mood history: this section displays a personalized history of the user’s moods over the past week.
The team's daily mood: this section of the web part highlights the most selected emoticon by the user's colleagues on the current day.
In addition, you can create a dedicated page for administrators to view the overall history of moods across the organization. Admins can see the moods selected by all company members on any given day, allowing for the identification of broader emotional patterns and potential areas of concern.
The Mood web part encourages engagement, inviting users to express their emotions and fostering a more connected workplace community. Moreover, the Admin View functionality provides administrators with valuable data that can aid in making informed decisions to support employee well-being and enhance workplace morale.
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 Mood to quickly find and select the Mood web part, which is named "IAI - Mood".
The display settings allows 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.
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.
Enter the application title Thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Mood” at the top left angle of the webpart.
Which view do you want to see? Which view do you want to see? Here you can choose between two options: the User view allows users to select their daily mood, whereas the Admin view allows administrators to view the overall history of moods across the company.
Do you want to hide the mood of the day section? This option allows you to hide the section highlighting the most voted mood on the current day. The default option is No, but you can switch it to Yes to hide this section.
Hide report section? This option allows you to hide the section displaying the history of your moods over the past week. The default option is No, but you can switch it to Yes to hide this section.
Enable scrolling? If you activate this option, a scrollbar appears on the right-hand side of the web part. If you select Yes, you'll be able to choose the height of the web part. This way, you can set a fixed height and scroll up and down to see content. This may be useful if you have a lot of content to display and you don't want the web part to take up too much space.
In this section, you need to specify the sources from which the web part will retrieve information.
In the first field, you need to insert the URL of the site where the list named Mood list is located.
In the Select the mood list field, you need to select Mood list from the drop-down menu. This is the list which contains the emoticons.
In the third field, you need to enter the URL of the site where the list named User mood record is located.
In the Select the list field, you need to select User mood record from the drop-down menu. This is the list where the moods selected by users are saved.
As explained above, the Mood web part retrieves information from the list named Mood list. This section describes the steps to fill in the list.
First of all, click on the Settings icon on the top right of the page, then click on Site contents.
Scroll down and select Mood list.
Each item on this list is a mood. To add a new mood, click on the New button.
When you click on the New button, a panel appears with a number of fields to fill in. The fields marked with asterisks are the mandatory ones.
Title: enter the title of the mood. The title will appear under the emoticon in the first section of the web part.
For example, "Happy", "Sad", "Excited", "Angry", etc.
Description: here you can enter a short descriptive text. You will see the description when mousing over the emoticon.
Order: enter a number to choose the order in which the emoticons will be displayed.
Mood icon url: alternatively, you can create a custom image, upload it to a document library in your intranet (e.g., the Site Assets folder) and copy-paste the image URL into this field.
When you're done, click on Save.
When the configuration is complete, the web part looks like this:
If you have a multilingual intranet, you may need to translate the data inserted in the Mood list into multiple languages. In particular, the fields to translate are Title and Description. This will allow you to configure Mood in different linguistic versions of the same page.
To carry out this translation activity, you need to create two additional fields for each language. Specifically, you need a Title field and a Description field with specific nomenclatures. The nomenclature to adopt is as follows:
IAIMTitle + language code
IAIMDescription + language code
For example, the language code for French is frfr. The complete nomeclature for the Title and Description fields would be:
IAIMTitlefrfr
IAIMDescriptionfrfr
A detailed explanation of the steps of this process is offered below:
To create an additional Title field, access the Mood list and click on +Add column. Select Text and click on Next.
In the Name field, enter the name of the column. Make sure to adopt the nomenclature described above, and save.
To create an additional Description field, click on +Add column. Select Multiple lines of text and click on Next.
In the Name field, enter the name of the column. Make sure to adopt the nomenclature described above, and save.
Now, select an item in the list, click on Edit, and add the translations by filling in the newly created fields. Then, click on Save.
Repeat these steps for all the items in the list.
As mentioned in the introductory section, a "Mood history" page can be created for administrators to view the moods selected by all users on any given day. This is possible thanks to the Admin view, which is an alternative to the User view described above. The mood history is presented in the form of cards showing the profile picture of the user, their name, and the mood they chose on the selected day.
To build such a page, first of all you need to create a new page. To do so, take the following steps:
Click on the gear icon at the top right of the page, and then on Site contents.
Scroll down until you see the Site Pages folder and click on it.
Click on the SystemPages folder.
Click on New > Site Page to create an empty page.
Add a title to the page, and choose your preferred layout for the title area.
Now, in the Display settings section, select the view you want to adopt. In this case, it is the Admin view.
Enable scrolling? Just like the User view, the Admin view allows you to activate a scrollbar. If you select Yes, you'll be able to choose the height of the web part. This means that you'll set a fixed height and scroll up and down to see the cards.
Do you want to choose the number of cards to show? If you activate this option, you'll be able to choose the number of cards to display.
How many users do you want to show? Here you need to specify the number of cards to show. A Show other users button will appear, allowing you to display more cards.
The "Mood history" page looks like this:
As described above, the web part consists of cards showing the moods expressed by intranet users on a given day. By default, the web part shows the moods of the current day, but you can select a different date. You just need to click on the date box to open a calendar where you can choose any of the previous days.
The web part also features a search bar where you can search for a specific user or a specific mood.
If you type the title of a mood, you can see who chose that mood on the selected day.
If you type the name of a user, you can see what mood they expressed on the selected day.
Click on the Edit properties button on the left of the web part to open the property pane and set options such as General settings and Display settings. See below for more information on each of these sections.
You could adopt the User view on the home page of your intranet, and the Admin view in a dedicated sub-page. The specific features of the Admin view are explained .
Mood icon: to add an emoticon, you can choose an icon from the list available at and copy-paste the correspoding code into the Mood icon field.
offers a list of language tags. However, please use only lower case letters and no hyphen between the first and the second part of the tag.
Add the Mood web part by following the steps described in the section.
Then, configure the General settings section of the property pane as described in .
The User mood record list requires a specific configuration so that intranet visitors can select their mood of the day. To learn how to configure this list, read the . In particular, please refer to the Second type of configuration section.
