Each data-row inside of your database is a repeated row inside a repeater.
When you have 50-data-rows inside of your DB and you load these 50 data-rows into your repeater, your repeater will show you 50 items generated out of your database.
As we know, everything starts with --> IMPORTS & $w.onReady if it comes to wix-coding.
If you are working with datasets, an import of (for-example) Wix-Data is not needed. At this moment i want to warn those beginners, who tries to mix Wix-Data-APIs with DATASET-CONNECTION and settings inside the PROPERTY-PANEL, in most cases --> those beginners will cry for even mire help, because failing to build up a nice working VELO-CODE based setup.
So let's start with first preparing some EXAMPLE-DATA for our REPEATER....
let exampleData = [
{
"_id": "1",
"firstName": "John",
"lastName": "Doe",
"image": "http://someImageUrl/john.jpg"
},
{
"_id": "2",
"firstName": "Jane",
"lastName": "Doe",
"image": "http://someImageUrl/jane.jpg"
}
];
Following by ---> $w.onReady() which will load the wix-page and get our page ready...
$w.onReady(()=> {............................});
Because we are totaly BEGINNER, we trying always to use CONSOLE-LOGS, to myke our own generated CODE more readable, understandable and plausible.....
$w.onReady(()=> {console.log('page ready...');
});
Wohooo first initial step done.
So what now about our repeater and the colored repeater data-rows?
Not possible to do so? Let's check it out!!!
First we still need some code to load the EXAMPLE-DATA into our REPEATER...
$w('#repeater1').data = exampleData;
And when the REPEATER got his data, we need to make sure, so the repeater shows all data automatically, when the repeater is ready....
$w('#repeater1').onItemReady(($i, iData, i)=>{
});
The MAGIC-TRIPPLE-i !!!
Ok, what next? What else do we need?
Of course we need still some elements to be added into ou repeater like ..
a) Text-element
b) Buttons
c) Dropdowns
d) Images what ever.
In our case we will need a box, which we will add to our repeater setting it's color to 100%-transparent --> this makes the added box invisible. We also strech the box to the full size of a repeated item (container) inside our repeater --> this will be our BACKGROUND later, for showing color on specific lines.
Till here everything clear ?
So let's continue .... (summarizing our code)... we will get some code like...
let exampleData = [
{
"_id": "1",
"firstName": "John",
"lastName": "Doe",
"image": "http://someImageUrl/john.jpg"
},
{
"_id": "2",
"firstName": "Jane",
"lastName": "Doe",
"image": "http://someImageUrl/jane.jpg"
}
];
$w.onReady(()=> {console.log('page ready...');
$w('#repeater1').onItemReady(($i, iData, i)=>{
console.log('Item-Data: ', iData);
console.log('Index: ', i);
});
});
Let'S say our added box-element has the ID --> 'boxBG' <-- which will represent the colored background.
We have in this example a data of 2-items (2x-data-rows), which we are pushing into the repeater. Inside the repeater there are some elements, including text for first and last-name, and an image + button......
let exampleData = [
{
"_id": "1",
"firstName": "John",
"lastName": "Doe",
"image": "http://someImageUrl/john.jpg"
},
{
"_id": "2",
"firstName": "Jane",
"lastName": "Doe",
"image": "http://someImageUrl/jane.jpg"
}
];
$w.onReady(()=> {console.log('page ready...');
$w('#repeater1').onItemReady(($i, iData, i)=>{
console.log('Item-Data: ', iData);
console.log('Index: ', i);
//------------------------------
$i('#myImageIdHere').src = iData.image;
$i('#txtFirstname').text = iData.firstName;
$i('#txtLastname').text = iData.LastName;
$i('#myButtonIdHere').onClick(()=>{
console.log('click');
});
});
});
And now the final job we have to do to get our wished functionality.... to get our colorized Rows.....
let exampleData = [
{
"_id": "1",
"firstName": "John",
"lastName": "Doe",
"image": "http://someImageUrl/john.jpg"
},
{
"_id": "2",
"firstName": "Jane",
"lastName": "Doe",
"image": "http://someImageUrl/jane.jpg"
}
];
$w.onReady(()=> {console.log('page ready...');
$w('#repeater1').onItemReady(($i, iData, i)=>{
console.log('Item-Data: ', iData);
console.log('Index: ', i);
//------------------------------
$i('#myImageIdHere').src = iData.image;
$i('#txtFirstname').text = iData.firstName;
$i('#txtLastname').text = iData.LastName;
//-----------------------------------
if(i===1){$i('#boxBG').style.backgroundColor='red';}
if(i===3){$i('#boxBG').style.backgroundColor='green';}
if(i===7){$i('#boxBG').style.backgroundColor='blue';}
$i('#myButtonIdHere').onClick(()=>{
console.log('click');
});
});
});
You of course also can add a special function to mark for example every second or third row to mark it automatically..... and so on......
.....continue......