HubL (pronounced as Hubble) is Hubspot’s very own templating language which can be used as a mediator or a binding tool between your website and your content stored in HubDB. Learning HubL is a fairly simple task as it adopts a lot of features similar to other programming languages like Python, C, etc.
Hi! This is Sumeet Hande, a frontend engineer at Addend Analytics and in this blog we will look at some basic functionality which HubL provides us with and learn some HubL syntax.
HubL:
There are three different categories of sentences you can write using HubL. They are as follows:
- Statements
A statement in HubL is written as shown below:
Statements are used to define variables or do more complex stuff like looping over an array. To define a variable, we use the ‘set’ keyword followed by the variable name. We then assign a value to this variable using an assignment operator. Unlike a lot of programming languages like C, Java, C++ where we need to mention data types of variables, we need not do this in HubL.
- Expressions
An expression in HubL is written as shown below:
Expressions evaluate to a value. When we declare variables using statements, to view or display their values on a page, we use expressions. For example, outputting the details of a Blog author using expressions. Here, the details of an author will be stored in separate variables like name, surname, blogs, etc and then we can access the content from these variables by using the expression syntax wrapped around these variables.
- Comments
Comments in HubL are written in a manner shown below:
Comments aren’t executed by the templating engine and they won’t be outputted in the rendered source code. Comments can be a great way for developers to organize their code and make it much more readable.
HubL can be considered very much similar to Python or javaScript. Just like we can use complex data types like arrays in these languages, we can use lists in HubL as well to store sequential data. Below is one example of a list created in HubL and how to access it’s elements:
HubL also has Dictionaries to store more complex structures like key value pairs. Following is one example which shows how a dictionary data type is created and accessed in HubL:
Just like there are functions which can be created in other programming languages, HubL has macros which behave exactly like functions. Following is one example of how macros are written in HubL:
A macro begins with a ‘macro’ keyword in a statement followed by the macro name and parentheses. We can pass in arguments to macros just like we can do with functions. Notice that when a macro block ends, we specify it using the ‘endmacro’ written as a statement. Such block syntax can be found everywhere in HubL.
Conditional statements like ‘if’ and ‘if else’ can also be written in HubL. See an example below which specifies the if and if else statement use case:
Just like we use an end statement for macros, the same is followed here for the ‘if’ statement.
Loops in HubL use the for syntax to loop over lists or dictionaries. In addition to the already available properties to detect the current index in a loop along with first and last cycles, HubL provides an option of filters which can be used to place complex conditions to retrieve data from lists or dictionaries. Following is one example of how for loops can be used in HubL:
Filters in HubL:
Since HubL is a templating language, the main goal of HubL is to flow data as quickly and easily as possible on a website page or a template. In order to achieve that goal, HubL provides us with a variety of filters which we can use on data. Let’s have a look at a few fundamental types of filters.
The length filter:
Consider the following example shown below which depicts the length filter:
To use the length filter, we first write the variable name or list name on which we want to use the filter and then use the pipe character ‘|’ (the key below the backspace on the keyboard) and then specify the filter.
In the above example, we are using the length filter to access the length of the ‘mySeq’ list.
The Convert RGB filter:
We can use HubL in css context as well. See the example below,
In this example, we are using the convert_rgb filter which takes the hex equivalent of a color as input and outputs the rgb equivalent of that color. Here we have a brand_color variable which is set to a color in hex form. Then while using it on a link while hovering, we used this same color but in rgb format. Because of this filter, it was easy to quickly convert this color in the rgb format and use it then and there.
The Reject Attribute Filter:
Filters can also be used to quickly form subsets of data. The example shown below illustrates the Reject Attribute filter.
In this example, we have a dictionary which stores information about books. Each book object has a boolean variable called ‘read’ which gives information whether the book is read or not. Here we are using the Reject attribute filter to create a subset of those books where the read property is false. Then we loop over those unread books instead of looping over everything.
Filters like the reject attribute can be very handy while dealing with huge datasets in cases like Blogs, HubDB etc where extra loops can make code difficult and unclear to understand. Ideally, we should reduce the calls made to HubDB as much as possible by first retrieving the entire data and storing it in a dictionary or a list and then performing operations on them by using filters.
The Pretty Print Filter:
We can use this filter to display all information related to a certain variable and the data stored in that particular variable. This filter can be handy to study certain variables we are not familiar with. HubSpot provides tons of built-in variables which can be studied using this filter. For instance,
Here, we are trying to get hands on all the information which is stored in this pre-defined variable called site_settings using the keyword ‘pprint’ which is the pretty print filter.
These were a few fundamental types of filters which we can use on variables containing large amounts of data which can help us manipulate and easily flow the data into our web page or template. With these basic filter types and syntax of HubL, anyone can get started to write some HubL code.
Sumeet Hande
Frontend Engineer
Addend Analytics