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.
Go to to the page builder and open up the Custom tab.
Next, click new component. This will pop open a panel where you can enter in your custom HTML, CSS and JavaScript.
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.
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"));
Your custom component properties allow you to add configurable properties that will be displayed in the properties tab on the page builder.
Your custom component dependencies allow you to add references to external stylesheets. For example enter in bootstrap CDN:
Dittofi will then take care of loading that CDN efficiently and you can then use the classes from that library.
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.
Last modified 5mo ago