Pages Summary
The index page is the home page of the application. When first opening the template in the editor, the index page describes the template's features and functionality. You won't need this page; set the "landing" page as the new index page, then delete the "old_index" page.
The account page allows Users to edit their account information. After the Current User adds or edits their information using the forms on this page, it is then displayed on their profile page and wherever it's needed throughout the application.
The account page primarily uses standard input elements, aside from the combination of elements used to change/delete/save each User's profile picture. This combination of elements is used to improve the user experience, so Users can change and upload their profile picture as shown in the GIFs below:
Confirm New Profile Picture
Discard New Profile Picture
To view these picture uploader elements in the editor, select the Group Picture Uploader Container element, and reveal it in the Elements Tree. Then click to make the Group Save/Cancel Buttons (Profile Photo) element visible in the editor:
More information on this custom picture uploader can be found in the "D. Change Profile Picture" workflow folder.
The admin page allows admin users to modify Users' information, delete accounts, and designate other Users as admins. All elements are hidden on page load, and contain conditional formatting to become visible when the Current User's "Admin" field (type: yes/no, list:no) is yes.
The Grid and Graph Views
On this page, there are two views -- the "Grid" view and the "Graph" view.
The "Grid" view is the Group Users Grid Container element and the "Graph" view is the Group Graph of Users Container element:
Each group is shown conditionally, depending on whether the "Grid" or the "Graph" toggle was just clicked.
For more information on how these groups are shown, please refer to the B. Grid and Graph Views workflow folder.
The change_pass page allows Users to change their passwords. This page is not really needed in the template, but it could be useful if you create functionality that assigns temporary passwords to new Users. If a User logs into the application with a temporary password, they will be navigated to this change_pass page automatically, in order to change their password.
By default, the template doesn't send confirmation emails to new Users, and it doesn't restrict any functionality for Users without a confirmed email. To send new Users confirmation emails, please read the confirm page section.
The design guide is used to keep the application's design consistent as you build new pages.
The landing page is a responsive page 'template' that allows you to fill in the information about your application. The page utilizes free, MIT-licensed illustrations from Undraw.
As described in the Setup Guide's "Set the Landing Page as the new Index Page, and Delete the Old_Index Page" section, you should set the landing page as the new index page, and then delete the "old_index" page.
The messages page contains all of the elements needed for Users to start Conversations with each other.
To ensure the messaging functionality works as expected, please delete the specific privacy roles described in the Remove the Template's Demo Settings section of the Setup Guide.
You don't necessarily need to know how each part of the messages page works, but looking into the workflow folders will help if you are trying to customize certain functionality. If you'd like to make significant changes to the messages page, here is more information on its structure.
The Messages Page's Structure
The messages page has 8 floating group elements which are shown conditionally, depending on if the User is selecting a Conversation, viewing a Conversation, or trying to start a new Conversation.
It is very important to not move or resize these floating group elements, to ensure the design remains in place on desktop and mobile.
These elements are:
FG - Conversation (Desktop)
FG - Conversation (Desktop)This element is visible on page load, and shown when this page is first loaded in the editor. It is visible to Users when the page width is greater than or equal to 600 pixels in width.
The Group Desktop Navigation Container (Desktop) and Group Desktop View Conversations Container (Desktop) elements are visible to the left of the Repeating Group Messages (Desktop) element when the page width is greater than or equal to 887 pixels in width (for Users at laptop or Desktop width).
When the page is between 600 and 887 pixels, those left-side navigation elements collapse in width (using collapse rules) and the top navigation element, Group Mobile Header (Desktop) becomes visible for Users at tablet width:
FG - Create New Conversation
FG - Create New ConversationThis element is not visible on page load, and only becomes visible when the Current User clicks any of the Button New Conversation (Desktop), Button New Conversation (Tablet), or Button New Conversation (Mobile) elements.
When the Current User selects a combination of Users that they haven't had a Conversation with before, a new Conversation is created. The new Conversation and new Message are not actually created as Things until the User clicks to send their new Message.
For more specific information on how this works, please refer to the E. New conversation workflow folder.
The Repeating Group Messages (Existing Conversation) element within the FG - Create New Conversation element is hidden on page load, and only becomes visible if the Current User has an existing Conversation with the Users they've just selected to start a Conversation with. This way, the existing Conversation is shown to the Current User within the FG - Create New Conversation element, and their new message (when sent) is added to that existing Conversation:
FG - Mobile Top Bar when Viewing Conversation
FG - Mobile Top Bar when Viewing ConversationThis element is hidden on page load, and becomes visible when the Current User is viewing the selected Conversation at a current page width of less than 600 pixels. When the page width is less than 600 pixels, the selected Conversation's list of Messages are displayed within the Repeating Group Messages (Mobile) element.
In contrast to the Repeating Group Messages (Desktop) element that utilizes "vertical scrolling", the Repeating Group Messages (Mobile) element is set to "ext. vertical scrolling (infinite scrolling)". Setting the Repeating Group Messages (Mobile) element to "ext. vertical scroll" ensures that its height will automatically resize depending on the height of the phone's screen.
The FG - Mobile Top Bar when Viewing Conversation element floats to the top, and remains remains visible above that mobile repeating group at all times, so the User can see the names of the Users they're in a Conversation with, or go back to viewing all of their Conversations on mobile as they scroll.
FG - View Conversations (Mobile)
FG - View Conversations (Mobile)This element is hidden on page load, and only becomes visible when the page width is less than 600 pixels, and the Current User has not yet selected a specific Conversation to view. This element contains the Repeating Group View Conversations Mobile element which displays all of the Current User's conversations.
The Current User can then click on one of the Conversations in the Repeating Group Conversations (Mobile) element, which will hide the FG - View Conversations (Mobile) element, and show the FG - Conversation (Mobile) , FG - Send Message (Mobile), and FG - Mobile Top Bar when Viewing Conversation elements
FG - Conversation (Mobile)
FG - Conversation (Mobile)This element is hidden on page load, and only becomes visible when the page width is less than 600 pixels, and the Current User selected a Conversation to view. This element contains the Repeating Group Messages (Mobile) element. The FG - Send Message (Mobile) and FG - Mobile Top Bar when Viewing Conversation elements are also shown when the FG - Conversation (Mobile) element is visible.
FG - Add GIPHY to Message
FG - Add GIPHY to MessageThis element is hidden on page load, and only becomes visible when the Current User clicks the Button Attach Giphy (Desktop) or Button Attach Giphy (Mobile) elements.
FG - Send Message (Mobile)
FG - Send Message (Mobile)This element is hidden on page load, and only becomes visible when the page width is less than 600 pixels, and the Current User selected a Conversation to view. At this time, the FG - View Conversation (Mobile) and FG - Mobile Top Bar when Viewing Conversation elements are visible as well.
FG - Video Chat
FG - Video ChatThe FG - Video Chat contains the HTML iframe for Hellochat 3.0 so that Users can video chat with each other. It also contains other waiting and ended state elements that are shown when Users are waiting for a video chat to start, or the Current User's video chat just ended.
When only one person in a Conversation has clicked to enter the video chat, that User is shown this Group Video Chat (Waiting or Ended State) element within the FG - Video Chat element:
Similarly, when the app detects that a video chat just ended, and the Current User hasn't yet closed the video chat, they will be shown these elements within the Group Video Chat (Waiting or Ended State) element.
If two or more Users are online and clicked the video chat button within the same Conversation, the HTML iFrame (Hello 3.0 Chat) element is shown so that the Users can chat with each other. For more information on how this works, please refer to the O. Video Chat workflow folder.
Immediately after a new User signs up for your application, they will be navigated to this onboard page. The onboard page contains four 'step' groups, that welcome the Current User, asks the Current User to upload a profile picture, asks the Current User for their website link, and asks the Current User to write a few sentences about themselves. After the Current User completes these steps (or skips them), the last onboard card shows a 'continue' button which navigates them to the messages page.
A page where you can include your application's privacy policy.
The profile page allows Users to view their own profile information, and the profile information of other Users in the application.
The Follow/Unfollow Button on the Profile Page
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.
The Message Button on the Profile Page
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).
The Edit Profile Buttons on the Profile Page
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.
A page where you can include your application's Terms of Use.
The UI components page consists of pre-built, responsive elements that you can copy+paste onto new pages (shown in the video below).
Within the template are four 'page template' designs. These are pre-built, responsive pages (without data/workflows) that you can duplicate anytime you create a new page to save some time.
View the 4 page template designs here.
This page allows Users to reset their password incase they've forgotten it. After a User requests a password reset link be emailed to them, the link in that email will navigate them to this page. On this page the User will type and confirm their new password.
The "page not found" page.
Last updated
