HowTo use the custom component

Using custom HTML and Javascript in a single component.

Written by Robin Mulder Updated over a week ago

Ever wondered how to add some custom code to a page? Look no further, the answer is here!

Because Betty Blocks is a no-code platform with an escape hatch, we added the custom component. This way you can implement your own HTML and Javascript code in a matter of seconds. In the component list within the UI builder, you can find the custom component.

With this simple component, it is possible to create your own custom component with HTML and Javascript. Now you may be thinking, what about my CSS? CSS can be added into a separate stylesheet. If you want to know how to add a stylesheet to your page, click here.

Where do I start? Drag the Custom component to the desired place on the page, then open the component to see the HTML editor. As you can see in the editor: This content will be wrapped in <div>, so keep in mind that the content of your HTML will be put between <div></div> tags.

In the JS tab, you can write your Javascript. There is a standard line of code which you can replace with your own custom code.

Now you might think, I made a dozen javascript functions in a javascript template (How to create and add Javascript templates), do I need to copy / paste the function on the page?The answer is simple, no. You can call your function from the component the same way as in a javascript.Example: myFunction(); This way you can have the functions in the templates to keep an overview of your code.

A great thing to remember is that you won't need to create event listeners because we made that possible with UI actions!

In the example shown above, you can see that we used jQuery. jQuery is implemented in Betty Blocks. This way we make it possible to use both Javascript and jQuery in the custom component.

Dynamic filled content

To connect the dots between the back office and front-end web pages you can use our template language. Our template language is based on Liquid and offers the possibility to fetch records stored on properties in webpages, components, templates and PDF files. Using Liquid in your custom component creates a way to fill in the empty spots in your HTML. You can use Liquid to fetch images, text, prices etc. You can also let Liquid create HTML by using loops and so much more!

To begin using this language in the custom component, you only need to remember one thing, the curly brackets used for the Liquid syntax are also used for other purposes. To make sure you run your Liquid function we changed the syntax a little bit for this component. If you want to parse data with Liquid you can change the {{ this.isLiquid }} syntax into: {{#ld}} {{/ld}}. To make use of the Liquid functions we changed the syntax into: {{#lf}} {{/lf}}.Maybe you noticed, but a handy mnemonic for the alternative syntax is: LD stands for Data output and LF stands for Function tags.How to use the template language?

The HTML and Liquid combined generate a bootstrap card element filled with data and a matching image. Because we used the "for loop" function, this single element will be parsed for each product inside the collection.

Reuse your work

An essential aspect of rapid app development is to reuse your work. Betty Blocks makes this possible by letting you save your code as a partial to implement this later on again in your app. What are partials?Important: If you change a partial at any point, all the other copies will change with it.

Blocks Store

Another option to reuse your work is to use your custom component as a UI component. To achieve this you can convert the custom component to a UI component which will appear in the Blocks Store! Even better, the block you created can be released into the Blocks Store and this way you can share it with colleagues. More information about the Blocks Store can be found here.