Link To New Item Form

Give users the ability to add items to a list without showing the entire list web part. In my example, I’ve added a “Submit Request” button to a Document Set Welcome Page. Clicking this will open the New Item form for my Tickets list.

docset


<script type="text/javascript">

 function displayLayover(url) {

 var options = SP.UI.$create_DialogOptions();

 options.url = url;

 options.dialogReturnValueCallback = Function.createDelegate(

 null, null);

 SP.UI.ModalDialog.showModalDialog(options);

 }

 </script>

<input type="button" onclick='javascript:displayLayover("/sites/sandbox/mustard/Lists/Tickets/NewForm.aspx")' value="Submit Request">

Steps:

1. Add a Script Editor web part to your page.

2. Click EDIT SNIPPET.

3. Replace the URL in this line with the path to your list’s New Item form (you can also change what the button says by changing the ‘value’):

<input type="button" onclick='javascript:displayLayover("/sites/sandbox/mustard/Lists/Tickets/NewForm.aspx")' value="Submit Request">

NOTE: If your URL looks something like this: /sites/sandbox/mustard/_layouts/15/start.aspx#/Lists/Tickets/NewForm.aspx, remove /_layouts/15/start.aspx# from the path.

embed

4. Click Insert and save the page.

5. To test, click the new “Submit Request” button.

formpopup1

6. Add some information and click Save.

7. Navigate to the list to confirm.

ticket

Library Paging – First Page Button

Adding a “First Page” button is a simple work around for getting back to the first page when paging through documents. This is especially handy if you use document sets.

  1. Edit the page and add a Script Editor web part.
  2. Click EDIT SNIPPET.embed
  3. Embed the following code:

<!DOCTYPE html>
<html>
<body>

<input type="button" value="First Page" onclick="location.href=''"/>

</body>
</html>

I moved the Script Editor web part down below the library web part and changed the Direction to Right to Left.

scripteditor

Final product:

docsetbutton.PNG

Next page:

docsetbutton1.PNG

Drop-Down Menu Of Links

To add a drop-down menu populated by links to other parts of your site, add a Script Editor Web Part and embed the following code:


<!DOCTYPE html>
<html>
<body>

<select name="Page">
<option value="">Jump to...</option>
<option value="About">About</option>
<option value="ContactUs">Contact Us</option>
<option value="EmployeeResources">Employee Resources</option>
</select>

<input type="button" value="Go" onclick="window.open(location.href='http://sp2013/sites/company/SitePages/' + Page.value)"/>

</body>
</html>

Make sure you replace the URL with your site’s URL, and change the option values to the names of your pages. The text between the option tag is the title of the page or what you want the drop-down menu to show.

DropDown

Custom Quick Edit Button

To add a custom Quick Edit button to a page or view, add a Script Editor Web Part and embed the following code. Make sure you change the number in [WPQ2SchemaData] to the ID of the Web Part you want to Quick Edit. You can find that by inspecting the list or library Web Part using Developer Tools (F12).

 


<!DOCTYPE html>
<html>
<body>
<button onclick="QuickEditFunction();return false;">Quick Edit</button>

<script>
function QuickEditFunction()
{
InitGridFromView(window['WPQ2SchemaData'].View);
}
</script>

</body>
</html>