Unanswered

How to add a clickable icon

(0) Share

Report

Posted on by inanoffice23

299 Moderator

I am trying to implement this code in the label section, however it always says the function is not defined when I add onclick="myFunction" - I tried with the brackets and ; too to no avail

How can I get the icon to execute the function? Ideally I would like a pop up modal @NatGeo

<button type="button" class="lbx-lnk lbx-modal glyphicon glyphicon-info-sign" tabindex="0" onclick="YOUR JS Script" style="cursor: pointer; background: none!important; border: none; padding-left: 2!important; color: #26374a;"></button>

function myFunction(){
alert("hello"); 
}

Source code: Add help icon in date field - Power Platform Community (microsoft.com)

Pop up modal sample

Power Pages: How to add an info button (ℹ️) for displaying instructional text about an input field using modal popups. #powerpages #nocode #bootstrap | LinkedIn

Categories:

Design & build

I have the same question (0)

All responses (3)

Answers (1)

EmadBeshai 806 Moderator on at

Like (0)

Report

Hi @inanoffice23 ,

Please make sure to add your JS code between Script tags <script> code </script>

If this post helps you with your problem, please mark this answer as Accepted Solution.

If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
Hi, I think the main issue is that you didn't replace your function in the button onclick definition:

onclick="YOUR JS Script"

this should be

onclick="myFunction();"

Was this reply helpful? Yes No
Verified answer

inanoffice23 299 Moderator on at

Like (0)

Report
Thank you for your replies, I managed to do it by inserting this HTML in the form's metadata label, in the description section

Also I managed to run some JS function by ensuring I had an add event listener to it, I found out by going to one of those JS validation pages, it advised it needs that to fire the JS script, but the below doesn't as it's done via Bootstrap 🙂

<span class="glyphicon glyphicon-info-sign" data-toggle="modal" data-target="#myModal"></span>  <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">×</span></button> <h4 class="modal-title" id="myModalLabel">Instructions</h4><br> <div class="col-sm-12"> <img src="linktoimagehere" </div> <div class="col-sm-12"><br><br> </div> <hr> <div class="modal-body"> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor se. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Was this reply helpful? Yes No