Custom HTML Component

In some instances, pre-built components or combinations of components just don’t quite achieve the results you need. For those cases, we now offer the Custom HTML component.

Sometimes you want your app or website to deliver an experience that you’ve already see built elsewhere, or even built previously yourself.

Rather than try to reinvent the wheel with Backendless components, you can simply take the raw HTML, along with the CSS, to instantly recreate that UI.

The Custom HTML component, available free in Backendless Marketplace, lets you insert your own raw HTML code into your application. You can use this code to achieve any effect you desire that’s achievable with HTML.

Later in this article, we will show you how the example below was achieved with a single Custom HTML component and a single Extension in UI Builder.

Read the full documentation here.

How to Install the Custom HTML Component

Installing custom components from Backendless Marketplace is super easy. First, in UI Builder, select the Components tab.

There, you will see a button labeled Install Component. This will take you to the library of components available in the Marketplace.

When you click Install Component, you will open a list of available UI Components to install.

Select the component you want and click Install.

When you return to the User Interface tab, you will see a new section added to your toolkit on the right-hand side called Custom Components.

You can then simply drag the component onto your canvas just like any other UI Component.

How the Custom HTML Component Works

When added to your app, the Custom HTML is perhaps the most straightforward custom component imaginable. Simply drop the component on your UI Builder canvas, paste or write in your HTML code, and you’re done.

The best way to show just how powerful this component can be is to show a simple yet beautiful example. Returning to the example at the top of this article, we will recreate the output of this CodePen by Erin E. Sullivan in minutes (or less!).

First, we drop the Custom HTML component onto a blank page canvas.

Next, let’s pop over to our Theme and create a new Extension called CustomHTML. Let’s drop the CSS from the CodePen in there.

Now, let’s hop back to our canvas and add the HTML code to the custom component.

That’s it. Seriously. And this is the result:

Available Options and What They Mean

Once you have placed your component, when you select it, you will see all of the available options (properties) for the component in the toolkit area. These are the default settings for the component that you can easily adjust.

The available properties are described in the table below. For more information, visit the Custom HTML GitHub repo.

Unlike other custom components, the Custom HTML component has only one property and no additional actions. Everything in the component is controlled by the HTML (and CSS) you include in the component itself.

When you click on the Logic icon or tab for the component, you will see the modifiable event handlers, just as you would with a standard component. However, the main logic for the component – the logic that makes it work – is hidden to protect it from accidentally being broken.

Additionally, in the Logic area, you will also find all available data binding properties.

That’s it! Ready to try it for yourself?

The Custom HTML component is one of many custom components available now in Backendless Marketplace, completely free!