Hide the Edit button within Tabular Result page

[Alison]

How can I hide the Edit button within Tabular Result page?

[Andrii]

Hello Alison, 

I will add the application to let you play with it.

You can implement this functionality using JavaScript.
First of all, you need to copy a value of a needed field in the HTML block adjust it as the <p> HTML element with class and hide it.
To copy the value use the parameters feature.

Then you need to insert the following code in the footer:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function () {
 var vals = document.getElementsByClassName("your_class_name");
  var buttons = document.getElementsByClassName("cbResultSetActionCell");
                
  for (var i=0; i < vals.length; i++){
    if (vals[i].innerHTML == your_value){
      buttons[i].style.display = "none";
    }
  }
});
</script>

You need to copy the class value of your <p> element in the "your_class_name" part and adjust the value of "your_value" part according to your conditions.
 

CaspioData_2018-Dec-05_1425 (1).zip

[MayMusic]

If you do not enable inline edit you will not have Edit button on the report page. If you want to see the button conditionally you can, add HTML Block and add a javascript to show a link to a separate details page to edit a row. 

[Andrii]

@MayMusic

If you want to hide just Edit button and leave the details button,  use this code:
 

<script type="text/javascript">
document.addEventListener('DataPageReady', function () {
  var values = document.getElementsByClassName("your_class_name");
  var editButtons = document.getElementsByClassName("cbResultSetActionsLinks");

  var firstButton = 2;
  var secondButton = 3;

 for (i = 0; i < values.length; i++) {
    if(values[i].innerHTML == your_condition) {
      editButtons[firstButton].style.display = "none";
      editButtons[secondButton].style.display = "none"; 
    }
    firstButton += 4;
    secondButton += 4;   
  }
});
</script>

 

It is also adjustable if you have delete button:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function () {
  var values = document.getElementsByClassName("your_class_name");
  var editButtons = document.getElementsByClassName("cbResultSetActionsLinks");

  var firstButton = 2;
  var secondButton = 3;

 for (i = 0; i < values.length; i++) {
    if(values[i].innerHTML == your_condition) {
      editButtons[firstButton].style.display = "none";
      editButtons[secondButton].style.display = "none"; 
    }
    firstButton += 6;
    secondButton += 6;   
  }
});
</script>

 

[ChrisCarlson]

MayMusic,

Is it possible to hide the delete button of inline insert, based on the value of authentication field?

[DefinitelyNot31337]

Hey Carlson,

 

Your question is a bit off-topic to this thread, but the answer to your question is yes, you may.

 

If you wanted to "hide" the Delete button in general (NOT record-specific), you may paste>modify this code on your Footer with HTML Editor disabled in the Advanced tab:

<script>
  
  var condition = ("[@authfield:role]" != "admin"); //Your condition
  
  /*Edits are not necessary from this point onward */
  var deleteButtons = document.querySelectorAll('[data-cb-name="InlineDelete"]');
  
  if(condition) {
  	deleteButtons.forEach(function (elem) {
      elem.style.display = "none";
    });
  }
  
</script>

 

====

A per-record implementation is a bit more complex, paste the following code snippets in their respective places  with HTML Editor disabled. The only modification needed is the "condition"

Header

<script>
var toHide = [];

function hideDelete(idx, cond) {
if (cond) toHide.push((idx-1)*2);
}
</script>

 

HTML Block

<script>

var condition = ("[@field:created_by]" == "[@authfield:userid]");

hideDelete([@cbRecordIndex], condition);

</script>

 

Footer

<script>
var deleteButtons = document.querySelectorAll('[data-cb-name="InlineDelete"]');
toHide.forEach(function(elem) {
  deleteButtons[elem].style.display = "none";
  deleteButtons[elem+1].style.display = "none";
})
</script>

 

I hope this helps.

If you have questions, I'd suggest to start another forum thread then mention me in there to keep this thread clean.

 

Happy new year!

 

Cheers,

DN31337

[RonAnderson]

Hi @DefinitelyNot31337, I came across this code which looks like it could provide a solution for me. I have a Tabular Report Results page in which I have a custom "Copy" button next to the standard "View Details" and "Delete" buttons. I want to hide the "Copy" button if the condition "PAT" shows in the "In_Scope" field. I copied and reconfigured your code by changing all cases of "Delete" to "Copy". Here's the amended code:-

HEADER:-

<script>
var toHide = [];
function hideCopy(idx, cond) {
if (cond) toHide.push((idx-1)*2);
}
</script>

HTML BLOCK:-

<script>
var condition = ("[@field:In_Scope]" == "PAT");
hideCopy([@cbRecordIndex], condition);
</script>

FOOTER:-

<script>
var copyButtons = document.querySelectorAll('[data-cb-name="InlineCopy"]');
toHide.forEach(function(elem) {
copyButtons[elem].style.display = "none";
copyButtons[elem+1].style.display = "none";
})
</script>

I have used your code in the case of the "Delete" button because in different circumstances I need to hide the "Delete" button and it works perfectly but unfortunately it doesn't work for the "Copy" button.

