Jump to content
Scott17

Conditional Styling to hide Submit Button

Recommended Posts

Hello,

 

I am trying to hide a submit button on some data pages if the user signed in has a specific role.  I have entered the below code into the header of the data page but it is not working.  Does anyone know how I can accomplish this?

<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
<style>
input[value="Edit CRE Details"] {
display: none !important;
}

</style>;
}


</script>

 

Thank you!

Share this post


Link to post
Share on other sites

Hi @Scott17,

You can try and use this code instead:

Quote

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
if ("[@authfield:Users_tbl_Role]" == "Broker") {
document.getElementById("SubmitButtonId").style.display = 'none';
 }
});
</script>

Just change the "SubmitButtonId" to the ID of your Submit button.

 

I hope this helps you :) 

Share this post


Link to post
Share on other sites

Hi @IamGroot

 

I followed those steps and the code seems to not be affecting the update button still.  It is always showing up even when the logged in user is "broker" which the code should be preventing.  I reran the preview multiple times and reviewed the embedded version multiple times and it seems the id changes every time the page is loaded.

 

Thanks!

Scott

Share this post


Link to post
Share on other sites
5 minutes ago, Scott17 said:

Hi @IamGroot

 

I followed those steps and the code seems to not be affecting the update button still.  It is always showing up even when the logged in user is "broker" which the code should be preventing.  I reran the preview multiple times and reviewed the embedded version multiple times and it seems the id changes every time the page is loaded.

 

Thanks!

Scott

Hi @Scott17,

Are you sure? cause it was working in my end. Did you put the code in the Footer? And make sue that the "Enable HTML Editor" is unchecked in advance option.

Share this post


Link to post
Share on other sites

Hi @IamGroot

I had it in the header.  Just switched it over to the footer and unchecked the "Enable HTML Editor".  It isn't working still.  I don't think i'm doing the ID correctly because the ID changes every time I rerun the preview or refresh the page.  I followed the steps you outlined above to get the ID and it looks the same as your screenshots while i'm doing it.

 

Thanks,

Scott

Share this post


Link to post
Share on other sites

Hi

 

While @IamGroot's solution will work on AJAX Disabled only - Submission Form DPs, this might not work on other DataPages especially with AJAX Loading Enabled. 

=

@Scott17, given that you have a Submission Form DataPage, try putting the code below in your footer. Also, make sure that HTML Editor is disabled from the Advanced tab.

<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
	document.querySelector('[id*=Submit]').style.display = 'none';
}
</script>

 

If this doesn't work, you might want to review the name of your authfield (Users_tbl_Role) and/or its value for the logged-on user.

 

I hope this helps.

Regards,

DN31337

 

Share this post


Link to post
Share on other sites
6 hours ago, DefinitelyNot31337 said:

Hi

 

While @IamGroot's solution will work on AJAX Disabled only - Submission Form DPs, this might not work on other DataPages especially with AJAX Loading Enabled. 

=

@Scott17, given that you have a Submission Form DataPage, try putting the code below in your footer. Also, make sure that HTML Editor is disabled from the Advanced tab.


<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
	document.querySelector('[id*=Submit]').style.display = 'none';
}
</script>

 

If this doesn't work, you might want to review the name of your authfield (Users_tbl_Role) and/or its value for the logged-on user.

 

I hope this helps.

Regards,

DN31337

 

1

Hi @DefinitelyNot31337

Thank you for the suggestion!  I tried that code and it didn't work.  AJAX is enabled on the data page but it is actually a Details Report data page rather than a Submission data page.  It is also an "Update" button rather than "Submit" button.  I am sure the authfield and role are correct when I'm testing it out as well.  I also changed the id from Submit to Update in the code in case that made a difference but was not able to get it to work either.  Do you have any other ideas why it's still not working for me?

 

Thank you!

Share this post


Link to post
Share on other sites

Hi @Scott17,

You can try the code below, make sure that AJAX is disabled.

<script>
document.addEventListener('DataPageReady', function (event) {
if ("[@authfield:Users_tbl_Role]" == "Broker") {
document.getElementsByName("Mod0EditRecord")[0].style.display = 'none';
}
});
</script>

I hope this helps.

Regards,

IMDOra
 

 

Share this post


Link to post
Share on other sites

Hi @IMDora

 

Thank you for that!  That code works for me when I preview the app but when I actually deploy the app on my website it doesn't work.  I appreciate the effort of everyone in this forum.  It seems I need to take a different approach.

 

Thank you!

Share this post


Link to post
Share on other sites

Hi @Scott17,

 

I almost forgot: If you have multiple DataPages deployed on your web page, the solutions provided above will only hide the first Update button. To hide all the Update buttons at once, you may use the code below. Also, this solution will work even if you only have one DataPage deployed.

<script>
document.addEventListener('DataPageReady', function (event) {
  if ("[@authfield:Users_tbl_Role]" == "Broker") {
    document.getElementsByName("Mod0EditRecord").forEach(function(elem) {
      elem.style.display= 'none';
    });
  }
});
</script>

 

Hope this ultimately helps you with what you're trying to achieve.

 

Cheers,

DN31337

Share this post


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