Hide and disable DELETE button on a report details page

[KG360]

Hi all,

I need to hide and disable the DELETE button on a report details page based on the value of a calculated field. Can anyone please advise how that script should look like? 

Many thanks,

KG

[cheonsa]

18 hours ago, KG360 said:

Hi all,

I need to hide and disable the DELETE button on a report details page based on the value of a calculated field. Can anyone please advise how that script should look like? 

Many thanks,

KG

Hi @KG360,

I found this howto article that might be the answer to your question:

https://howto.caspio.com/tech-tips-and-articles/disabling-inline-edit-option-in-reports-based-on-a-condition/

 

You can also refer to this forum post:

 

Hope this helps!

[Queso]

Hi @KG360, you may check this another Caspio forum post for a related JS code: 

 

 

[Flowers4Algernon]

Hello! I think this post could be helpful, too!: 

 

[KG360]

Many thanks, everyone! I will review it in depth shortly.  It seems though as if the solutions are for inline editing and form submit.

I need to hide and disable the delete button in a reports details page based on a condition of a calculated virtual or regular field.

Thanks,

KG

[CoopperBackpack]

Hello @KG360,

If I understood you correctly you want to remove the 'Delete' button based on the condition on the Details page.

The field with a condition is a Calculated Value field (can be a Virtual field or Table field).

If this is correct, please test the following script for the Virtual field.

You need to change the Virtual field number if needed and a condition (in this example the condition is 'value is equal to 2020')
 

<script>
  document.addEventListener('DataPageReady', deleteButtonHandler)
   
  function deleteButtonHandler(){
    const calcValueField = document.querySelector('input[name="cbParamVirtual1"]'); //change the Virtual field number if needed
    const btn = document.querySelector('.cbDeleteButton');
   
    calcValueField.addEventListener('change', function(){
     
     if(calcValueField.value == '2020'){
        btn.remove();
      }
      
    })
     
   document.removeEventListener('DataPageReady', deleteButtonHandler);
  }
</script>

For the Table field, you may test the following script.
Please change the field name (in this example the field name is 'Status'; please note that fields on the Details page has the 'EditRecord' prefix). And change a condition.

<script>
  document.addEventListener('DataPageReady', deleteButtonHandler)
   
  function deleteButtonHandler(){
    const calcValueField = document.querySelector('input[name="EditRecordStatus"]'); //change the field name
    const btn = document.querySelector('.cbDeleteButton');
   
    calcValueField.addEventListener('change', function(){
     
     if(calcValueField.value== '2020'){ 
        btn.remove();
      }
    })
     
   document.removeEventListener('DataPageReady', deleteButtonHandler);
  }
</script>

Feel free to update this thread if you have further questions. 

[KG360]

On 5/30/2023 at 3:08 PM, CoopperBackpack said:

Hello @KG360,

If I understood you correctly you want to remove the 'Delete' button based on the condition on the Details page.

The field with a condition is a Calculated Value field (can be a Virtual field or Table field).

If this is correct, please test the following script for the Virtual field.

You need to change the Virtual field number if needed and a condition (in this example the condition is 'value is equal to 2020')
 

<script>
  document.addEventListener('DataPageReady', deleteButtonHandler)
   
  function deleteButtonHandler(){
    const calcValueField = document.querySelector('input[name="cbParamVirtual1"]'); //change the Virtual field number if needed
    const btn = document.querySelector('.cbDeleteButton');
   
    calcValueField.addEventListener('change', function(){
     
     if(calcValueField.value == '2020'){
        btn.remove();
      }
      
    })
     
   document.removeEventListener('DataPageReady', deleteButtonHandler);
  }
</script

For the Table field, you may test the following script.
Please change the field name (in this example the field name is 'Status'; please note that fields on the Details page has the 'EditRecord' prefix). And change a condition.

<script>
  document.addEventListener('DataPageReady', deleteButtonHandler)
   
  function deleteButtonHandler(){
    const calcValueField = document.querySelector('input[name="EditRecordStatus"]'); //change the field name
    const btn = document.querySelector('.cbDeleteButton');
   
    calcValueField.addEventListener('change', function(){
     
     if(calcValueField.value== '2020'){ 
        btn.remove();
      }
    })
     
   document.removeEventListener('DataPageReady', deleteButtonHandler);
  }
</script>

Feel free to update this thread if you have further questions. 

This is what I was hoping for, thank you! Just one question: When the condition chnages,. will the delete button become available again? 

[CoopperBackpack]

Hello @KG360,

The button is hidden when the condition is met. 

