Custom form for adding list item with attachments

Change log

March 6, 2018
Clarified the setup instructions as suggested by Rob Mason.

April 5. 2014

Updated to v1.1:
Fixed a bug where “args.listBaseUrl” was missing in the function “submitFile”. This made it impossible to add items to another site than the one you triggered the code on. Thanks to Jean-Jacques for pointing out this bug.

I got this request from Rudolf:

Hi Alexander,

Do you have any idea to solve the following problem I have?

We would like to upload formatted text or binary data from a file as an attachment to with an on the fly create form to enter the comment.
I read your blog to spjs-upload-for-sharepoint-custom-upload-page- ….

We would like to send this the comment and the attachments via a WebService to a SharePoint list to create a list item with attachments loaded.

Best Regards

The solution

I have created this solution that lets you add a list item with one or more attachments from a custom form that you can place anywhere in your SharePoint site.
IMG

You may also be interested in this solution SPJS Upload for SharePoint: Custom upload page for uploading documents to various document libraries in a site collection.

Please note:
* This solution requires you to be logged in with a user with the necessary privileges to add a list item.
* This solution requires IE 10 or above. This may be a problem for users with SharePoint 2007 or 2010 as this versions forces IE 8 mode for newer versions of IE. Change the document mode or use Chrome or Firefox.

