Modal(Dialog Box) in PowerApps Portal

In this blog, we’ll cover the steps to add modal window(popup) in PowerApps Portal.

The Modal is a dialog box/popup window that is displayed on top of the current page.

Use Case: Whenever a user clicks on a button, a dialog box should open up.

Implementation:

Code:

<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-lg">Fill Details</button>

<!-- Modal -->
<div id="myModal" role="dialog" class="modal fade">
    <div class="modal-dialog">

  <!-- Modal content-->
 <div class="modal-content">
   <div class="modal-header"><button type="button" data-dismiss="modal" class="close">×</button>
      <h4 class="modal-title">Details</h4>
   </div>

 <div class="modal-body">
  <form>
   <div class="form-group">
      <label for="fullmame">Full Name</label>
        <input type="text" id="fullname" class="form-control">
   </div>

   <div class="form-group">
      <label for="emailaddress">Email address</label>
       <input type="email" id="emailaddress" placeholder="name@example.com" class="form-control">
   </div>

   <div class="form-group">
      <label for="comment">Comments</label>
       <textarea rows="5" id="comment" class="form-control"></textarea>
   </div>

   <div class="form-group">
      <label for="inputfile">Upload File</label>
       <input type="file" id="uploadfile">
   </div>

  </form>
 </div>     
  
 <div class="modal-footer">
  <button type="button" data-dismiss="modal" onclick="submitData()" class="btn btn-primary">Submit</button> 
  <button type="button" data-dismiss="modal" class="btn btn-default">Close</button></div>
 </div>

    </div>
</div>
  • You can call the JavaScript function on the submit button of the modal to perform actions based on your requirements.

Follow the steps given below to add the code on a webpage:

  1. Go to Apps and select your portal.
  2. Click on More commands(…) –> Edit
  1. Select the webpage
  1. Click on Source Code Editor </>
  1. Paste your code here and click on save
  1. Once you are done, Click on Browse website.

You can see the result on the webpage

Reference link to understand Modal in bootstrap: https://getbootstrap.com/docs/4.0/components/modal/

Leave a Reply

Your email address will not be published. Required fields are marked *