Setting a repeaters background colour based on a hex code in a database

This tutorial arose after this thread on the Corvid Forum.

In this tutorial

• we show you how to use a third party integration

• we show you how to use the repeater APIs.

• we show you how to create a dynamic background.src

Step 1. Add the elements

In this tutorial, we're just using a repeater. and the default repeater container You can add as many elements as you like to your repeater, connecting them through the dataset settings panel. We've given our repeater the ID '#myRepeater' and the container the ID '#myRepeaterContainer'.

Step 2. Configure the database

In our database, we've only got two fields, the default title field which displays via the settings panel on the repeater and the 'hex' field, which is set up as shown below. Make sure that none of the entries in the 'hex' field contain '#' like normal hex entries would.

Step 3. Add the code

The code in this tutorial is fairly simple.

The first three parts are onReady listeners to make sure that the elements have loaded.

$w.onReady(function () {
    $w('#dataset1').onReady( () => {
    $w('#myRepeater').onItemReady(() => { 
    });
    });
});

The next part uses forEachItem to make sure that all the elements update correctly.

$w.onReady(function () {
    $w('#dataset1').onReady( () => {
    $w('#myRepeater').onItemReady(() => {
        $w('#myRepeater').forEachItem(($i, data, i) => {
        });
    });
    });
});

The final part deals with setting the background. This is where we use the 3rd party API to set the background colour. DummyImage.com provides the ability that's needed to change the background.

$w.onReady(function () {
    $w('#dataset1').onReady( () => {
    $w('#myRepeater').onItemReady(() => {
        $w('#myRepeater').forEachItem(($i, data, i) => {
            $i('#myRepeaterContainer').background.src = "https://dummyimage.com/1/" + data.hex;
        });
    });
    });
});

And that's it. You can publish your site and sync your database.

If you want to see a demo, check out this site, which was built by @Heath H-M.