0

How do I convert Jquery that I am using in the Script Editor into its own Webpart?

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(
        function () {
            // has to be on an interval for grouped doc libraries
            // where the actual links are loaded only once a group
            // is expanded
            setInterval(
                function () {
                    $("a[onclick*=’return DispEx’][target!=’_blank’]")
                        .attr("target", "_blank")
                        .removeAttr("onclick");

                    // document type icons
                    $("td.ms-vb-icon>img[onclick]:not([documentUrl])")
                        .click(function (e) {
                            window.open($(this).attr("documentUrl"), "_blank");
                            e.stopPropagation();
                            e.preventDefault();
                            return false;
                        })
                        .each(function () {
                            $(this).attr(
                                "documentUrl",
                                $.trim(String($(this).attr("onclick"))
                                    .split("=")[1]
                                    .replace(/["'{}]/g, "")
                                    .split(";")[0])
                                );
                            this.onclick = null;
                        });
                    },
                    500
            );
        }
    );
</script>
7
  • Use content editor webpart?
    – Mike
    Commented Nov 7, 2017 at 18:46
  • It works in content editor, but I want to be able to add it to various libraries without having to constantly insert code. Commented Nov 7, 2017 at 18:56
  • 1
    export the webpart afterwards, then add it to the webpart gallery.
    – Mike
    Commented Nov 7, 2017 at 20:00
  • 1
    go to the edit page, then you can use the dropdown menu of the webpart and choose "Export..."
    – Mike
    Commented Nov 7, 2017 at 21:55
  • 1
    If you add it to the webpart gallery--yes.
    – Mike
    Commented Nov 7, 2017 at 22:00

2 Answers 2

1

Save the code in a separate HTML file in your environment then When you add a content editor webpart to a page, you can set the content URL to the location of the HTML file.

To re-use the existing content editor web part to accomplish this:

  1. Download the MSContentEditor.dwp file from the site collection's web part repository (/sites/[site]/_catalogs/wp/.
  2. Edit the file on you computer using a text editor.
  3. Give it a new name in the Title node.
  4. Set the ContentLink node to the URL of your script.
  5. Save the file with the new name of your web part
  6. Upload the web part definition to your web part repository
  7. Add the web part to the page

Here is an example of a full web part definition:

<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/WebPart/v2">
  <Title>Testing</Title>
  <FrameType>None</FrameType>
  <Description>Funciton page script</Description>
  <IsIncluded>true</IsIncluded>
  <ZoneID>TopColumnZone</ZoneID>
  <PartOrder>0</PartOrder>
  <FrameState>Normal</FrameState>
  <Height />
  <Width />
  <AllowRemove>true</AllowRemove>
  <AllowZoneChange>true</AllowZoneChange>
  <AllowMinimize>true</AllowMinimize>
  <AllowConnect>true</AllowConnect>
  <AllowEdit>true</AllowEdit>
  <AllowHide>true</AllowHide>
  <IsVisible>false</IsVisible>
  <DetailLink />
  <HelpLink />
  <HelpMode>Modeless</HelpMode>
  <Dir>Default</Dir>
  <PartImageSmall />
  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
  <PartImageLarge>/_layouts/15/images/mscontl.gif</PartImageLarge>
  <IsIncludedFilter />
  <Assembly>Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
  <TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>
  <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">https://[example].sharepoint.com/sites/SiteAssets/Scripts/test.html</ContentLink>
  <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
  <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
</WebPart>
2
  • Is it possible to create a webpart that has a content URL to the HTML file? Commented Nov 7, 2017 at 20:41
  • 1
    I think I misunderstood your original question. I have update the answer Commented Nov 9, 2017 at 18:18
1

Yes it is possible to pass URL to HTML file. Use content editor webpart for this. enter image description here

Your Answer

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

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