> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# User Profile

> Let user view and edit their profiles.

<Tip>
  This page covers the legacy User Profile block found in legacy apps (read more about legacy apps and migration [here](/application-settings/n3K2UEfpC9BpHgakMzUU5Y/migrating-app-versions/4ASdHE4RECmauL82yzcVam)). New apps use the [Account Settings Utility page](/building-blocks/vikC2AWEpQGkZd4jGyoVxo/account-settings/54HYs3JEjZj8DGwRCNUpH9) instead.
</Tip>

<Frame caption="User profile block">
  <img src="https://mintcdn.com/softr-2b8a27e1/VxMjh5thxtybPdCf/add-and-manage-users/images/user-profile/image1.png?fit=max&auto=format&n=VxMjh5thxtybPdCf&q=85&s=298a0905846e35cdb234a90b4882a5fe" alt="User profile block" width="856" height="1070" data-path="add-and-manage-users/images/user-profile/image1.png" />
</Frame>

The **User Profile** block allows your users to edit their info and password.
<Tip>The link to the page with the **User Profile** block can be added under [Profile Links](/11ba304436ed4354a8669d4869624b9c) when **Show User Profile** is enabled on the **Header**.</Tip>

<Frame caption="Adding a link to User Profile under Profile Links">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image2.gif?s=faa284027055501722d7f5c35d526152" alt="Adding a link to User Profile under Profile Links" width="2880" height="1418" data-path="add-and-manage-users/images/user-profile/image2.gif" />
</Frame>

Now, let's check out what configuration options are available for the block.

## Background image

<Frame caption="Block’s background image option">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image3.png?fit=max&auto=format&n=fhz22tA7XIpjh9Wg&q=85&s=77c7e286ba5e40e4dbaa925ee9a21e52" alt="Block’s background image option" width="908" height="536" data-path="add-and-manage-users/images/user-profile/image3.png" />
</Frame>

Here, you can set a background image for the block.

## My Profile

### **Default Fields**

<Frame caption="My Profile Default fields">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image4.png?fit=max&auto=format&n=fhz22tA7XIpjh9Wg&q=85&s=12d9eb678af454eae1135dfcdc3ea547" alt="My Profile Default fields" width="930" height="998" data-path="add-and-manage-users/images/user-profile/image4.png" />
</Frame>

Here, you can configure the section **Title** as well as the placeholders of the **Name** and **Email** fields. Please, note that the **Update Profile** button's **Action** is predefined and cannot be changed.

Moreover, you have the **Avatar image** field (we’ll discuss it shortly), which can be deleted in case you don't need it.

### **Additional Fields**

If you've [connected users to a data source](/add-and-manage-users/pxnkp9H3qyEVMF6XUceqnj/syncing-users-with-a-data-source/hshRGygHr4T33EnaLntGf9) with additional user parameters, you can add more fields to the User Profile block and link them to these parameter fields in your data source, so that your users are able to edit those as well. If there's no data source connected yet, you'll see a **Create Data Source** button, which you can use to connect one. Let's examine this on a specific example.

Let's say our users are company employees that have a **Position** within the company. To account for that, we have an additional **Position** field in our users [Airtable](/data-sources/1YYStCJukT15Lh2j93qo9A/airtable/jHX7kfH7QvkVcELQvS3VoX) along with its different options.

<Frame caption="Additional Position field on Airtable">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image5.png?fit=max&auto=format&n=fhz22tA7XIpjh9Wg&q=85&s=1439cf7222f7ab6b913a68986a39dd90" alt="Additional Position field on Airtable" width="1770" height="1304" data-path="add-and-manage-users/images/user-profile/image5.png" />
</Frame>

So, on the **User Profile** block, we can create a new field and link it to the **Position** field on Airtable.

<Frame caption="Mapping the position field">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image6.png?fit=max&auto=format&n=fhz22tA7XIpjh9Wg&q=85&s=7a80b76d8c4530363b218031f6e5c2ea" alt="Mapping the position field" width="896" height="940" data-path="add-and-manage-users/images/user-profile/image6.png" />
</Frame>

Now, users will be able to edit their position from the user profile as shown below.

