none
Add a Button to a ListView Webpart RRS feed

  • Question

  • Hello all,

    I have a requirement to add a button to a ListView Webpart.  I have created a javascript method to add a document to a SharePoint list subfolder.  The method works fine.  I can create a simple html button that will appear on the ListView, but it doesn't display when I try to view it in a webpart.  This needs to be done clientside.  I'd like to change the function of the "new document" button, but decided to hide the toolbar so it doesn't display, now I'm trying to get my html button to show.

    ...

    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

    <input onclick="uploadDialog()" Text="Click to Add Document" type="button"></input>

    <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main">

    ...

    ETA:  Tools available: SharePoint Designer 2013

    Thanks!


    • Edited by Anonymous Jonez Tuesday, March 7, 2017 9:29 PM Added available tools
    Tuesday, March 7, 2017 9:22 PM

Answers

  • We ended up using the prepend function.  So here's the solution in detail.

    Add Script Editor web part to web part page that has the list.

    <script type="text/javascript">

      function uploadDialog(){

        var myurl='http://mysite/myfolder/_layouts/15/Upload.aspx?List=1235%1234%9878%123%  8abc&RootFolder=/site/myreturnfolder';

        optionProcedure={

            width:800,

            height:500,

            title:'Upload Document',

            dialogReturnValueCallback: function(dialogResult){

                SP.UI.ModalDialog.RefreshPage(dialogResult)

            }

         };

            SP.UI.ModalDialog.showModalDialog(optionProcedure);

        }

        function addMyButton(){

          var btnhtml='<div style="text-align: center;"><span><input onclick="uploadDialog(\'myfolder\')" type="button" value="Click to Add New Doc"/></span></div>';

          $('#mywebpartId').prepend(btnhtml);

        } 

        _spBodyOnLoadFunctionNames.push("addMyButton");

      }

    </script>

    Monday, March 13, 2017 4:16 PM

All replies

  • Hi,

    You could use content editor web part for this case.( you could implement the hide toolbar logic in CEWP also)

    Go to your list view web part page, click ‘Edit page’->’Add a Web Part’

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, March 8, 2017 2:34 AM
  • That's a great answer. Thank you!

    Unfortunately we use a web part that displays webparts under their own tab, so that wouldn't display correctly for us.

    Wednesday, March 8, 2017 8:43 PM
  • Hi,

    Could you provide screenshot for your scenario so we could understand your requirement more clearly.

    Another thought is adding your button by jQuery dynamically by Script Editor/Content Editor web part.

    Fake code:

    $(".the place when you want to add the button").append('<input onclick="uploadDialog()" value="Click to Add Document" Text="Click to Add Document" type="button"></input>');

    You could check below link about jQuery append function

    http://api.jquery.com/append/

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 9, 2017 8:07 AM
  • We ended up using the prepend function.  So here's the solution in detail.

    Add Script Editor web part to web part page that has the list.

    <script type="text/javascript">

      function uploadDialog(){

        var myurl='http://mysite/myfolder/_layouts/15/Upload.aspx?List=1235%1234%9878%123%  8abc&RootFolder=/site/myreturnfolder';

        optionProcedure={

            width:800,

            height:500,

            title:'Upload Document',

            dialogReturnValueCallback: function(dialogResult){

                SP.UI.ModalDialog.RefreshPage(dialogResult)

            }

         };

            SP.UI.ModalDialog.showModalDialog(optionProcedure);

        }

        function addMyButton(){

          var btnhtml='<div style="text-align: center;"><span><input onclick="uploadDialog(\'myfolder\')" type="button" value="Click to Add New Doc"/></span></div>';

          $('#mywebpartId').prepend(btnhtml);

        } 

        _spBodyOnLoadFunctionNames.push("addMyButton");

      }

    </script>

    Monday, March 13, 2017 4:16 PM