How to add Bootstrap button and code

(0) Share

Report

Posted on by inanoffice23

299 Moderator

I've been trying this one all day, to no avail

I wanted to test a 'modal' pop up form

I know that in the form section in Power Apps, every section has a label where we can add HTML code, although there is a limit, so the code further below won't fit it all

I also tried adding the code in Javascript, however it will always say 'unexpected <', I guess because I'm trying to add HTML to the Form settings Javascript section

It also complained about "JSX expressions must have one parent element", although I framed the div area with the below as advised here How to Fix “JSX expressions must have one parent element” in React - Kinsta® Power Pages wouldn't make the modal form work

<React.Fragment> and </React.Fragment>

Where and how would I add the below code so it works?

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
 </div>
 <div class="modal-body">
 ...
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
</div>

Source of Bootstrap JavaScript · Bootstrap (getbootstrap.com)

Categories:

Design & build

I have the same question (0)

All responses (3)

Answers (1)

Fubar 8,361 Super User 2025 Season 2 on at

Like (1)

Report

You can only put HTML directly in a Web Page's Page Copy, Content Snippet, or Web Template; alternatively you would have to write the DOM elements dynamically using JavaScript using document.createElement or JQuery .append() etc.

Was this reply helpful? Yes No
inanoffice23 299 Moderator on at

Like (0)

Report

I have been able to add HTML within the form in the label section, I figured if we can do it in the form's metadata, it should work in the front end and it does

The only limitation is that I can only add that many characters, so for that Bootstrap form it cuts it. I wonder if @EmadBeshai might know how to increase the label limit? --- if we add the HTML into the form's metadata, there is no limit to the amount of HTML we can add, as far as I have tested, so this is no longer a question as it has been solved 🙂

Was this reply helpful? Yes No
Verified answer

inanoffice23 299 Moderator on at

Like (0)

Report

I added the Bootstrap code in the metadata's form, where the label is, and it works 🙂 If JS function is needed ensure you add an add event listener or else it won't trigger the JS

Was this reply helpful? Yes No