# How to set up a Public Profile screen for Users

Many apps have a screen where users can view the profile of another user.  Often there are many ways that someone can navigate to this screen such as from a list of users, or when viewing a comment and clicking on the name of the author.

For this to work, each link that is going to the Profile screen, must be sending data about a "Current User" which means that the links must be from a list of users.  But how does that work if you're liking from just one user like the author of a comment?  

In the tutorial below we will walk through an app where a user can select topics in a forum, view a list of comments for a given topic, and view the details of an individual comment.  Both the list of comments and the comments details screens list the author of the comment which, when clicked, link to the Profile screen.

### 1) Set up your list of comments, and filter the list

1. Select the add component button.
2. Select the *Lists* drop down 
3. Select *Custom List*
4. Place the component on the screen.
5. With the custom list selected, specify that it is a list of comments.
6. With the list of comments selected, select *ADD ANOTHER FILTER.*
7. Under *Custom Filter,* select *Select Column* and set it to *Current Comment > Forum > Name*
8. Keep the default value of *is equal to.*
9. For the last value of the filter, where it says *Empty,* select the drop down arrow and set it to *Current Forum > Name*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2Ye3LHGMeK7A1BNnIJ%2F-M2ZHJmt6vP7DzoJhria%2FProfile%20Page%20Example%20\(5\).gif?alt=media\&token=687a74d3-c295-4841-b2ea-894dcf0ce8fc)

### 2) Set up comment content

1. Select the Comment list that you just set up.
2. On the left toolbar, expand the *Components* section.
3. Select the text field that is currently set up as *Title.*
4. The left toolbar will show that the *Text* is set to *Title* twice. Hover over the top one with your mouse and select the pencil/edit icon.
5. Select the empty name field and rename it to *Comment Content*.
6. Select *Done.*
7. Select the text field below where it says *Title.*
8. Remove the text *Title.*
9. Select the Magic Text button.
10. Set it up as *Current Comment > Content.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2ZICpkPmvKywWm1_zD%2F-M2ZaOC0qzzfjj_-xAol%2FProfile%20Page%20Example%20\(6\).gif?alt=media\&token=aace8800-d1ca-4c65-adcb-b3aec31d214a)

### 3) Set up the user's name as a list of Users

1. Select the Comment list.
2. On the left toolbar, expand the *Components* section.
3. Select the text field that is currently set up as *Subtitle*
4. Turn the text field into a Group.

   \* Have the an action on the component that opens up the new screen\*

   \- On MAC OS, this can be done by selecting the component on your screen and Pressing: \[CMD] + \[G]\
   \- On Windows, this can be done by selecting the component on the screen and\
   Pressing: \[CTRL] + \[G].
5. With the group selected, select the overflow menu.
6. Select *Make List* 
7. The left toolbar will show *List*  with the title *Group #* . (The group number will differ depending on how many groups you have set up).Hover over it with your mouse and select the pencil/edit icon.
8. Select the *Name* field and rename it to *List of Users.*
9. Select *Done.*
10. The left toolbar will show *What is this a list of?*, select the drop down.
11. Select *Users.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2_9ARj3r1NznZXvAa9%2F-M2_MytjtvuoSToS92d_%2FProfile%20Page%20Example%20\(10\).gif?alt=media\&token=3396b2af-d6b4-4190-afdd-c00d230fbf6e)

### 4) Filter the *List of Users* list

1. Select the *List of users* List.
2. Select *ADD ANOTHER FILTER.*
3. Under *Custom Filter,* select *Select Column* and set it to *Email.*
4. Keep the default value of *is equal to.*
5. For the last value of the filter, where it says *Empty,* select the drop down arrow and set it to *Current Comment > User > Email.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2_9ARj3r1NznZXvAa9%2F-M2_PNIiKPvELN5BZGdD%2FProfile%20Page%20Example%20\(11\).gif?alt=media\&token=d665250f-c9f2-4a1d-b813-a1230adf6423)

### 5) Linking to the View User Profile Page

