HowTo use the UI Builder's grid system to create a login page?

Learn how you can use the UI Builder's grid system to quickly create the perfect layout for your pages, applied to building a login page.

Written by Marcel Korporaal Updated over a week ago

After reading this article you will know:

How you can create a grid on your UI page.

How you can quickly generate the first row of your grid.

How to add more and more rows and columns to your grid.

Here's a small HowTo which will teach how you should implement and use the grid system.

If you've got no clue what the UI Builder's grid system is, it's best if you take a look at this explanation of the grid system. If you know what the grid system is, but want to know how you can use it in UI pages, continue reading!

Let's say you need a login page. You could use one of our templates, but that would be way to easy, right? Exactly. Let's create it ourselves!

Step 1: Create a UI page.

For this HowTo we're creating a blank page, without any further layout.

Once the page's opened, add a Grid to the Page Container. The Grid's options will open on left side of your screen. Select 3 columns in the options. You might not notice it directly, but check out the Object Tree at the top of your menu: The UI Builder generated 1 row, containing 3 columns for you in the blink of an eye, just because you selected 3 columns. Every column has a standard width of 4, because they're always created equal, and 3 times 4 matches 12, which is the total width of a grid row. You can adjust the width of every column to create your own, maybe not so symmetrical, layout. Since we're creating a login page in which your content will be centered, we'd like our columns to be 3, 6 and 3 columns wide, where the middle column is the 6.

In order to achieve responseviness on your page, set both the XS and SM widths of these columns to 1, 10 and 1.

Step 2: Design your page.

Since we want our pages to look nice, we're creating the login form inside a panel. So add a panel to your UI page. Drop it right inside the second, middle column. You'll see a panel, which's title you can change to you liking.

We're adding another grid to this panel, so we can built our form inside the panel. In this grid, selecting one column will suffice.

When you've selected a Grid you can add Grid rows to it by clicking the plus-icon at the top right of the blue frame. The same counts for adding Grid columns to a Grid row.

The button next to the plus, with the two rectangles, is to duplicate the component and all its child components. Very usefull!

For our login screen, two rows, with one column each, will suffice.

You'd like some branding as well. Throw an image in the first Grid row's column. Either upload an image; select an image from your public files; or paste the url of an image in order to put your image on the page. You'd probably like to center your image here. No problem! Add the "text-center" class to your Grid column in order to achieve this. You can do this by selecting the Grid column and go to the styles tab as you can see in the picture below.

Okay. The layout is done. We need log in page. Let's go on.

Step 3: Create the login POST.

Before we can go further in the UI page, we need to set up the POST page. This is a minor side step in this article since it has nothing to do with either the UI Builder or the grid system, but it is neccessary for our case. If you're already familiair with a login POST endpoint, you can go directly to the next step.

Create a new Custom HTML page with a POST method.

On this endpoint you'll need the two input variables which you can use to log a user in into your app, the email address and a password. Create these two text input variables.

With these two variables you can create the required action to login the web user. However, you'll have to set up an authenticationprofile if you haven't done this yet. Check out how you can do that at this short HowTo.

If you're all set, you can create the action. Start off with a Login Web User event. This tries to login a webuser using the given credentials. If this is successful, the a webuser variable has a value. If the provided credentials did not match an account, the webuser variable will be empty. So the next step would always be a condition checking if the webuser variable has a value. You can do this with an expression.

present?(var:webuser)

If this condition returns true, the user has been successfully logged in. If false, the login was unsuccessful.

Next up is to redirect the user accordingly. To which endpoint you'd want the user to be redirected is totally up to you.

The result of your action should be somewhere pretty close to this:

Now that we've handled that, we're going back to the grid system in the UI Builder.

Step 4: Create the form on your page.

Head back to your UI page.

Add a form (not dynamic form) to the second row's column. The submit button is instantly added to the form, but we also need two inputs. Add two Text inputs onto the form. One input for the user's email address, the other for the user's password. Open the input's settings by clicking on it. Give them the same name as the corresponding input variables have on your POST page.The label is what the user sees, so don't forget to give that a value as well.

Now we would like the inputs to be next to eachother if the screensize allows it.

Drop another grid into your page, in the same Grid column as your Form is on. Choose for three columns this time.

In order to keep your form fully intact, drag it onto the Grid row and drag all of the Grid columns onto the Form. Make sure you've got this right, if your Form is torn apart between more rows or columns it may not work anymore.

Give both your inputs and your submit button their own Grid column. The inputs need a width of 6, but an XS and SM width of 12. The submit button's column can always be 12 in this case.

You can check out if your page's responsiveness works by using the different device-views at the bottom left of your screen.

Only one step left to complete your login page.

Open your form's settings, and select your POST endpoint from the dropdown. You now have a working login page! However, you'll need to set the page you've created as the login page for your authentication profile in order to really use as your app's login screen. Check out how you can do this, and learn everything about authentication profiles, at this article.

If that's taken care of, your page is ready to process all your logins! That's one step closer to your very own customer portal, right?