Delete Rows using Delete Button

[Roie]

Is it possible to delete the row using the delete button? How to get the value of the rows?

[IliaLazarevskii]

Hi @Roie,

I suggest you get the contents of the DataTable control as an array, remove the row, and assign the control's value to the modified version of the array.
Here's how you can get and set DataTable's contents: Data Table — Plumsail SharePoint Forms Documentation

[StepanS]

Hello @Roie ,
I suggest to handle these rows by ID somehow. Maybe when you are filtering the rows/items in the list or library control, you could load the IDs of the records to dropdown and you do not have to let the people to click on the records, but somehow to load the data to "dropdown" and when they select ID "5" and then hit "Delete" button, then you will use PnP JS library and delete the row in the destination list/library and refresh the "List or library" control.

If you will give us more details, I could possible help you to write the code If I have time.

Stepan

[Roie]

Hi @StepanS ,

I added ID to my row, then I also added a textfield for them to input the ID Number they want to delete using the button. Can you help me to write the code? I want to use the DELETE button to delete the rows.

[StepanS]

Perfect, so you want to let people delete rows based on the ID which is filled in? So I come to your form, write down the ID = 12 and hit Delete - afterwards the library refreshes and row with ID 12 is gone?
Is it okay in this way?

Stepan

[Roie]

Hi @StepanS ,

Yes, exactly!

-R

[StepanS]

Hi @Roie ,
I got it for you
Some pictures:
When the ID does not exists in the list/library - as you can see, I wrote down "3", but there are only numbers "1" and "2".

Here comes number "2" and it is present in the list - after I clicked "OK" on alert window, the control "List or Library" is automatically refreshed. See the second picture with refreshed data.

DESCRIPTION TO CODE:

1. In Designer I put on canvas "List or Library" control named "ListWithItems"
2. Added Common field named: "fieldID"
3. Added Button with "Danger" type and on "Click" I added this function "deleteRecord();"
4. You paste the code below to the "JS" section
5. If you want to use, in the code "GetByTitle" - keep the variable "nameOfTheList"
6. I hate using GetByTitle, but I always use "GetById" - then you use the variable "idOfTheList"
   6.1 - ID Of the list you will find in the URL when you click on "List settings" - it is encoded so be careful for curly braces - give it to Chat GPT to encode it if you do not know how.
   6.2 If you want to use the Title of the List, just change the variable with the name of the list, where your records are stored - for example "List of My records" (My List is titled "TestList") - Be careful with internalName of the list and DisplayName - use DisplayName (what you see).

The CODE:

window.pnp = pnp;
window.$ = $;
window.fd = fd;
const nameOfTheList = "TestList";
const idOfTheList = "8d40c83d-058c-4d83-a0ad-c2d92b5f7ef4";

window.deleteRecord = () => {
  const recordId = fd.field("fieldID").value;
  pnp.sp.web.lists
    .getByTitle(nameOfTheList)
    .items.filter(`ID eq '${recordId}'`)
    .get()
    .then((items) => {
      if (items.length === 0) {
        alert("This number is not present in the list");
      } else if (items.length > 0) {
        const itemId = items[0].Id;
        pnp.sp.web.lists
          .getByTitle(nameOfTheList)
          .items.getById(itemId)
          .delete()
          .then(() => {
            alert("Record deleted successfully");
            fd.control("ListWithItems").refresh();
          })
          .catch((err) => {
            console.log(`Error deleting the record: ${err}`);
          });
      } else {
        alert("Multiple records found. Please check the list.");
      }
    })
    .catch((err) => {
      console.log(`I have not found the record: ${err}`);
    });
};

fd.spRendered(() => {});

That should be all. Please, do not hesitate to adjust the code, remove the alerts or some "catch" sections if you want to.
Necessary steps to do is:

1. Create Field or use the one you already created
2. Create button or use your already created - fill in "Click" property with the value I posted in the instructions
3. Insert JS

Here you go
If you have any struggles about it, please respond.

Have a nice weekend
Stepan

[Roie]

Will it work even if I use SQL in my List?

[StepanS]

What do you mean SQL in your list? You have Business Data Connectivity to a list? I do not think so. Or could you provide me with more information?
Thanks