1. With the *List of Users* list selected, expand the *List* section on the left toolbar.
2. Scroll down to the *Click Actions* section and select + *ADD ACTION.*
3. Hover your mouse over *Link* to expand the pages that you can link to.
4. Select the page that you would like the Username to link to. In my Example, the page I wanted to link to was called *View User Profile*.
5. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2_9ARj3r1NznZXvAa9%2F-M2_ZcGstJW7xlOVPVCT%2FProfile%20Page%20Example%20\(14\).gif?alt=media\&token=945deadc-c0f5-4f88-85ff-37a09991b078)

### 6)  Set up the display text for a user's name

1. With the *List of Users* list selected, on the left toolbar, expand the *Components* section.
2. Select the text field that is currently set up as *Subtitle*
3. The left toolbar will show that the *Text* is set to *Subtitle* twice. Hover over the top one with your mouse and select the pencil/edit icon.
4. Select the name field and rename it to *Full Name.*
5. Select *Done.*
6. Select the text field below where it says *Subtitle*
7. Remove the text *Subtitle.*
8. Select the Magic Text button.
9. Set it up as *Current Comment > User > Full Name*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2_9ARj3r1NznZXvAa9%2F-M2_RWpjcZeEyNgg7jXI%2FProfile%20Page%20Example%20\(12\).gif?alt=media\&token=9607e57f-2562-405a-a763-9c366450f8e2)

### 7) Set up the Link to the comment details page

This step shows how to set up a page to view the details of a user's comment. If you choose to have a comment details page, this step is required before step 8. If you choose not to have a comment details page, you can skip to step 13.

1.  Select the *Comments* list.
2. On the left toolbar, expand the *Components* section.
3. Select the text field set up as *Comment Content.*
4. Select *+ ADD ACTION*
5. Hover your mouse over *Link* to expand the pages that you can link to.
6. Select the page that you would like the comment's content to link to. In my Example, the page I wanted to link to was called *Comment Details*.
7. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2_9ARj3r1NznZXvAa9%2F-M2cpxVkONeMZHtkrHyE%2FProfile%20Page%20Example%20\(15\).gif?alt=media\&token=3165c0e6-427f-44be-ae0a-d006b50dec5e)

### 8) Set up the comment content and created date on the comment details page

In this section I am going over how to set up the text fields on my comment details page that are using the linked data from the comment. The fields that are already on the screen are standard text fields with modified font size and color.

1. Select the add component button.
2. Select *Text*.
3. Place the text on the screen.
4. On the left toolbar, place your cursor in the grey box under, where it says *Enter Text.* 
5. Delete the text.
6. Select the Magic Text button.
7. Hover your mouse over *Current Comment.*
8. Select *Created Date.*
9. Select the add component button.
10. Select *Text*.
11. Place the text on the screen.
12. On place your cursor in the grey box under, where it says *Enter Text.* 
13. Delete the text.
14. Select the Magic Text button.
15. Hover your mouse over *Current Comment.*
16. Select *Content.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2d3rtglXNLYVHzFco4%2F-M2dCahoj5RLZFxt3IKa%2FProfile%20Page%20Example%20\(16\).gif?alt=media\&token=60202d3f-c806-4671-a565-9316c0ef1cec)

### 9) Set up the Author as a list of users

1. On the left toolbar, select the Add component button.
2. Select *Text*.
3. Place the text on the screen.
4. Turn the text field into a group.

   \* Have the an action on the component that opens up the new screen\*

   \- On MAC OS, this can be done by selecting the component on your screen and Pressing: \[CMD] + \[G]\
   \- On Windows, this can be done by selecting the component on the screen and\
   Pressing: \[CTRL] + \[G].
5. With the group selected, select the overflow menu.
6. Select *Make List* 
7. The left toolbar will show *What is this a list of?*, select the drop down.
8. Select *Users.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2d3rtglXNLYVHzFco4%2F-M2dGXkEyiEi8S5LP-Io%2FProfile%20Page%20Example%20\(18\).gif?alt=media\&token=9f743290-6486-4786-909d-9e86da496500)