How to add this solution to a page

  1. Download jQuery from here. Please note that you should use v1.x as v2.x does NOT support IE versions below 9.
  2. Download spjs_utility.js from here
  3. Download the files spjs_addItemWithAtt.css, spjs_addItemWithAtt.js and spjs_addItemWithAtt_CEWP.txt from here.
  4. Upload all the files but spjs_addItemWithAtt_CEWP.txt to a document library in the site collection, or a folder created using SharePoint Designer on the root of the site collection.
  5. Edit the file spjs_addItemWithAtt_CEWP.txt
    A.
    Update the path to the files you have uploaded

    B. Edit the argument object (starting at spjs.addItemWithAttachment.init({) to create the framework of your form using the guide described below.
    C. Save and Upload the file to the same location as the other files.
    D. Create a CEWP and refer the URL for the .txt file you just edited using the “Content link” option in the CEWP. DO NOT ADD THE CODE DIRECTLY IN THE CEWP AS HTML. You can also use the code directly in a HTML form Web Part in the page where you want the form to appear.

The arguments for the function

You call the function from the CEWP or the HTML Form Web Part using code like this:

spjs.addItemWithAttachment.init({
	"instanceID":"1",
	"listName":"{1a2bb561-c557-4a28-938f-0fb600b136d7}",
	"listBaseUrl":"",
	"header":"Add a comment",
	"text":{
		"saveBtn":"Save",
		"successMsg":"Saved successfully",
		"browserNotSupported":"Your browser is not supported."
	},
	"fields":
		[
			{
				"fin":"Title",
				"label":"Title",
				"type":"text",
				"required":true
			},
			{
				"fin":"Comment",
				"label":"Comment",
				"type":"note",
				"height":"100px",
				"required":true
			},
			{
				"fin":"Priority",
				"label":"Priority",
				"type":"choice",
				"required":true,
				"emptyLabel":"Set priority",
				"choices":[
					{"v":"0","f":"Priority = low"},
					{"v":"1","f":"Priority = med"},
					{"v":"2","f":"Priority = high"}
				]
			}
		],
	"attachements":true,
	"attLabel":"Attachments",
	"multiple":true
});

instanceID

An uniquer id for this instance. If you add more than one form the same page you must change this so that each instance is unique. In the CEWP code you find this div:

<div id="spjs_addItemWithAttachment_instanceID_1"></div>

This corresponds with the instanceID to form an unique placeholder where the custom form will be inserted.

listName

The list GUID or display name of the list to add the list item to.

listBaseUrl

The baseUrl of the site where the list is located. Use “” for the root site, or “/Sites/MySite” for a site named “MySite” on a managed path. This is NOT the URL of the list.

header

This is the text that goes above the form.

text

Various text used in the solution.

fields

Array of objects in this format:

{
"fin":"Title",
"label":"Title",
"type":"text",
"required":true
}

“fin”: The FieldIntenalName of the field in the list you are adding the items to.
“label”: The form label in the custom form you are creating.
“type”: Type of field. Supported types are “text”, “note” and “choice”.
“required”: true or false to control whether the field must be filled or not.

For type = note you have one extra setting

“height”: Sets the height of the textarea in pixels.

For type = choice you have two extra settings

“emptyLabel”: Sets the default value in the dropdown select.
“choices”: Object format like this:

"choices":[
{"v":"0","f":"Priority = low"},
{"v":"1","f":"Priority = med"},
{"v":"2","f":"Priority = high"}
]

“v” is the value to store in the list and “f” is the displayed value in the dropdown select. These two can be the same.

attachements

true or false to allow or disallow attachments.

attLabel

The form label for the attachments.

multiple

true or false to allow for selecting multiple files.

Multiple forms in the same page

To have multiple forms in the same page, repeat the call to “spjs.addItemWithAttachment.init” and change the “instanceID”.

Let me know if you find any bugs, or you have any comments.

Alexander

15 thoughts on “Custom form for adding list item with attachments”

  1. Excuse me for my bad english.
    I have installed it on Sharepoint 365 site.
    All is good… except Saving, nothing is saved !
    I am administator of the site
    Thanks for your response

      1. All is good !
        My path for spjs-utility.js was bad and spjs_addItem was not found.

        Thanks

  2. Hello,
    I have a problem ONLY when the form is installed on a SharePoint Online 2013 with Exchange ADFS authentification, the Request fails with the error described below. Any Solution ? Thanks
    ******************************************
    POST https://syvadec.sharepoint.com/_vti_bin/lists.asmx 500 (Internal Server Error) jquery-1.11.0.min.js:4
    send jquery-1.11.0.min.js:4
    n.extend.ajax jquery-1.11.0.min.js:4
    spjs_wrapSoapRequest spjs-utility.js:300
    spjs_UpdateListItem spjs-utility.js:901
    spjs_addItem spjs-utility.js:795
    spjs.addItemWithAttachment.saveComment spjs_addItemWithAtt.js:105
    onclick

      1. Thanks for your help,

        I have found the problem. It was not because Exchange ADFS security but because the script was installed in a subsite and the listBaseUrl was missing in spjs_addItemWithAtt.js :

        $.ajax({url: listBaseUrl + “/_vti_bin/lists.asmx” …

        (I had to unpack the script to find the problem)

  3. We are moving to SP 2013 we need web forms from the students that submit to our SP LIST with an attachment file too.

    I am looking for how to do this best practice using a public webform for the SP general user that do not have full permission to that admin or view the list in Shareppoint, only submit this entry using the webform .. are there security considerations who do I set this up we had issues in 2007 having to give the users full SP permissions to use the webform. It did not feel very safe, we do not want them to visit our internal sharepoint list.

    Thanks I am new.

    1. Hi,
      This solution requires “contribute” permission to work. This means the user must be logged in to the SharePoint site. If you need a solution for anonymous (not logged in users), or a public facing site, I’m afraid I cannot help.

      Alexander

  4. Hello. I am feeling dumb right now. I downloaded all the files and made the necessary changes. I then added a Content Editor WebPart to a page and linked it to the .aspx page. Nothing shows up. Was this the right thing to do?

      1. Ok I figured out the first part it was literally because I had http instead of https for the jquery file. One last question. For the choice field I had used
        “fin”:”Status”,
        “label”:”Status”,
        “type”:”choice”,
        “required”:true,
        “emptyLabel”:”Set priority”,
        “choices”:[
        {“Initiated”:”0″,”Initiated”:”Initiated”},
        {“In Progress”:”1″,”In Progress”:”In Progress”},
        {“Completed”:”2″,”Completed”:”Completed”}

        that comes back as undefined.

        I also used the Comments field that you had and I created a Comments field in my List as Multiline Text. When it saves from the page the comment doesn’t get added.

Leave a Reply

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