Custom

In this tutorial we show you how to add your own custom coded component into Dittofi in 7 quick and easy steps

In Dittofi it is possible to add your own custom HTML, CSS and JavaScript component to the preexisting list of Dittofi elements and Layouts. This can be useful to help implement more custom features into your app.

In this article we will show you how to do this in 7 quick and easy steps.

Step 1. The custom tab

Go to to the page builder and open up the Custom tab.

Step 2. Add a new custom component

Next, click new component. This will pop open a panel where you can enter in your custom HTML, CSS and JavaScript.

Step 3. Name your component

Next, give your component a name, in our example let's call it "Alert Button".

Next, you can give your component the category "Basic".

Note, you don't need to pick a library. This is to add a library like bootstrap.

Step 4. Write your HTML, CSS and JavaScript

You can add custom HTML and CSS to structure and style your custom component. To do this, you'll need to either type or copy and paste in your HTML as below.

In our example we enter the following block

// Example custom HTML

<div data-id="my-custom-id" class="red">
    <h1>Test</h1>
</div>

Note, Dittofi generates ids for each component so you can't write something like <div id="my-custom-id"></div> as we will overwrite it.

Enter your custom CSS in the same way. In our example we enter the following block.

// Example custom CSS
.red {
color: red;
}

Next you can enter in your custom JavaScript into the box marked JavaScript. This will give our button some functionality. In our example we enter in the following block.

// Example custom JavaScript
var item = document.querySelector('[data-id="my-custom-id"]');
item.addEventListener("click", (e) => alert("Alert"));

Step 5. Component properties

Your custom component properties allow you to add configurable properties that will be displayed in the properties tab on the page builder.

Step 6. Dependencies

Your custom component dependencies allow you to add references to external stylesheets. For example enter in bootstrap CDN:

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Dittofi will then take care of loading that CDN efficiently and you can then use the classes from that library.

Step 7. Save and test your component

Try saving your new custom component and dragging the component onto the page.

In our example, when we drag on our new custom component we can see the word "Test" with the red CSS applied. Clicking on the text brings our alert popup as expected.