Adding extra popup message to confirm record removal

[Volomeister]

On Details DataPage, I needed to add an extra popup message to confirm record removal. I am sharing below a script that adds an extra popup message when clicking on delete button:
 

<script>

if(typeof mainDataPageHandler == 'undefined') {


const GetEventListenerEnabler = () => {
    Element.prototype._addEventListener = Element.prototype.addEventListener
    Element.prototype._removeEventListener = Element.prototype.removeEventListener

    Element.prototype.addEventListener = function(type,listener,useCapture=false) {
     
        this._addEventListener(type,listener,useCapture)

        if(!this.eventListenerList) this.eventListenerList = {}
        if(!this.eventListenerList[type]) this.eventListenerList[type] = []

     
        this.eventListenerList[type].push( {type, listener, useCapture} )
    }

    Element.prototype.removeEventListener = function(type,listener,useCapture=false) {

        this._removeEventListener(type,listener,useCapture)

        if(!this.eventListenerList) this.eventListenerList = {}
        if(!this.eventListenerList[type]) this.eventListenerList[type] = []
        for(let i=0; i<this.eventListenerList[type].length; i++){
            if( this.eventListenerList[type][i].listener===listener && this.eventListenerList[type][i].useCapture===useCapture){
                this.eventListenerList[type].splice(i, 1)
                break
            }
        }
      
        if(this.eventListenerList[type].length==0) delete this.eventListenerList[type]
    }
    Element.prototype.getEventListeners = function(type){
        if(!this.eventListenerList) this.eventListenerList = {}
        if(type===undefined)  return this.eventListenerList
        return this.eventListenerList[type]
    }
}
if(Element.prototype.getEventListeners == undefined) {
GetEventListenerEnabler ()
}
const customAlertMessage = 'You are about to delete record'

const addCustomDeleteBtn = () => {
let deleteBtn = document.querySelector('.cbDeleteButton')
if(document.querySelector('#customDeleteButton') != null || deleteBtn==null) {return}

deleteBtn.insertAdjacentHTML('afterend', `<input type="button" name="Mod0DeleteRecord" id="customDeleteButton" value="Delete" class="cbDeleteButton">`)
deleteBtn.style = "display: none!important"
}

const AddCustomDeleteBtnListener = ()=> {
let customDeleteBtn = document.querySelector('#customDeleteButton')
if(customDeleteBtn==null || customDeleteBtn.getEventListeners('click') !=null) {return}

customDeleteBtn.addEventListener('click', (e)=>{
if (confirm(customAlertMessage)) {
document.querySelector('input[id*="Mod0DeleteRecord"]').click()
}
})
console.log(customDeleteBtn.getEventListeners('click') )
}
const mainDataPageHandler = () => {
addCustomDeleteBtn()
AddCustomDeleteBtnListener()
}
document.addEventListener('DataPageReady', mainDataPageHandler)
}

</script>

Just add it to the header or footer of your Details report DataPage