How to make a floating “attachments” block for SharePoint forms

2018-07-03_15-44-13

I recently developed the above solution for a project requiring attachments at multiple points throughout the form. Originally I considered just placing a static “attachment button” in multiple places, but I came up with this and liked it better.

So if you also have long forms for your SharePoint lists, and you would like an easier way for end users to add attachments to list items, ditch the out-of-the-box ribbon menu attachment button and try this “floating attachment box” solution instead.

A. Create a Custom New Item Form using SharePoint Designer
B. Add image to Site Assets and CSS to custom form in SharePoint
C. Make final edits to Custom New Item form in SharePoint Designer

Create a Custom New Item Form using SharePoint Designer

  1. Open SharePoint Designer
  2. Click “Lists and Libraries” on the left navigation menu
  3. Select the name of the list for which you’re customizing the new item form
  4. Click “New” next to the “Forms” box title
    new form
    Note: You must have a new new item form – do not edit the “NewForm.aspx” default form.
  5. Give your new form a name and check the box for making it the “default” form if you wish. Click OK.
    Note: This name will appear at the end of your URL for new items/forms similar to https://yoursite.sharepoint.com/Lists/ListName/New.aspx
    SPDESIGN_2018-07-04_15-52-31

Add image to Site Assets and CSS to custom form in SharePoint

  1. Download this zip file and extract the contents
  2. Open your site in your internet browser
  3. Place both files in your site’s Site Assets folder (Settings –> Site Contents –> Site Assets)
  4. Copy the URL to the attachmentbox.css file (something like https://yoursite.sharepoint.com/SiteAssets/attachmentbox.css)
  5. While in the browser, open your custom new item form. If you set the custom new form to default, you can just go to your list and click “New Item”. Otherwise enter your URL as demonstrated in step 5 of the previous section. If your new items open in a modal dialog, you’ll also need to modify the URL to access just your new form.
  6. Edit page (Settings –> Edit Page)
    iexplore_2018-07-04_16-35-15
  7. Add a web part
    addwebpart
  8. Media and Content –> Content Editor –> Add
    iexplore_2018-07-04_16-39-25
  9. Edit web part
    iexplore_2018-07-04_16-40-11
  10. Paste the URL to attachmentbox.css into the content link box of the properties pane
    iexplore_2018-07-04_16-41-57
  11. Expand the “Appearance” section and set “Chrome Type” to “None” and Click OK.
    iexplore_2018-07-04_16-40-55
  12. Stop editing the page (Page ribbon menu –> Stop editing)
    stopediting

Make final edits to Custom New Item form in SharePoint Designer

  1. Go back to SharePoint Designer where we’d created a custom new form
  2. Right click the name of your new .aspx form and select “Edit in Advanced Mode”
    SPDESIGN_2018-07-03_15-20-21

Find the line where your first field name is visible and find the closest opening table tag (highlighted in yellow). Paste the following (download here) before it.

<div id="wrap">
<div id="left_col">

div

Scroll or search (Ctrl+F) near the bottom until you find idAttachmentsRow
tr id attachments
and paste the following (download herebefore that row (or the opening tr tag). Don’t forget to replace the image URL with the correct one for your site.

</table>
</div>
<div id="right_col">
<table border="0" cellspacing="0" width="100%">
<tr>
<td colspan="2">
<h3>Attachments</h3>
</td>
</tr>
<tr style="background-color:#FFFFCC;">
<td colspan="2"><img style="margin-top:25px;margin-left:15px;float:left;max-width:60px;" src="YOUR SITE URL/SiteAssets/attachment.png" />To add documents to your request:
<ol style="margin-left:75px;">
<li>Click "Browse"</li>
<li>Navigate to your document and select it</li>
<li>Click "Open"</li>
<li>Click "Attach"</li>
<li>Repeat steps for <b>additional</b> documents</li>
</ol>
</td>
</tr>

Then paste the following (download here) before an xsl tag containing test=$dvt_1_automode
dvt

<tr style="background-color:#FFFFCC;">
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">Attach Files</h3>
</td>
<td valign="top" class="ms-formbody" id="attachmentsOnClient" style="width: 200px">
<span dir="ltr">
<input type="file" name="fileupload0" id="onetidIOFile" size="26" title="Name">
</input>
</span>
</td>
<td width="100px" valign="top" class="ms-formbody">
<input name="Button1" type="button" value="Attach" onclick='OkAttach()' style="font-family:'Gotham Book';color:white;background-color:#00426a;width: 6em;
height: 30px" />
<span id="idSpace">
</span>
</td>
</tr>

and insert 2 (two) closing div tags where SPD highlights a closing td tag for you as seen below (or download here). The two closing div tags should come right after the closing table tag and before the highlighted closing td tag.

</div>
</div>

 

closing div

That’s it! Save your new.aspx form, view the form on SharePoint and watch the magic work! You may need to adjust the css file to best suit your specific form and branding, but that’s easily updated from within SharePoint Designer.

2018-07-03_15-39-20

Interested in making your custom form even better?

One Reply to “How to make a floating “attachments” block for SharePoint forms”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.