Four Steps To Build A Login Page With The UI Builder

1 week ago | Rogelio Wilderman

Four Steps To Build A Login Page With The UI Builder

The user interface builder allows you to create your own screens with drag and drop components. It's easy, fast and fun! With the UI Builder, you can define both the fields that are displayed on the screen (such as textbox or date picker)…

This article will give you step-by-step guidelines on how to build a login page with the interface builder.

Steps to build a Login Page with the UI Builder

1- First, create your module or use an existing one. If you are not familiar with how to do this, please read this blog post: Manage your modules easily .  Once you have created your module, open it and go to the "Screens" tab.

2- Click on "+ New Screen".

3- Enter a name for your screen and click on "Create".

4- The UI Builder will open. From here, you can start Build a Login Page.

The UI Builder employs a grid system architecture to allow you to create fully customisable pages with the precise appearance and feel you desire. Login pages, which serve as the portal to your CMS, are a perfect area to put some of that customizability to work by branding even the tiniest features of your application. See how simple it is to Build a Login Page without writing a single line of code in this guide.

*This is a high-level overview of how to use the UI Builder to Build a Login Page. Check out our documentation articles on building pages and designing grids for a more detailed step-by-step guide.

Let's get started!

Step 1: Make a user interface page.

Start with a blank page, free of any additional layout, while you're in the UI Builder. UI pages can be used for a variety of purposes, not only login pages!

Add a grid to the page container after it has been opened. The selections for the grid will appear on the left side of your screen. To create your own layout, you may change the number of rows and columns as well as the widths. You may also customise how responsive your page is by scaling the column widths for different device views.

Step 2: Create a layout for your page.

We're putting the login form inside a panel since we want our pages to appear decent. Drop a panel right inside a column to add it to your UI page.

We'll need to add another grid to the panel to  build a page builder.

(As a quick tip, click the duplicate icon next to the plus sign to duplicate the grid component and develop even faster.) (Excellent!)

For a more personalised look and feel, you may add branded photos to your grid columns here. To add a picture to the page, either upload one, choose one from your public files, or paste the image's URL. You can move your image around as much as you want.

Step 3: Create the login POST in step three.

We must first build up the POST page by developing a new HTML page using a POST method before proceeding with the UI page.

You'll need two input variables for this endpoint: an email address and a password, which users can use to check in to your app. These two text input variables should be created.

You can write the needed action that logs in the web user using these two variables (you'll also need to set up an authentication profile if you haven't already).

When you're ready, write an action to log in a web user using the provided credentials.

The user will then be redirected to the endpoint of your choice.

Step 4: Add a form to your webpage.

The final step is to add a login form to your user interface page. This is accomplished by adding two inputs to one of the columns, one for the user's email address and the other for the password. Simply open the settings for each input and name them the same as the corresponding input variables on your POST page.

Add more grids to your page to establish the structure you need to keep your form intact.

This allows you to ensure that your page's responsiveness adapts to diverse device views correctly.

Finally, open the settings for your form and choose your POST endpoint from the list. That's all there is to it! You now have a fully functional login page.

You'll need to adjust your authentication profiles to completely implement as your application's login screen. But that's a topic for another article

In the meanwhile, give it a shot and see how it goes. To try it out, schedule a personal demo.

Conclusion

The UI Builder is a great tool for quickly creating custom login pages without any coding. With its easy-to-use interface and wide variety of login page design options, you can create an attractive and professional login page in minutes. In this guide, we've walked through the basic steps of how to build a login page using the UI Builder. Be sure to check out the UI Builder's documentation for more details.

YOU MAY ALSO LIKE

If your login credentials fall into the wrong hands, Twitter can be a strong soapbox for you, your brand,…
When using a Windows 10 computer with an administrator account, you'll enjoy several perks and save…
We're continuously looking for methods to improve conversion rates and encourage consumers to participate…