profile
A page which dynamically displays a User's profile information.
Last updated
A page which dynamically displays a User's profile information.
Last updated
The profile page allows Users to display their name, profile picture, a short biography, personal website, their following and followers. When the Current User is viewing a profile page of a fellow User, the Current User can choose to follow/unfollow or send a message to that User.
The Current User can also click on the Text "Following: X" and Text "Followers: X" elements texts in order to view those lists of Users. The rest of the page can be customized to display any type of content relevant to your application:
Only logged-in Users can view this profile page. This makes sure that only Users with an account can send messages to, and follow, other Users. If the Current User is not logged in, they will be re-directed to the homepage.
Logged-In Users are automatically taken to the profile page when they click the profile picture of a fellow User.
user picture/dropdown Reusable ElementUsers can click the Group Current User Profile element within the user picture/dropdown reusable element to view their profile page:
mobile menu (list) Reusable ElementUsers can click the Group Current User Container element within the mobile menu (list) reusable element to view their profile page:
desktop navigation , mobile menu (list), and header_navigation Reusable Elementsdesktop navigation
mobile menu (list)
header_navigation
Users are never automatically navigated to the profile page. They are taken to the profile page only after clicking one of the links or icons which navigate them there.
Every 10 seconds, this page updates the Current User's "last date online" field (type: date, list: no) to the current date and time, using this workflow:
If you do not wish to run this workflow every 10 seconds for capacity reasons, you can remove it.
The profile page allows Users to view their own profile information, and the profile information of other Users in the application.
When the Current User is viewing someone else's profile, the Button Follow and Text Button Send Message (or Edit Profile) elements are shown to the Current User:
When the Button Follow element is shown, and the Current User isn't yet following the person whose profile they are viewing, the Button Follow element's text will be "Follow":
When the Button Follow element is clicked, the Current User is now following the person whose profile they are viewing. As a result, the button's text conditionally changes from "Follow" to "[checkmark] Following".
When the "[checkmark] Following" text is hovered, its text will conditionally change to "Unfollow":
If the "Unfollow" text is clicked, the Current User will no longer be following the person whose profile they are viewing.
When the Text Button Send Message (or Edit Profile) element is clicked, and the Current User is trying to send a Message to a friend, the Current User will be navigated to the messages page, with two additional parameters:
v = new (this shows the FG - Create New Conversation element once the messages page is loaded)
u = [the unique ID of the person who the Current User would like to message]
When the messages page is loaded, the FG - Create New Conversation is shown automatically, and the "u" parameter User is automatically added to the "Selected Recipients" custom state (type: User, list: yes). (This custom state stores the list of Users who the Current User wants to start a Conversation with):
This way, the Current User can immediately start typing their new Message when the messages page is loaded. An existing Conversation will be displayed if there is one between the Current User and the selected User(s).
When the Current User is viewing their own profile page, the Text Button Send Message (or Edit Profile) or Text Button Edit Profile (Mobile) elements will be visible, depending on whether the Current User is on desktop or mobile.
Editor
Desktop:
Mobile:
Preview
Desktop
Mobile
These buttons' texts are "[pencil icon] Edit". When clicked, these buttons' workflows navigate the Current User to their account page, in order to edit their profile information.
The page navigation changes conditionally based on the width of the page as shown here:
The profile page shows the desktop navigation, mobile header, and mobile submenu reusable elements conditionally, depending on the current page width.
Here you can see that the desktop navigation is shown when the current page width is greater than 887 pixels in width.
Once the page width is less than 887 pixels, the desktop navigation element becomes hidden (using a responsive, hiding rule) and the mobile header and mobile submenu reusable elements are shown, so the Current User can easily navigate the application.
When the Current User clicks the Icon Menu element within the mobile submenu reusable element, the admin page's FG - Mobile Menu and FG - Fade Overlay elements are shown:
In order for the FG - Mobile Menu and FG - Fade Overlay elements to display correctly, they should always be the same height as the page.
