1

I am creating a newform.aspx page for cutsom SPList in SPO site. I want to add an image with dynamic text thats embedded within anchor tag, <tr> or <td>.

This image with the dynamic text must be placed immediately above first field of the form.

Assume , I have some fields in the way, employeename, number, address, etc.

So, just above employeename field, I want to add a <tr><td> <a href ==> with < img src=../../someimage.jpg >' + mydynamictext+ ' </td></tr>.

How can I implement this?

I would like to add an attachment button to be able to upload files and images. How this can be done?

This is what I'm adding to new custom form:

        var text='<tr><td class="ms-formlabel" noWrap="nowrap" 
            vAlign="middle" colspan="2">
          <img 
         src="/mysitecollec1/soemmimage.png">
         <a id="loadForm" style="cursor:hand"><u><b>'+ dynamicText+'</b></u>
          </a>           </br>
              <span 
        style="font-weight:normal;"> default texthere </span></td></tr><tr>
            <td>&nbsp;</td></tr>';

           $("input[title='employeen name Required Field']").after(text);

But its not working!

enter image description here

  • Can you share the screenshots of initial form and the one after you added the jQuery code? – harshal gite Oct 27 '18 at 18:50
  • You are aware that this will only work on lists in classic mode, right? – Kasper Bo Larsen Oct 28 '18 at 6:04
  • i know the limitations in SPO, Kasper. i dont have idea abt SPFx, so still depending upon js, jQuery, spservices rest etc. – userAZLogicApps Nov 6 '18 at 10:08
2

The following code for your reference.

<style>
#ImgContainer {
    position: relative;
    text-align: left;
    color: white;
}
.top-left {
    position: absolute;
    left:100px;
    top: 50px;
    transform: translate(-50%, -50%);
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var dynamicText="my test";
    var text='<tr><td class="ms-formlabel" noWrap="nowrap" vAlign="middle" colspan="2"><a href="#" id="loadForm" style="cursor:hand">'
                +'<div id="ImgContainer">'
                +'<img src="/mysitecollec1/soemmimage.png"/>'
                +'<div class="top-left"><u><b>'+ dynamicText+'</b></u></div>'
                +'</div>'
                +'</a></br>'
            +'<span style="font-weight:normal;"> default texthere </span></td></tr><tr><td>&nbsp;</td></tr>';

    $("input[title='employeen name Required Field']").closest('tr').after(text);     
}); 
</script>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.