Collection Row Delete Button

Ask the community
,
1

Hi guys,

I have built a form that collects data about damage to our company vehicles, allowing users to add descriptions and an image for each record. These can then be recalled on the same page by selecting the vehicle ID, and the user can review all the existing submissions.

Thankfully, damage is not permanent, so once it’s repaired, I would like to be able to delete that row in the collection, by selecting the correct record on the webpage.

I have done a lot of looking around to see if there’s a simple way to do this but they all seem to involve code and I have zero coding background - I understand many of the words, but none of the meaning.

What I have found so far:

export function btnDelAll_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
// Create a function to delete the current rows in the book dataset
async function deleteAll () {

    // Continue the deletion until the dataset has no row 
    **while**  (  $w ( "#dataset1" ). getCurrentItem () ) { 
        **await**  $w ( "#dataset1" ). remove ();   
    }  

}

// Delete rows after book dataset loads any data
$w ( ‘#dataset1’ ). onReady ( deleteAll );

// Refresh to load more data into dataset
$w ( ‘#dataset1’ ). refresh ();

and

$w ( “#dataset1” ). onReady ( async () => { if ( $w ( “#dataset1” ). getCurrentItem ()){
await $w ( “#dataset1” ). remove ();
while ( $w ( “#dataset1” ). hasNext ()){
await $w ( “#dataset1” ). next ();
await $w ( “#dataset1” ). remove ();
}
}
});

The first code snippet works, but it deletes entries one-by-one until they’re all gone - this much I understand, so is wholly unsuitable for my purposes!

I’d be really grateful if someone could help me get this button working.

Many thanks.

Image for reference:

754×936 382 KB

2

What you will need?

  1. A DATABASE with all it’s content.
  2. A —> TABLE!
  3. A → DATASET → connected to the → TABLE
  4. DATASET → setted to → READ&WRITE
  5. 1x DELETE-BUTTON

First-Part done! Now you should be able to see all your RECORDS inside the table! And also you are now able to select the row-data you need to be deleted.

Attention if you are working on a dynamic page → you will have to create a second non-dynamic DATASET which will be connected to the TABLE.

Now the coding part. (Paste this onto your page where you have located your TABLE… (do not forget to activate DEV-MODE in your Wix-Editor first)…

With this code-part you should be able to get every single row-data and row-index, by a click onto a choosen table-row, take a look into console.

How to use CONSOLE? → You can find RESULST inside the already given Wix-Console in your PREVIEW-MODE, or if you for example are using GOOGLE-CHROME → press F-12 and navigate to CONSOLE.

$w.onReady(()=>{
	$w('#myDELETE_BUTTON_ID_here).onClick((event)=>{
		$w('#myTableIDHere).onRowSelect(()=>{console.log(event);
			let rowIndex = event.rowIndex; console.log(rowIndex);
			let rowData = event.rowData; console.log(rowData);
		});
	});
});

And from this point you now should be able to complete all actions you want.
Take a look into the API-Docs which will guide you.

BTW: also do not forget to replace all IDs of your used elements → “#table1” / “#button1” and so on…

Good luck & happy coding!:wink:

3

Hello!

Thanks for your detailed breakdown of the process. I used that approach and ended up stumbling upon a slightly different approach:

$w . onReady (()=>{
$w ( “#confirmBtn” ). onClick (( event )=>{
$w ( “#dataset1” ). getCurrentItem ()
$w ( “#dataset1” ). remove ()
console . log ( “Record Deleted” );
});
});

To be honest, I have no idea whether this code is flawed, but it seems to be a simple solution that’s working for me right now.

The ‘confirm button’ is a two-step process so no one just goes wildly deleting things by accident! :sweat_smile: