1

I have been trying to create custom forms in SharePoint as a separate entity from the list itself.

Is there a way to create an html form that can edit a list?

I was able to create an HTML form and input a Content Editor Web Part into the page that linked to an html file. But, I'm not sure how to make it so that it can interact with the list.

If anyone could provide an example or explain using a basic form and list I would appreciate it.

1

You can make use of SharePoint JavaScript Object Model.

https://msdn.microsoft.com/en-us/library/office/dn268594.aspx

Or you can use SharePoint WebService Wrapper SPServices.

https://spservices.codeplex.com

2
  • Would I be able to use that within the HTML/Javascript though? I see a lot of that is using C# and VB which I do not have access to. May 23 '16 at 18:03
  • Yes it's using JavaScript only. May 23 '16 at 18:04
1

You can use JavaScript code to insert the data in SharePoint list.

Here is the reference code to add an item in Announcement list

function createListItem(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', 'My New Item!');
    oListItem.set_item('Body', 'Hello World!');
    oListItem.update();

    clientContext.load(oListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

Please read the below article for more information.

Complete basic operations using JavaScript library code in SharePoint 2013

0

The easiest is to use SharePoint Designer

Create a new Form based on the the New/Edit/Display template

And edit the HTML, being careful with the XML SharePoint declares

0

Mark Rackley came up with an ingenious way of hijacking SharePoint's default list forms and rearranging them using your own HTML layout, which you can then style however you want.

You need a little bit of scripting knowledge (and ability to use jQuery definitely helps for grabbing and moving DOM elements), but the great thing about using this technique is that you use the edit controls (textboxes, people-pickers, date controls, etc) that SharePoint already generated, and moving them around does not disconnect them from the list, so you don't have to worry about the back end connections.

You can move stuff around however you like, and the form still works, so you don't necessarily need to go through the process of using JSOM or REST API to interact with the list.

The detailed instructions can be found on his blog

NB: this is for SharePoint 2013 (and I assume Online would work as well), not sure if there is a way to do this in 2010.

2
  • Probably no issues in 99% of usage, but Mark uses appendChild to clone fields, they are not moved, the original fields are hidden.. which could cause problems if you mix in SPServices or other code that does more with fields (think Cascading dropdowns) May 24 '16 at 9:09
  • Fair point, but you could take care of that easily by adding $(this).remove() immediately after the $(this).contents().appendTo(elem) line to fully remove the original control. May 24 '16 at 12:55

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.