Building Angular/Bootstrap forms better & faster

Photo by Heather Lo on Unsplash

It’s been more than a year since I published on Medium, but these COVID-times gave me some extra time to write & code on side projects.

This post is about a tool we created internally at Appdnd (App Design & Development) in order to improve our development process.

We’re spending a lot of time building user interfaces in Bootstrap. As a result, we’re also spending a lot of time on the Bootstrap website looking at how we can achieve certain things and Googling for solutions to common problems (aligning, formatting, …). So we tried to put this knowledge into this tool.

When you enter the tool for the first time you’ll need to perform a very short registration (email/first name). This has 2 reasons (no, I will not spam you):

• By logging in, you will be able to save some widgets.
• In the past, we made other tools available, but we had no clue if the tools were used and who was using it.

So, let’s get started:

When you log in you will see a screen like:

Basically, the most important area is “4” where you can build your layouts.

But let’s quickly go through all of them:

1. When you press the blue button on the top-left, you will go to an overview of your previously stored widgets
2. Here you can give your current widget a name
3. Button bar with some general functions:
   - Save: Save the current widget
   - Edit/Generate: Toggle between the editor and the code generator
   - Gear symbol: Make some general settings
   - Delete symbol: Deletes the current widget
4. This is the editing area where you can build up the widget
5. Properties panel: here you can set properties for the currently selected control.

Now let’s demonstrate how you can create something basic and also generate the code for it.

We will create the following form:

Click the “Add” button (in area 4):

Then you will be able to add some of the most common controls.

Add ‘Row: 2 Columns’: this will add a row with 2 columns.

Then add an ‘Input’ into the first column. On the right side, you can change the properties of the input field that you just created:

When adding an input you can select the exact input type by changing the subtype. Select subtype ‘Text’ for the first input field

And also configure the correct label: ‘Name’. Note that the fields ‘Id’ and ‘Binding’ will be filled in automatically after filling in the label, but you can change if needed.

Now add the second input ‘Age’ in the right column and select subtype ‘Number’.

By now, you should have created the first row:

Create the second row by adding again a row with 2 columns (select ‘Row: 2 Columns’).

Add an input ‘Extra info’ in the first column with subtype ‘Textarea’.

For the ‘Gender’ selection, we will now add a control of type ‘Selection’:

• Change the subtype to ‘Radio button list’
• Change the control to ‘Bootstrap 4 Custom’: this will create a better-looking radio button list than the default one
• Add 2 items to the list: Male & Female

At this stage we have:

Finally, we will add the button by selecting ‘Add’ > ‘Button’. Give it the label ‘Save’. And select the checkboxes:

• Outline: the button is outlined instead of filled
• Block: the button spans the full width

Finally, you can press the ‘Generate’ button at the top-right. This will bring you to:

This screen has 2 sections:

1. At the top (in the big textbox), you find the generated code
2. The second part contains a preview of the generated code. Basically you already saw a preview during building your widget, but since it is using another mechanism (other code) it could also slightly differ.

Just copy & paste the generated code into your project and finetune it to your own needs.

So… I hope I provided you with a tool that can give you some help during your own development. Let me know if it is helpful and where it can improve!