Jump to content

Custom Delete button in html block


Go to solution Solved by Mathilda,

Recommended Posts

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.. 

Link to post
Share on other sites

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. 

Link to post
Share on other sites
  • 3 weeks later...
  • Solution
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!

Link to post
Share on other sites
  • 2 weeks later...

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. 

Link to post
Share on other sites
  • 3 years later...

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...