### 10) Filter the List of users

1. Select the list of users that you just created in step 9.
2. Select *ADD ANOTHER FILTER.*
3. Under *Custom Filter,* select *Select Column* and set it to *Email.*
4. Keep the default value of *is equal to.*
5. For the last value of the filter, where it says *Empty,* select the drop down arrow and set it to *Current Comment > User > Email.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2d3rtglXNLYVHzFco4%2F-M2dHNObnkbOqFKSCz5c%2FProfile%20Page%20Example%20\(19\).gif?alt=media\&token=6752ca94-509c-41a4-a117-136d5d1c5013)

### 11) Set up the Magic Text for the author

1. Select the list of users that you created in step 9.
2. On the left toolbar, expand the *Components* section
3. Select the text component.
4. Place your cursor in the grey box under, *Text*, where it says *Enter Text.* 
5. Delete the text.
6. Select the Magic Text button.
7. Hover your mouse over *Current Comment.*
8. Hover your mouse over *User.*
9. Select *Full Name.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2d3rtglXNLYVHzFco4%2F-M2dIpFihWDeUjxViA5T%2FProfile%20Page%20Example%20\(20\).gif?alt=media\&token=8dc23284-fc40-4df7-ab14-684e09bf7955)

### 12) Link the Author to the View User Profile Page

1. Select the list of users.
2. Scroll down to the *Components Section* and expand it.
3. Select the text component.
4. Scroll down to the *Click Actions* section and select + *ADD ACTION.*
5. Hover your mouse over *Link* to expand the pages that you can link to.
6. Select the page that you would like the Username to link to. In my Example, the page I wanted to link to was called *View User Profile*.
7. Select *Done.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2dgui4nDbPQiu1ubxL%2F-M2djwBTSym-7TIauvWD%2FProfile%20Page%20Example%20\(24\).gif?alt=media\&token=cedadba8-5148-413e-b48d-e98a24d930fc)

###  13) Setting up the View User Profile page

1. Change the Screen's title on the App bar
   1. Select the App Bar.
   2. On the left toolbar, expand the *Title* section.
   3. Select the grey text field and delete the text.
   4. Place your cursor in the grey box under, *Text*, where it says *Enter Text.* 
   5. Delete the text.
   6. Select the Magic Text button.
   7. Hover your mouse over *Current User*
   8. Select *Full Name.*
2. Add the User's picture.
   1. Select the add component button.
   2. Select Image.
   3. Add the image to the screen.
   4. On the left toolbar, select *Edit Styles.*
   5. Change the Size so that the width and the height are the same. 
   6. Set the *Rounding* to 105.
   7. On the left toolbar, select the dropdown beneath Image source.
3. Add the User's information onto the screen.

   1. On the left toolbar, select the Add component button.
   2. Select *Text*.
   3. Place the text on the screen.
   4. Place your cursor in the grey box under, *Text*, where it says *Enter Text.* 
   5. Delete the text.
   6. Select the Magic Text button.
   7. Hover your mouse over *Current User.*
   8. Select *Info.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2d3rtglXNLYVHzFco4%2F-M2dNKyEBV0v9Y-Ai9HJ%2FProfile%20Page%20Example%20\(22\).gif?alt=media\&token=3c6d0425-0962-4f1b-b317-944d53de75a0)

You now have two links from different screens that take the user to the *View User Profile* screen. Using the lists of users on the *Forum* and *Comment Details* screens linked the *Current User* data to the *View User Profile* screen. This made it possible to use the magic text and image from the same data on the *View User Profile Screen.*

![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhGHkPsv15svPIU5I7C%2F-M2dZDbb_kzKGBfcO_Pm%2F-M2dgmLa2mDZIO6VqQti%2FProfile%20Page%20Example%20\(23\).gif?alt=media\&token=da012216-8811-435f-810d-306af77f40fe)