The Component Library
Last updated
Last updated
The Component Library is a collection of pre-built User Interface (UI) components that can be dragged and dropped onto your page to help you build beautiful interfaces faster. These UI components are fully responsive and are made up of containers, visual elements, and form inputs that can be individually customized once added to your page. Each component is a fully independent unit, but can be connected to each other or other parts of your app by adding workflows and data.
This guide will show you how to use these components to build a beautiful landing page in seconds and how to wire up the Signup and Login forms for full user authentication.
The UI components in the Component Library allow you to build a fully responsive and customizable app in seconds.
First, change your page layout to a Column container layout type in the page's Property Editor. This will allow your components to stack vertically when added to your page and the content to resize appropriately as the screen width changes.
Next, drag any number of components onto your page, one below the other. When dropping your component onto your page, the blue indicator on the editor canvas will tell you where it will land.
Components can be added within other groups, so make sure the blue indicator is at the very bottom of the last container.
Once you are done adding components, you will have a fully responsive landing page that can be customized to your liking.
Now that the skeleton of your landing page has been built, each element can be customized to your liking. For example, you can change the text in any of the text boxes or buttons by selecting the element and updating its Appearance or replace any of the placeholder images by selecting the image and uploading a new one.
As you add additional pages to your application, you can update the placeholder links on your page to navigate to those pages by adding a Go to page workflow action when the link is clicked.
To change the overall look and feel of your landing page, you can customize the font and color variables in the Style Variables subtab in the Styles tab. Since the font and colors used in each element is connected to a Variable, any changes made on the Style Variable level will cascade through your app automatically. Adjust the Style Variables so that your landing page matches your brand.
User Authentication is the foundation for almost every web application. By using the Header and Signup/Login components, you can set up a fully functionally signup and login flow in a handful of clicks.
Once you've added the Header and Signup/Login components onto your page, you'll need to connect the Signup and Login buttons in the Header to show the Signup/Login popup or the Signup/Login page, depending on the component you selected. Most of the workflows have already added to help you get started.
Open the workflow tab of the page that contains the Signup/Login component, and you'll see two workflows titled "When an element is clicked." The first workflow will control the Signup form and the second workflow will control the Login form. Select the first workflow event and change the element to "Button signup (Header)." This connects the Signup button to the workflow that opens the Signup Form. Similarly, in the second workflow event, change the element to "Button login (Header)" to connect the Login button to the workflow that opens the Login Form.
To sign the user up, start a workflow from the Signup button in the Signup form and add the "Sign the user up" workflow action. Here, you'll map the email input's value and password input's value to the workflow parameters so that the workflow action can register those two fields.
Next, we need to add a new field to the User data type so we can capture the name of the user on signup. On the data tab, select the User data type and add a new Field of type text called "Name". Going back to the signup workflow, add a new action after "Sign the user up" called "Make changes to Current User". Here, you'll map the Name parameter to the Input Name's value to update the user you just signed up with the name they entered.
As you continue building your app, you can add additional workflows here to navigate the user to the proper page after they sign up, or any other logic that your application needs.
To connect the Login button, start a workflow from the Login button and add the "Log the user in" workflow action. Just like with Signup, you'll map the email and password input's value from the Login form to the Email and Password parameters.
As you continue building your app, you can add additional logic here depending on what you want to happen after a user logs into your app.
There you have it, your landing page is now connected to a full user authentication workflow!
