How to set up a Public Profile screen for Users
This Tutorial covers how to set up and link to a user profile page. The example below covers how to do this from a list of comments as well as a comment detail screen.
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
Select the add component button.
Select the Lists drop down
Select Custom List
Place the component on the screen.
With the custom list selected, specify that it is a list of comments.
With the list of comments selected, select ADD ANOTHER FILTER.
Under Custom Filter, select Select Column and set it to Current Comment > Forum > Name
Keep the default value of is equal to.
For the last value of the filter, where it says Empty, select the drop down arrow and set it to Current Forum > Name
2) Set up comment content
Select the Comment list that you just set up.
On the left toolbar, expand the Components section.
Select the text field that is currently set up as Title.
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.
Select the empty name field and rename it to Comment Content.
Select Done.
Select the text field below where it says Title.
Remove the text Title.
Select the Magic Text button.
Set it up as Current Comment > Content.
3) Set up the user's name as a list of Users
Select the Comment list.
On the left toolbar, expand the Components section.
Select the text field that is currently set up as Subtitle
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].
With the group selected, select the overflow menu.
Select Make List
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.
Select the Name field and rename it to List of Users.
Select Done.
The left toolbar will show What is this a list of?, select the drop down.
Select Users.
4) Filter the List of Users list
Select the List of users List.
Select ADD ANOTHER FILTER.
Under Custom Filter, select Select Column and set it to Email.
Keep the default value of is equal to.
For the last value of the filter, where it says Empty, select the drop down arrow and set it to Current Comment > User > Email.
5) Linking to the View User Profile Page
With the List of Users list selected, expand the List section on the left toolbar.
Scroll down to the Click Actions section and select + ADD ACTION.
Hover your mouse over Link to expand the pages that you can link to.
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.
Select Done.
6) Set up the display text for a user's name
With the List of Users list selected, on the left toolbar, expand the Components section.
Select the text field that is currently set up as Subtitle
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.
Select the name field and rename it to Full Name.
Select Done.
Select the text field below where it says Subtitle
Remove the text Subtitle.
Select the Magic Text button.
Set it up as Current Comment > User > Full Name
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.
Select the Comments list.
On the left toolbar, expand the Components section.
Select the text field set up as Comment Content.
Select + ADD ACTION
Hover your mouse over Link to expand the pages that you can link to.
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.
Select Done.
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.
Select the add component button.
Select Text.
Place the text on the screen.
On the left toolbar, place your cursor in the grey box under, where it says Enter Text.
Delete the text.
Select the Magic Text button.
Hover your mouse over Current Comment.
Select Created Date.
Select the add component button.
Select Text.
Place the text on the screen.
On place your cursor in the grey box under, where it says Enter Text.
Delete the text.
Select the Magic Text button.
Hover your mouse over Current Comment.
Select Content.
9) Set up the Author as a list of users
On the left toolbar, select the Add component button.
Select Text.
Place the text on the screen.
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].
With the group selected, select the overflow menu.
Select Make List
The left toolbar will show What is this a list of?, select the drop down.
Select Users.
10) Filter the List of users
Select the list of users that you just created in step 9.
Select ADD ANOTHER FILTER.
Under Custom Filter, select Select Column and set it to Email.
Keep the default value of is equal to.
For the last value of the filter, where it says Empty, select the drop down arrow and set it to Current Comment > User > Email.
11) Set up the Magic Text for the author
Select the list of users that you created in step 9.
On the left toolbar, expand the Components section
Select the text component.
Place your cursor in the grey box under, Text, where it says Enter Text.
Delete the text.
Select the Magic Text button.
Hover your mouse over Current Comment.
Hover your mouse over User.
Select Full Name.
12) Link the Author to the View User Profile Page
Select the list of users.
Scroll down to the Components Section and expand it.
Select the text component.
Scroll down to the Click Actions section and select + ADD ACTION.
Hover your mouse over Link to expand the pages that you can link to.
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.
Select Done.
13) Setting up the View User Profile page
Change the Screen's title on the App bar
Select the App Bar.
On the left toolbar, expand the Title section.
Select the grey text field and delete the text.
Place your cursor in the grey box under, Text, where it says Enter Text.
Delete the text.
Select the Magic Text button.
Hover your mouse over Current User
Select Full Name.
Add the User's picture.
Select the add component button.
Select Image.
Add the image to the screen.
On the left toolbar, select Edit Styles.
Change the Size so that the width and the height are the same.
Set the Rounding to 105.
On the left toolbar, select the dropdown beneath Image source.
Add the User's information onto the screen.
On the left toolbar, select the Add component button.
Select Text.
Place the text on the screen.
Place your cursor in the grey box under, Text, where it says Enter Text.
Delete the text.
Select the Magic Text button.
Hover your mouse over Current User.
Select Info.
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.
Last updated
