How to add a clickable icon

[inanoffice23]

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

[EmadBeshai]

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. 

[OliverRodrigues]

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();" 

[inanoffice23 · Accepted solution]

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>

<!-- 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">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>