Custom Delete button in html block

[DesiLogi]

Does anyone know how to create a custom 'Delete' button that could be put in an html block in the Details view of a datapage. I need to use Rules to allow/disallow the deleting of a record. The standard 'Delete' button allows deletion of all records. So a custom button in an html block in a Section that can be hidden/unhidden in Rules would work- but I don't know how to code that. 

The code for a 'Submit' button is:

<div style="text-align: center;"><input class="cb_custom_btn" type="submit" value="SUBMIT" /></div>

Does anyone know how to modify this- I don't imagine changing 'submit' to 'delete' would do it.. 

[DesiLogi]

I found this code that is almost there. It requires the user to type in the word "Delete" into a virtual field though:

<SCRIPT LANGUAGE="JavaScript">

document.getElementById("Mod0DeleteRecord").style.display = 'none';

function MyFunction()
{

var stat=document.getElementById('cbParamVirtual1').value;

var del = "Delete";
if(stat==del)
    {
 
  document.getElementById("Mod0DeleteRecord").style.display = 'initial';

    }
else 

    {document.getElementById("Mod0DeleteRecord").style.display = 'none';

     }
 }


document.getElementById('cbParamVirtual1').onchange=MyFunction;


</SCRIPT>

I need the code to look up an existing field (not a virtual field, and it's a number field) and see if that field is null or not. If the field = null then I need to hide the Delete button, if field = not null then I need to show it. I've tried messing around but can't seem to get it to work. But the above code should be a good place to start if someone has a bit of expertise to give. 

[Mathilda]

On 1/26/2017 at 7:32 PM, DesiLogi said:

I found this code that is almost there. It requires the user to type in the word "Delete" into a virtual field though:

<SCRIPT LANGUAGE="JavaScript">

document.getElementById("Mod0DeleteRecord").style.display = 'none';

function MyFunction()
{

var stat=document.getElementById('cbParamVirtual1').value;

var del = "Delete";
if(stat==del)
    {
 
  document.getElementById("Mod0DeleteRecord").style.display = 'initial';

    }
else 

    {document.getElementById("Mod0DeleteRecord").style.display = 'none';

     }
 }


document.getElementById('cbParamVirtual1').onchange=MyFunction;


</SCRIPT>

I need the code to look up an existing field (not a virtual field, and it's a number field) and see if that field is null or not. If the field = null then I need to hide the Delete button, if field = not null then I need to show it. I've tried messing around but can't seem to get it to work. But the above code should be a good place to start if someone has a bit of expertise to give. 

Hi, I edited code, which you found. The Delete button will be hidden if value in the field is blank. Please note, field should be editable on details page, if you don't want to display the field on the datapage, you may hide the field using html blocks

<SCRIPT LANGUAGE="JavaScript">

function MyFunction()
{

var stat=document.getElementById('EditRecordField_name').value;

if(stat.length>=1)
    {
 
  document.getElementById("Mod0DeleteRecord").style.display = 'initial';

    }
else 

    {document.getElementById("Mod0DeleteRecord").style.display = 'none';

     }
 }
window.onload=MyFunction;


</SCRIPT>

Paste your field name instead of Field_name

Also I see that you were looking for the html code of delete button: 

<input class="cbDeleteButton" id="Mod0DeleteRecord1" name="Mod0DeleteRecord" type="submit" value="Delete" />

In case if you decide to use rules, you may use that code.

Hope that helps!

[DesiLogi]

That's really great- many thanks Mathilda.

[DesiLogi]

I have an updated issue- I keep getting the error "Data cannot be deleted. (Caspio Bridge error) (60028)" when I try to use the delete button as put here. Does anyone know what this would mean? The record is normally deleteable so I'm not sure what's going on with it. 

 

EDIT: no worries re this last entry- I had the 'Delete Record' option unchecked for Details page options. I didn't realize I still needed to have that checked using a custom delete button- but it all works now. 

[Vitalikssssss]

Hi,

I have recently tried to do something similar and came across the issue that custom button cannot serve delete event, so I have modified a script slightly.

Here is my button in HTML block:

<input class="cbDeleteButton" id="Mod0DeleteRecord1" name="Mod0DeleteRecord" type="submit" value="Delete" />

 and here is my code from the DataPage Footer:

<script>
document.addEventListener('DataPageReady', assignEvent);

function assignEvent(event){

  //assign click event to custom button
  document.querySelector('#Mod0DeleteRecord1').addEventListener('click', ()=>{handler(event.detail.uniqueSuffix)});
  //hide default button
  document.querySelector(`#Mod0DeleteRecord${event.detail.uniqueSuffix}`).style.display = 'none';
 
  document.removeEventListener('DataPageReady', assignEvent);


}

function handler(el){
  //click on default delete button
  document.querySelector(`#Mod0DeleteRecord${el}`).click();

}
</script>  

Hope it helps someone.

Regards,

vitalikssssss

[Mikey]

howdy! I have tried your code vitalikssssss and it refreshes the screen but does not delete the record. I am sure it is something I am doing.. but any suggestions why it does not delete the record?

 

Do I need to change any of your code? Also, this is a report list.

[EvSam]

I have not be able to get the <input> button to work for delete, BUT, I have been able to "hide" the delete button in a details page. If you enable the "delete" feature for the details, and then in the footer add some scripting, you can hide the delete button based on a condition. In my example, I had a calculated field with the number of sub-records related to the record up for deletion (i.e. a parent record like a contract with child records like tasks for that contract). I'd only want to delete the parent record if it doesn't have any child records.

in my example, calcfield:2 is a calculated field where I do a query for count of child records related to the parent. If there are any child records, then the parent record cannot be deleted.  Using the queryselector, use caution as this will pick the FIRST element element of class cbDeleteButton.

 

<script>

if ('[@calcfield:2]' > 0) {
 document.querySelector("input.cbDeleteButton").style.display = "none";
}

</script>