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.
There is a demo workflow that should be deleted on this page. Please refer to this section of the Setup Guide for instructions.
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/Edit Profile element is shown to the Current User:
When the Button Follow/Edit Profile element is shown, and the Current User isn't yet following the person whose profile they are viewing, the Button Follow/Edit Profile 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 Edit Profile Buttons on the Profile Page
When the Current User is viewing their own profile page, the Button Follow/Edit Profile element will be visible if the current page width is greater than 725 pixels; the button's text will be "Edit Profile". If the page width is less than or equal to 725 pixels, the Button Edit Profile (Mobile) element will be visible instead.
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
