Bootstrap and 4D transformation tags

Do you need to access your 4D data from a web page but don’t have a designer in your team? Are you uncomfortable designing the pages yourself because deep down you believe that it’s full of complicated and unwritten rules? Well, have you ever thought about Bootstrap?
In this blog post, we’ll look at how to take advantage of Bootstrap’s framework to design web pages in no time! We’ll also provide you with a database example to see how it can be combined with 4D transformation tags.

HDI: Bootstrap and 4D transformation tags

4D transformation tags

Note: If you already know how to use transformation tags and just want to learn how to make them look better, skip this chapter. Or read on to refresh your memory…

Multiple 4D-specific tags are available to allow you to insert references to 4D variables, expressions, or different types of processing into static HTML pages sent by the Web server. These pages are called semi-dynamic pages.

The tags are inserted as HTML-type comments: <!–#4D…–> in order to be processed by 4D.

Keep these principles in mind when using tags:

• You must add the suffix “.shtm” or “.shtml” to force the parsing of HTML pages.
• Running a 4D method with 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF, or 4DLOOP from a web request is subject to the “Available via tags and 4D URLs (4DACTION …)” attribute value which is defined in the method properties. In the example below the sendEmployeesData method is set to be accessed via the web: 

To learn more about 4D tags, check out this video from 4D Summit 2016.

In our example, we’ll send a list of employees to our SHTML page. And thanks to the <!–#4DLOOP…–> tag, we can iterate through our array of employees. Then they can be displayed with the <!–#4dtext …–> tag. The final code will look like this:

<!--#4dscript/sendEmployeesData--> //Execute the 4D method
<table>
<tr><th>First Name</th>
...
<th>Email</th></tr>
<!--#4dloop empID--> //Loop through the array of employees
<tr> <td><!--#4dtext empFname{empID}--></td> //Display the employee first name
....
<td><!--#4dtext empEmail{empID}--></td> </tr>
<!--#4dendloop-->
</table>

Start your web server and run the code to see the results:

Not bad, but not great. No worries. Let’s see how Bootstrap can help beautify this …. especially since tables exist in the majority of programs and they’re an essential element for presenting data to end users.

bootstrap Tables

Using Bootstrap with 4D is straightforward: download the compiled version, copy it into the web folder of your database, and then include the JS and CSS files in your SHTML file.

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

Keep in mind that there are many versions of Bootstrap (version 4 is the most recent). In this blog post, we’re using version 4.

To see the power of Bootstrap, let’s visually improve our table.

It’s very easy to make it more attractive: simply add the .table class to the <table> tag to apply some visual formatting. Even better, if you’re fan of dark mode, Bootstrap has a .table-dark class for you. There’s even a .table-striped class to add a zebra striping style. And all of these classes can be combined depending on what you want to achieve. Open your SHTML file, add these classes, and select Run/Test Web Server from within 4D:

<table class="table table-dark table-striped">


Nice!

Bootstrap has an interesting list of table styles. Check out the documentation and see what works for you.

You can save a lot of time by using Bootstrap’s predefined design templates and classes. In this post, we’ve only scratched the surface of what can be done with the framework. See the full documentation and discover how Bootstrap, combined with the powerful 4D tags feature, can help you spice up your 4D web-based application designs.