Hide and disable Delete and Submit button based on condition

[KG360]

In a report details page, I need to allow only the record creator to make changes to and delete the record. Other users belonging to the same account can view the record. This is [partly] achieved through disabling fields in the report details page for users who have not created the record.

The issue is that any user can hit 'Delete' and erase the record. 

How do I hide and disable both the Delete and the Submit buttons? The condition is: Current user ID != the record user ID.

As always - appreciate any guidance on this!

KG

 

[CoopperBackpack]

Hello @Oskabaar,

As far as I understand you applied Rules to hide the fields.

I don`t know how the fields are set up (if they are Radio Buttons, Dropdowns, etc.), however, please test this code in the Footer. Don`t forget to disable the  HTML editor on the Advanced tab before adding the code.

Also, please use your field name of the last question in the code.

<script>
document.addEventListener('DataPageReady', hideSubmitBtn);
 
function hideSubmitBtn() {
 
     const lastQuestion = document.querySelector('#InsertRecordField_name'); //Field_name should be replaced by your field name
     const submitBtn = document.querySelector('form[action*="[@cbAppKey]"] div.cbSubmitButtonContainer');
     submitBtn.style.display = 'none';
     lastQuestion.addEventListener('change', (event) =>{
         let selectedValue = event.target.value;
         if(selectedValue !== ''){
             submitBtn.style.display = 'block';
         } 
         else{
             submitBtn.style.display = 'none';
         }
     })
}
</script>

 

[CoopperBackpack]

Hello @Oskabaar,

Elements on Single Record Update have their own classes and IDs.

Please test this version:

<script>
document.addEventListener('DataPageReady', hideUpdateBtn);
 
function hideUpdateBtn() {
 
     const lastQuestion = document.querySelector('#EditRecordField_name'); //Field_name should be replaced by your field name
     const updateBtn = document.querySelector('form[action*="[@cbAppKey]"] div.cbUpdateButtonContainer');
     updateBtn.style.display = 'none';
     lastQuestion.addEventListener('change', (event) =>{
         let selectedValue = event.target.value;
         if(selectedValue !== ''){
             updateBtn.style.display = 'block';
         } 
         else{
             updateBtn.style.display = 'none';
         }
     })
}
</script>

[ParkLoey]

Hi! Looks like this needs some JavaScript. I haven't found any that specifically does what you are trying to achieve but you can still give it a try.

Here are some that I think might help:

 

[CoopperBackpack]

Hello @KG360,

As far as I understood, in the table, you have a field to store the ID of the user who submitted this record. 

1) If it is a stand-alone Details page, it is possible to remove the whole container with buttons. 

If the buttons are hidden and disabled, it is possible to enable them and make them visible through the browser`s console. 

So, it is more secure to remove the element from the page.

This script should be added to the Footer of the Details page. 

<script>
document.addEventListener('DataPageReady', hideButtonsHandler)
   
function hideButtonsHandler(){

    const curentUser = '[@authfield:ID]'; 
    const submittedBy = '[@field:submitted_by]';
    const btnsContainer = document.querySelector('.cbBackButtonContainer');

    if(curentUser !== submittedBy) {
         btnsContainer.remove();
     }
document.removeEventListener('DataPageReady', hideButtonsHandler)  
}
</script>

In this script, please replace the parameters. 

In my example, the field name from the table where the user's ID is stored is named 'submitted_by'. 

And the user ID from the Authentication is named 'ID'.

You may use an 'insert' button to add the field names:

2) If the Details page is a part of the Report (Tabular,  Gallery, List) DataPage, then the container with buttons includes the 'Back' button.

In this case, it is possible to remove the 'Update' and the 'Delete' buttons and not the whole container with the buttons. 

<script>
document.addEventListener('DataPageReady', hideButtonsHandler)
   
function hideButtonsHandler(){

    const curentUser = '[@authfield:ID]';
    const submittedBy = '[@field:submitted_by]';
    const updateButton = document.querySelector('.cbUpdateButton');
    const deleteButton = document.querySelector('.cbDeleteButton');

    if(curentUser !== submittedBy) {
         updateButton.remove();
         deleteButton.remove();
     }
document.removeEventListener('DataPageReady', hideButtonsHandler)  
}

</script>

Feel free to update the thread if you have questions. 

[KG360]

Fabulous @CoopperBackpack, and very good catch on the Back button. I will try both solutions. /KG

[cheonsa]

Hi all!

Sharing this script with you to hide the Submit button based on the result of a Calculated Value:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
document.querySelector("input[name='cbParamVirtual1']").addEventListener('change', function() {
if (document.querySelector("input[name='cbParamVirtual1']").value == 'Good') {
document.getElementsByClassName('cbSubmitButtonContainer')[0].style.display = 'none';
} else {
document.getElementsByClassName('cbSubmitButtonContainer')[0].style.display = 'inline';
}
});
});
</script>

 

[Oskabaar]

Hello,

I don't know if I can ask a question in an existing topic?

I have a Form where a few questions are asked, the next question only becomes visible when the previous one has been answered ('is not blank'). However, the 'submit button' is always below the question. I would like the 'submit button' to only become visible when the last question has been answered. Is that possible?

Thanks for your help.

Elke

[Oskabaar]

Hello CoopperBackpack,

this works, thanks a lot!

Kind regards, Elke

[Oskabaar]

Hello,

Is it possible that it works in a submission Form, but not in a Single Record Update?

Kind regards, Elke

[Oskabaar]

Hello CooperBackpack, Yes it works, thanks a lot!

Kind regards, Elke

[nyunyiboy]

Hi @Oskabaar,

In response to your question about the form, if you want a field to become visible only after the previous field is answered, you can achieve this by adding a rule. More detailed information can be found here:

Additionally, to hide the submit button until the last field or question is answered, you can also add a conditional rule and CSS to accomplish this. You may check this for reference: 

I hope that helps!

 

[Oskabaar]

Thank You nyunyiboy