Could you please elaborate on 'When the condition changes?' ? 
Which condition do you need to apply?

[ElliotMalachi]

To hide and disable the "DELETE" button on a report details page based on the value of a calculated field, you can use JavaScript. First, retrieve the value of the calculated field. Then, obtain a reference to the "DELETE" button element on the page. Next, check the value of the calculated field, and if it meets your condition, modify the button's visibility and disabled state. Thanks

[KG360]

On 6/1/2023 at 9:21 AM, CoopperBackpack said:

Hello @KG360,

The button is hidden when the condition is met. 

Could you please elaborate on 'When the condition changes?' ? 
Which condition do you need to apply?

The condition will be either a formula output or a check box, which in turn has consequences for the content of what is being updated or deleted. The condition can be converted to whatever input is required for the script I gather. The more specific use case is that each record has a number field that states how many distinct occurrences there are of an attribute, for a parent entity, with the purpose to filter those records that are suitable / not suitable for a particular graph. If the number is less than, for example, four, then the view will not include such records. This works very well in the form, to assess the attribute count, but now I need the same functionality in the details view.

[KG360]

1 minute ago, KG360 said:

The condition will be either a formula output or a check box, which in turn has consequences for the content of what is being updated or deleted. The condition can be converted to whatever input is required for the script I gather. The more specific use case is that each record has a number field that states how many distinct occurrences there are of an attribute, for a parent entity, with the purpose to filter those records that are suitable / not suitable for a particular graph. If the number is less than, for example, four, then the view will not include such records. This works very well in the form, to assess the attribute count, but now I need the same functionality in the details view.

Sorry, I just realized I might not have answered the question: When the user alters the information, for example, changes their mind regarding deleting/not deleting the record. The counter must change the count if the user deleted a record with a unique attribute. Sounds muddy? The use case is actually very clear. Let me know if unclear and I will provide more. And - thank you so much for helping !!!

[CoopperBackpack]

Hello @KG360,

I am not sure that I understood the workflow. However, if the idea is that the user interacts with the data on the Details DataPage and as a result of this interaction the value used in the condition changes, it is possible to modify the code.

For example, I want to hide the 'Delete' button when the value in Virtual 1 = 2020


But if I change the values that affect the Virtual1 value, the 'Delete' button should be displayed.

For example, the Virtual1 = 2021, and the button appears.

 

This is the code example:

<script>
  document.addEventListener('DataPageReady', deleteButtonHandler)
   
  function deleteButtonHandler(){
    const calcValueField = document.querySelector('input[name="cbParamVirtual1"]'); //change the Virtual field number if needed
    const btn = document.querySelector('.cbDeleteButton');
   
    calcValueField.addEventListener('change', function(){
     
     if(calcValueField.value == '2020'){
        btn.style.display = 'none';
      }
       else if(calcValueField.value !== '2020'){
        btn.style.display = 'inline-block';
      }
    })
     
   document.removeEventListener('DataPageReady', deleteButtonHandler);
  }
</script>

Is it the case? 

[KG360]

On 6/6/2023 at 12:25 PM, CoopperBackpack said:

Hello @KG360,

I am not sure that I understood the workflow. However, if the idea is that the user interacts with the data on the Details DataPage and as a result of this interaction the value used in the condition changes, it is possible to modify the code.

For example, I want to hide the 'Delete' button when the value in Virtual 1 = 2020


But if I change the values that affect the Virtual1 value, the 'Delete' button should be displayed.

For example, the Virtual1 = 2021, and the button appears.

 

This is the code example:

<script>
  document.addEventListener('DataPageReady', deleteButtonHandler)
   
  function deleteButtonHandler(){
    const calcValueField = document.querySelector('input[name="cbParamVirtual1"]'); //change the Virtual field number if needed
    const btn = document.querySelector('.cbDeleteButton');
   
    calcValueField.addEventListener('change', function(){
     
     if(calcValueField.value == '2020'){
        btn.style.display = 'none';
      }
       else if(calcValueField.value !== '2020'){
        btn.style.display = 'inline-block';
      }
    })
     
   document.removeEventListener('DataPageReady', deleteButtonHandler);
  }
</script>

Is it the case? 

Superb! I am incredibly grateful for this and sorry for the delayed reply (I have been traveling).  YES, this is precisely the case. When the user deletes a record, I will recount the # of distinct attributes X, if there was only one distinct such attribute.  So it is a multi-step process to delete a record and the user must click 'Delete' in a virtual field to recount and show the delete button. If the user changes their mind, and unclicks 'the virtual field 'delete' the Delete button shall disappear. (Not sure if the script does that but will test it out.