I've tried to make this work for 2 days now and still no luck. Is there anything you can suggest that I've overlooked? I'd be deeply grateful for any help you can give.

Kind regards

Ron Anderson

[Ilyrian]

There is also a HowTo article regarding this question.
https://howto.caspio.com/tech-tips-and-articles/disabling-inline-edit-option-in-reports-based-on-a-condition/
You can modify the code to work for Details and Delete

[DaveS]

So, this is SOOO close to what I need... but I need to hide a Custom HMTL Link/Field rather than the "out of the box" 'Inline Edit / View Details / Delete' button.  @RonAnderson - were you able to solve this?

[DaveS]

Well - I've amazed myself and apparently figured this out!  I took the sample code from @Ilyrian's post of April 26th above.  The challenge I had was figuring out what to replace "data-cb-name' with.  Using developer tools, I could see that my custom HTML field didn't have a "data-cb-name", but it did have a class, so I replaced ('[data-cb-name="InlineEdit"]') with ('[class="mycustomclass"]')  and it seems to have worked.  Happy days!

[RonAnderson]

Hi @DaveS I failed on this I'm afraid BUT I'm going to pick it up again and try the new solution you've provided. Will let you know how I get on.

Thanks again, Ron

[cheonsa]

On 7/13/2023 at 2:35 PM, RonAnderson said:

Hi @DaveS I failed on this I'm afraid BUT I'm going to pick it up again and try the new solution you've provided. Will let you know how I get on.

Thanks again, Ron

Hi! You might already have an answer to this, but for someone who came across this post, I just wanted to share a solution to conditionally show or hide a custom link based on the value of another field.

 

First, you need to add a Calculated Field. For example:

CASE WHEN [@field:Status] = 'Active' THEN 'none' ELSE 'inline' END

Then, in your custom link, add a style.

<a href="URL" style="display:[@calcfield:1];">Copy</a>

Based on the value of the Status field, if Active, the result will be display:none, otherwise, display:inline.

[IamBlossom]

Just now, cheonsa said:

Hi! You might already have an answer to this, but for someone who came across this post, I just wanted to share a solution to conditionally show or hide a custom link based on the value of another field.

 

First, you need to add a Calculated Field. For example:

CASE WHEN [@field:Status] = 'Active' THEN 'none' ELSE 'inline' END

Then, in your custom link, add a style.

<a href="URL" style="display:[@calcfield:1];">Copy</a>

Based on the value of the Status field, if Active, the result will be display:none, otherwise, display:inline.

Just to add to this solution, if you would like to hide the Calculated field, you can apply the code provided here:

 

[IVAN88]

On 4/26/2023 at 4:32 PM, Ilyrian said:

There is also a HowTo article regarding this question.
https://howto.caspio.com/tech-tips-and-articles/disabling-inline-edit-option-in-reports-based-on-a-condition/
You can modify the code to work for Details and Delete

Hi IIyrian,

I have follow all the step from those link but the inlineedit still showed, cant hide those icon.

My condition at calculated field using authfield, and why those calculated field value also showed on the tabular report ?

Rgds,

[IVAN88]

On 1/6/2023 at 7:43 PM, RonAnderson said:

Hi @DefinitelyNot31337, I came across this code which looks like it could provide a solution for me. I have a Tabular Report Results page in which I have a custom "Copy" button next to the standard "View Details" and "Delete" buttons. I want to hide the "Copy" button if the condition "PAT" shows in the "In_Scope" field. I copied and reconfigured your code by changing all cases of "Delete" to "Copy". Here's the amended code:-

HEADER:-

<script>
var toHide = [];
function hideCopy(idx, cond) {
if (cond) toHide.push((idx-1)*2);
}
</script>

HTML BLOCK:-

<script>
var condition = ("[@field:In_Scope]" == "PAT");
hideCopy([@cbRecordIndex], condition);
</script>

FOOTER:-

<script>
var copyButtons = document.querySelectorAll('[data-cb-name="InlineCopy"]');
toHide.forEach(function(elem) {
copyButtons[elem].style.display = "none";
copyButtons[elem+1].style.display = "none";
})
</script>

I have used your code in the case of the "Delete" button because in different circumstances I need to hide the "Delete" button and it works perfectly but unfortunately it doesn't work for the "Copy" button.

I've tried to make this work for 2 days now and still no luck. Is there anything you can suggest that I've overlooked? I'd be deeply grateful for any help you can give.

Kind regards

Ron Anderson

It really works for my needs, Thanks @RonAnderson Casspio Ninja

[Kurumi]

Hi! If you would like to apply this article: https://howto.caspio.com/tech-tips-and-articles/disabling-inline-edit-option-in-reports-based-on-a-condition/ when Data Grouping is enabled.

You can change the code from 

const calculatedFieldPosition = 1

to

const calculatedFieldPosition = 2

 

 

Make sure that the Calculated Field (formula/condition) is in 2nd place of the DataPage Elements and the first is the field for Grouping.

Sample Result: