Profile

What is a Profile Component?

A Profile component is a System Component that, when added to a page or layout, creates a form for users to view and update their user-related information on the live app.

By default, the profile component form includes the name and email address of the logged-in user, however you can customize the profile form to include other logged-in user fields as well, as illustrated in the image above. 

Users can use the profile component form to update their user-related details, and upon form submission the updates values are saved to the corresponding record in the Default Users data table in the Data Builder.

As the profile system component contains logged-in user data, a user that is not logged in to your app will be unable to see this component.

Default profile page

For your convenience, each app comes with a built-in default profile page that already includes a profile component. This default profile page can be found at the top of your app's list of layouts and pages with the other two default pages, the default login page and the default signup page.

Default profile, login, and signup pages are similar to regular pages except that they were built-in to each app for your convenience to save you the time of having to create these basic pages from scratch. These default pages can not be deleted, however they can be edited and customized to your specific needs. Additionally, you can create new login, sign up, and profile pages by adding login, profile, and signup components to any page.  

You can enable users to access the default profile page with either one of two ways:

1. Add a User Menu system component to your app
2. Add a Menu system component to your app

Let's discuss these two methods of enabling users to access the default profile page.

Via the user menu

You can add a User Menu system component to your app to enable users to access the default profile page. When users click on their names on the user menu they will be routed to the default profile page where they can view and update their user-related information. The user menu is dynamic to the logged-in user status and users will only be able to see their names on the user menu when they are logged-in to your app.

Please click here to learn more about the User Menu system component. 

Via a menu

Additionally, you can enable users to access the default profile page by adding a link to the default profile page to a menu system component. This method is very similar to adding a user menu to your app, and you can browse the user menu system component and the menu system component articles to determine which method better suits your app needs.

Please click here to learn more about the menu system component. 

The default profile page is secured by default and there is no way to remove the permissions from this page.

Adding profile components

Additionally, you can create a new profile page by adding a profile component to the page/layout.

To add a profile component to a page or layout, you can add it within an existing column, similarly to how you would add any other component. You can then select the profile component from the list of System Components and it will be added to your selected column.

Customizing profile components

To customize a profile component, click on the component within its column on the page/layout in the Page Builder. 

As the Profile component is essentially a form component with the specific function of enabling users to view and update their user-related information on the live app, you can customize Profile components similarly to how you would customize any other form component. Please see the article on form components to learn how to customize form components including the profile component form. 

Securing fields

You can secure specific fields in the profile component to only be visible by specific user roles.

For instance, if you would like employees to be able to view and update their date of birth but not customers, you can secure the date of birth field to only be visible to the employee user role within the profile component. 

To secure fields in the profile component by user role, double click on the profile component, you can then secure the specific field to only be visible by a specific user role(s) by changing the Who can view this field? setting from All Users to Only Users in Specific Roles and selecting the role(s) who can view this field within the profile component.