# My Profile
## What is My Profile
Our component is a **digital resume integrated with Microsoft Viva**, the platform dedicated to employee experience and sharing corporate information.
Our feature allows you to get to **know your colleagues** **and showcase** your **education**, **skills**, and **interests** to support the intranet's [People Directory](https://intranet.ai/features/people-directory/).
{% hint style="info" %}
Explore the **advantages** of Intranet.ai **My Profile** by [**clicking here**](https://intranet.ai/features/my-profile/) to learn more.
{% endhint %}
***
## **Add the My Profile 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 **Profile** to quickly find and select the My Profile web part, which is named "IAI - My Profile".
* Click the **Edit** **properties** button on the left of the web part to open the property pane and set options such as as Layout settings, Data sources, General settings, Display settings, Skills settings, Project settings, and Order settings. See below for more information on each of these options.
***
## Configuration
1. [Layout settings](#layout-settings)
2. [Data sources](#data-sources)
3. [General settings](#general-settings)
4. [Display settings](#display-settings)
5. [Skills settings](#skills-settings)
6. [Project settings](#project-settings)
7. [Order settings](#project-settings)
### **Layout settings**
The layout 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.
* **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 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 “My Profile” at the top left angle of the webpart.
### Data sources
My Profile allows you to to get to know and reach out to all the people and view contact information retrieved from the [People Directory](https://intranet.ai/features/people-directory/). Therefore, it's essential to include people directory details in this section.
* **Data source**: select the **People Directory data source**, which can be either **SharePoint** or **Graph**. Since a SharePoint list can contain a maximum of 5,000 items, companies with more than 5,000 employees will be required to use Graph as the data source. For companies with fewer than 5,000 employees, the choice will be the SharePoint list of the people directory, which is synchronized daily with Azure AD contacts.
* Then, enter the site URL where the [People Directory](https://docs.intranet.ai/configuration/people-directory) list has been installed. For example:
* Choose the **People Directory** list.
* Insert the site url where the badges lists are: enter the site URL. For example:
* Choose the **badge categories** list: select the Badge categories list.
* Choose the **people badge** list: select the People badges list.
### General settings
In this section, you should configure general options, such as selecting the fields to be displayed when clicking on a person's card, as well as other options related to the aesthetic aspects.
* **Open field configurator**: you must configure the fields you want to display on the person’s card by clicking on **Configure Fields**.
* By clicking on **Configure Fields**, the Collection data panel header will be opened, where you have to choose the fields you want to display.
* **Choose fields**: you choose the field from your Azure AD you want to show on the page.
* **Insert field custom name**: you type the name you want to be displayed for that section.
* Click on the + button to add another line.
Here’s an **example** of that panel already configurated.
Always remember to click **Save** at the bottom of the page.
* Then, if you want to add tags to appear in the skills, you can add them having previously set metadata: on this field you must insert the **main taxonomy id** (scores included). Alternatively, if you do not fill them in, the default ones are set up if you want to create tags to fill the skills and projects boxes.
* Select the option where the **profile picture** is stored: **Title**.
* Select the option where the **user login name** is stored: **User Principal Name**.
* As the final configuration step, you can choose **which boxes** you want to display on the My Profile page. You can choose as many boxes as you like, and if there are some you are not interested in, you can simply **uncheck** them, so they will **not appear** on the page.
### Display settings
In this section, you need to choose whether or not to allow the person to change their image options.
* **Show presence**: the first option allows you to show the user's Teams status next to his or her name. To activate this option, select **Yes**.
{% hint style="info" %}
To activate the Teams status in the intranet web parts, a few actions in the SharePoint admin center are needed. The SharePoint admin center can be accessed with a SharePoint Admin account. So, you need to take the following steps with a SharePoint Admin account:
* Go to to **access the SharePoint admin center**.
* Expand the **Advanced** section in the left-hand menu and click on **API access**.
* In the **Pending requests** section, you should have the following row: **Microsoft Graph - Presence.Read.All**.
* Select the row and click on **Approve** at the top left of the page.
{% endhint %}
* **Disable profile picture editing**: by putting a flag on this option, you can choose to allow the person to change his profile picture or not.
* **Disable editing of the cover**: you can choose to allow the person to change his cover picture or not.
* **Disable tag editing**: you can choose to allow the person to change his tag or not (tags are frames that surround the user's photo and allow the insertion of an inscription such as “hiring” or “open to work”).
* **Enter the URL of the cover that will be inserted by default**: if you want to set up a single cover image for everyone, just upload the image to SharePoint and paste the link into this field. A preview image will be shown if you choose this option.
* **Show tag name**: you can decide to show the name of the tag in the selection of tags to be applied to the profile picture.
Here you can customize the **label of the buttons** used to add information:
### Skills settings
This is an optional field, if it is not filled in, the default ones are prepared. Otherwise, if you want to create tags to fill the skill box, you need to:
* **Do you want to use the preset skill list?** Flag this button.
* Insert the **term store's unique id** with the skills list inside (scores included).
### Project settings
This is an optional field. This option is useful if the user has carried out or is involved in specific projects, so that he/she can add the projects he/she is working on to his/her profile. If you want to create tags to fill the projects box, here is the procedure:
* **Do you want to use the preset projects list?** Flag this button.
* Insert the **term store's unique id** with the projects list inside (scores included).
### Order settings
Here you can choose the order of the information shown on the My Profile page. You can just drag and drop the tiles based on your choice.
***
## Add tags
You can **personalize your image** by adding a **tag**. Tags are frames that surround the user's photo and allow the insertion of an inscription such as “hiring” or “open to work”. To do this, you need to upload the images associated with the tag to the document library titled **My profile tags**. These images should have only the tag, with the rest of the image being transparent. This way, the tag can be overlaid onto your existing profile picture seamlessly.
{% hint style="info" %}
**Please note: it is important that tag images are 150x150 in size**; otherwise, the tag will not be visible.
{% endhint %}
With that option, **the user can choose his own tag** to his profile photo **by clicking on**:
Once everything has been filled in, the My Profile page looks as follows:
Each user can fill in all the chosen fields by clicking on each of them and entering personal information. By default, the information is flagged as visible; if the user does not wish to make certain fields visible, the flag has to be removed.
***
## Configure the My profile images and My profile info lists
The My Profile web part relies on two lists where users' images and details are saved: **My profile images** and **My profile info**. These lists require a **specific configuration** so that users can interact with them. 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).
{% embed url="" %}
* Click on it and, in the web part search box, enter **Profile** to quickly find and select the My Profile web part, which is named "IAI - My Profile".
button on the left of the web part to open the property pane and set options such as as Layout settings, Data sources, General settings, Display settings, Skills settings, Project settings, and Order settings. See below for more information on each of these options.
***
## Configuration
1. [Layout settings](#layout-settings)
2. [Data sources](#data-sources)
3. [General settings](#general-settings)
4. [Display settings](#display-settings)
5. [Skills settings](#skills-settings)
6. [Project settings](#project-settings)
7. [Order settings](#project-settings)
### **Layout settings**
The layout settings allow you to customize the appearance of your application by adjusting various layout settings.
* Expand the **Advanced** section in the left-hand menu and click on **API access**.
* In the **Pending requests** section, you should have the following row: **Microsoft Graph - Presence.Read.All**.
* Select the row and click on **Approve** at the top left of the page.
{% endhint %}
* **Disable profile picture editing**: by putting a flag on this option, you can choose to allow the person to change his profile picture or not.
* **Disable editing of the cover**: you can choose to allow the person to change his cover picture or not.
* **Disable tag editing**: you can choose to allow the person to change his tag or not (tags are frames that surround the user's photo and allow the insertion of an inscription such as “hiring” or “open to work”).
* **Enter the URL of the cover that will be inserted by default**: if you want to set up a single cover image for everyone, just upload the image to SharePoint and paste the link into this field. A preview image will be shown if you choose this option.
* **Show tag name**: you can decide to show the name of the tag in the selection of tags to be applied to the profile picture.
Here you can customize the **label of the buttons** used to add information:
