3

I am trying to add a button to a Home page that opens a form (modal if possible) from a List. The question is, can this be done without using SharePoint Designer?

I'm trying to decrease the amount of clicks it takes for a user to get to the form. Instead of the user knowing that they need to click on the list in order to add an item, I want a button on the homepage that explicitly says ("Click here to add an item").

I have inserted a button using embedded code, however, when I attempt to add any detailed code, SharePoint cuts the details and adds a labeled button with no functionality.

<input id="clickMe" type="button" value="Click here to add an item!">&nbsp;

Any help would be greatly appreciated!

Thanks!

3 Answers 3

7

If you try to put the code into the Page Content field, it will get stripped out. You'll want to insert a Script Editor web part (Under the Media and Content grouping) and insert your code there.

If you want to use the SharePoint modal dialog, insert this into your Script Editor Web Part:

<script type="text/javascript">
function openInDialog(pageUrl,dlgWidth, dlgHeight, dlgAllowMaximize,dlgShowClose,needCallbackFunction,title) 
{    
    var options = { url: pageUrl, width: dlgWidth, height: dlgHeight, allowMaximize: dlgAllowMaximize,
        showClose: dlgShowClose, title: title};     
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>

And then you can call the modal like this:

<input type="button" value="click here to add an item" onclick="openInDialog(&#39;/sites/test/Lists/TestList/NewForm.aspx?IsDlg=1&#39;,812,450,true,true,false,&#39;New Item&#39;);"">

Obviously you would replace my /sites/test/Lists/TestList/NewForm.aspx with the link to your New Form, and the 812,450 with the dimensions you want for your modal.

0
2

What you can do is, instead of button, add an anchor tag with following URL format:

<a href='https://server-name/Lists/listName/NewForm.aspx' target='_blank'>Click here to add an item!</a>
2
  • This works nicely. I've added this to some of my pages to increase their functionality. Thanks!
    – Omnomicus
    Feb 3, 2016 at 15:35
  • That's good to hear that this works fine, you may mark this as answer:) Feb 3, 2016 at 17:42
1

Similarly to Ovais's method, you can also wrap a button in an anchor.

<a href='https://server-name/Lists/listName/NewForm.aspx' target='_blank'><button type="button" >Click here to add an item!</button></a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.