<Frame caption="User changing his/her Position">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image7.gif?s=cd9c029bf9cd9fa39e15c596258a7326" alt="User changing his/her Position" width="2880" height="1414" data-path="add-and-manage-users/images/user-profile/image7.gif" />
</Frame>

## **Change Password**

Here, you can configure the placeholder texts of the **Change Password** fields and modify the section title.

<Frame caption="“Change Password” section">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image8.png?fit=max&auto=format&n=fhz22tA7XIpjh9Wg&q=85&s=a5075425379c0ecc6a254f807b7468e0" alt="“Change Password” section" width="930" height="1190" data-path="add-and-manage-users/images/user-profile/image8.png" />
</Frame>

## Enabling user avatar

Let's see how you can allow your users to upload avatar images to be shown on site header.

### **Enabling user profile on header**

First of all, you need to enable the "Show user profile" toggle on your Softr app header.

<Frame caption="Show user profile">
  <img src="https://mintcdn.com/softr-2b8a27e1/fhz22tA7XIpjh9Wg/add-and-manage-users/images/user-profile/image9.png?fit=max&auto=format&n=fhz22tA7XIpjh9Wg&q=85&s=9a3228aa6acebb65a26a3491ce90397a" alt="Show user profile" width="2844" height="1250" data-path="add-and-manage-users/images/user-profile/image9.png" />
</Frame>

<Tip>Make sure to update your header block, as the avatar functionality won't work on header blocks created before its introduction.</Tip>

### **Mapping the avatar field to a data source**

Now, you need to map the avatar field to a [data source](/4230abecf813402aa2926466c313290a), so that images uploaded by users are stored there. You may or may not have your users base connected to a data source already. Let's consider the two cases separately as the workflow is a bit different for each.

**Data source is not connected**

If you haven't connected your users to a data source, you can do so from the **User Profile** block or [Users Tab](/add-and-manage-users/pxnkp9H3qyEVMF6XUceqnj/users-menu/5JTzjtbvp8Skemd26A9ho9), mapping the Avatar field. As soon as you do that, the Avatar field will automatically appear on your User Profile block as shown below. Below, you can see how we connect [Airtable](/data-sources/1YYStCJukT15Lh2j93qo9A/airtable/jHX7kfH7QvkVcELQvS3VoX) and map the avatar field.

<Frame caption="Connecting Airtable and mapping the Avatar field">
  <img src="https://mintcdn.com/softr-2b8a27e1/VxMjh5thxtybPdCf/add-and-manage-users/images/user-profile/image10.gif?s=f53eba96d227c1916475a503d8efded1" alt="Connecting Airtable and mapping the Avatar field" width="2880" height="1418" data-path="add-and-manage-users/images/user-profile/image10.gif" />
</Frame>

Data source **is connected**

If you already have a data source connected, you can add a "File" type field in your User Profile block settings and map it to the corresponding field in the data source **manually**.

You need to edit your [data source connection](/add-and-manage-users/pxnkp9H3qyEVMF6XUceqnj/syncing-users-with-a-data-source/hshRGygHr4T33EnaLntGf9)

<Frame>
  <img src="https://mintcdn.com/softr-2b8a27e1/VxMjh5thxtybPdCf/add-and-manage-users/images/user-profile/image11.png?fit=max&auto=format&n=VxMjh5thxtybPdCf&q=85&s=9cc97ad6e1f6cb0eb863fd745bb6506b" alt="Notion image" width="3024" height="868" data-path="add-and-manage-users/images/user-profile/image11.png" />
</Frame>

Then map **the same** field there as well (**Select Avatar field** option as shown in the screen recording above).

<Tip>Note that mapping the field from **BOTH** the **User Profile**
block and **data source connection** settings is **necessary** for enabling the avatar.</Tip>

### **Avatar upload by the user**

That's it, now the logged-in users will see an option to upload an avatar on their **User Profile** and can update it at any time. See below how it works.

<Frame caption="User uploading an avatar">
  <img src="https://mintcdn.com/softr-2b8a27e1/VxMjh5thxtybPdCf/add-and-manage-users/images/user-profile/image12.gif?s=89a091967b9e0a63e537e66d88f966da" alt="User uploading an avatar" width="2866" height="1408" data-path="add-and-manage-users/images/user-profile/image12.gif" />
</Frame>