Skip to main content

Notifications

Power Pages - General Discussions
Answered

Basic Form (Hide Original Buttons) and Use Custom Submit Button

(0) ShareShare
ReportReport
Posted on by

Since using the Power pages, I have always felt a little restricted with entity form (basic form) buttons. I sometimes want other buttons (e.g. a back button) or want them to appear in a different position on the page. I have therefore always added custom HTML buttons to my web template and hidden the out-of-the-box ones using CSS. On my custom HTML button, I have been using JS to 'click' the original hidden button behind the scenes, which seems and feels a little dirty to me. Yes, it works - but there must be a better way 🙄 

 

In my example below, I want to show a loading <div> on click of my custom button. If the validation passes, a loading <div> should appear (let's keep it simple) and perform as per the normal button action, e.g. validate and move to the next page. If validation fails, it just shows the form validation errors as normal.

 

The below all works fine, but it does seem a little nasty, in that the validation is being performed twice, and it just seems like a bit of a hack? I can't be the only person who has done some madness like this. How would you all approach this? There must be a better way, surely!

 

 

{% entityform name:'BasicFormExample' %}
<div class="btn-block">
 <a href="#" id="btnBack" class="btn btn-primary">Back</a>
 <a href="#" id="btnContinue" class="btn btn-primary" onclick="">Continue</a>
</div>

 

 

 

<script type="text/javascript">
 $(document).ready(function() {
 $("#btnContinue").click(function() {
 if(Page_ClientValidate()){
 $("#load").css('display', 'flex');
 $("#UpdateButton").click();
 }
 });
 });
</script>

 

 

Categories:
  • GWham1 Profile Picture
    GWham1 on at
    Re: Basic Form (Hide Original Buttons) and Use Custom Submit Button

    @FubarThanks for taking the time to respond 👍 Sounds like we are all doing similar things in a round about way. I've done the same with the back buttons also

  • Fubar Profile Picture
    Fubar 7,677 on at
    Re: Basic Form (Hide Original Buttons) and Use Custom Submit Button

    As per Oliver's response, only time I may say to hide the out of the box button and use yours with a click on the hidden out of the box one is if there is something else you need to do client side that you can't add in elsewhere. Also, your advanced settings on the buttons give your rough layout top vs bottom of the form (in the Portal/Power Pages Management App).

    In the past we have had a customer insist on having a "Back" button on a Web Page with a basic form and in this case we appended a button to the button container and looked at the breadcrumb for the url to use. 

  • GWham1 Profile Picture
    GWham1 on at
    Re: Basic Form (Hide Original Buttons) and Use Custom Submit Button

    Thanks, I will have a play around and see if I can find a solution from the above which gives me the flexibility i want.

  • Verified answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 9,069 on at
    Re: Basic Form (Hide Original Buttons) and Use Custom Submit Button

    A few things here:

    • I wouldn't create a custom button to call the original one
    • instead consider:
      • moving the place of the button using CSS
      • moving via JS by using a "control-x / control-v" approach, basically reading the original button, then appending to wherever you want it and removing the original one entirely
    • if you want a "back button", I would consider Multistep Form component for this
    • for the loading button, it seems that you are missing to set the display back to none in case there is an issue with the form validation, make sure to add that to evert part of the code that it might fallback to
    • you can still inject the loading to the original button via JS/jQuery, this shouldn't be an issue

     

    please let me know if this helps 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,495

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,822

Leaderboard