Field with attachment in a table

[Sai Santhosh Ch]

Hello,

                I have a requirement where I have to create a Field named     " Description 1 " such that it should look something like this,

- >         Description 1         #       (Consider '#' as attachment icon).

So, I want a field so that users could write the description of attachment and attach the file beside the description in a table.

But, There is no field type attachments . I know that there is an icon on top right of each form provided by servicenow, But I want something like this to a field.

Please Help

Thanks in Advance.

[xiaix]

Interesting... I like this approach.   I too have conquered this issue, but using a different approach.   Only thing I'm don't like is how little control you have with the annotation on the form (being able to manipulate it via client script).

Here's my solution:

I achieved this by adding a "String" field on the table:

Then, on the form I right-clicked the field and did a "Personalize Style".   I added a new style and put:   width:1px;

I also made this field "Read Only":

Then, I simply added the following code in my Client Script (onChange):

// Attachment
       var THIS_FORMS_TABLE = 'u_claims_access';
       var PAPERCLIP_IMAGE = 'paperClip.gifx';

       var attach_el = gel(THIS_FORMS_TABLE + '.u_attach');
       var attach_el_parent = attach_el.parentElement;
       var img = document.createElement('IMG');
       img.src = PAPERCLIP_IMAGE;
       img.style.cursor = "pointer";

       // The whole reason we're looping through and checking this
       // is because this is an "onChange" UI Policy.   If we don't do this,
       // then the paperclip will keep duplicating when a field is changed.
       var skipImg = false;
       if (attach_el_parent)
       {
               // Does this node already have the img node?
               var children = attach_el_parent.childNodes;

               for (child in children)
               {
                       if (children[child].tagName == 'IMG')
                       {
                               skipImg = true;
                               break;
                       }
               }
               if (!skipImg)
                       attach_el_parent.appendChild(img);
       }

       // My form has an attachment paperclip in the top right,
       // so just grab the onclick function for that and re-use the code.
       var paperClip = gel('header_add_attachment');
       var att = g_form.getControl('u_attach');

       // Hide the form's text field.
       var hide = gel('sys_readonly.' + THIS_FORMS_TABLE + '.u_attach');
       if (hide)
               hide.style.visibility = "hidden";

       var parent = att.parentElement;
       if (paperClip)
               parent.onclick = paperClip.onclick;

So, this is just an alternative to using the "annotation" method.

[brendanwilson84]

David, that is brilliant thank you for taking the time.

[brendanwilson84]

Hi David, that worked fine on my own dev instance Geneva version. However in our company version which is Fuji it doesn't work.   My scripting/coding is not great.

I am getting the below error message

"Bad for in variable 'child'"

Any help would be great

[xiaix]

Change "for (child in children)"

to "for (var child in children)".

If that doesn't work, can you please paste your script so I can test in my instance?

[brendanwilson84]

Thank you David, did not get any error on the UI Policy by changing that. However I still do not get any changes to the form

Here is code

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue == '') {
          return;
    }
function onCondition() {

}
// Attachment
      var THIS_FORMS_TABLE = 'x_pfgb3_dev_a_te_p_dev_a_te_production_issue_table';
      var PAPERCLIP_IMAGE = 'paperClip.gifx';
     
      var attach_el = gel(THIS_FORMS_TABLE + 'u_attach');
      var attach_el_parent = attach_el.parentElement;
      var img = document.createElement('IMG');
      img.src = PAPERCLIP_IMAGE;
      img.style.cursor = "pointer";
     
      // The whole reason we're looping through and checking this
      // is because this is an "onChange" UI Policy.   If we don't do this,
      // then the paperclip will keep duplicating when a field is changed.
      var skipImg = false;
      if (attach_el_parent)
      {
              // Does this node already have the img node?
              var children = attach_el_parent.childNodes;
             
              for ( var child in children)
              {
                      if (children[child].tagName == 'IMG')
                      {
                              skipImg = true;
                              break;
                      }
              }
              if (!skipImg)
                      attach_el_parent.appendChild(img);
      }
     
      // My form has an attachment paperclip in the top right,
      // so just grab the onclick function for that and re-use the code.
      var paperClip = gel('header_add_attachment');
      var att = g_form.getControl('u_attach');
     
      // Hide the form's text field.
      var hide = gel('sys_readonly.' + THIS_FORMS_TABLE + 'u_attach');
      if (hide)
              hide.style.visibility = "hidden";
     
      var parent = att.parentElement;
      if (paperClip)
              parent.onclick = paperClip.onclick;
    }

appreciate it