SharePoint 2013 Modern WebPart

This is the first of five posts giving an overview of creating modern webpart solutions for SharePoint 2013+ environments. The webpart library is part of the gd-sprest SharePoint REST Framework. The demo code can be found in github.

Overview

Developing for SharePoint 2013 environments can be difficult, given the new modern web stack. This post will give step through various ways of creating client-side solutions in SharePoint 2013 using the modern web stack.

Frameworks

The original code for this library came from the gd-sprest-react library. I wanted to make sure the solution was framework independent, so you can reference this from any framework you choose to work with. My goal in this post is to give examples of developing webparts using the following frameworks:

1) None – Just simple JavaScript (This Post)
2) TypeScript – Example of using TypeScript to create a demo webpart
3) React – Example of using the gd-sprest-react library
4) VueJS – Example of using VueJS to create a demo webpart
5) AngularJS – Example of using AngularJS to create a demo webpart

WebPart Logic

I have an article going over the high-level details of this approach. I recommend referring to this post for a high level understanding of the solution. The solution utilizes the ScriptEditor webpart where a defined template is used:

  • Configuration Element – Optional element for storing custom configuration
  • Target Element – The target element to render the component to
  • Render Events – Display, Edit and Post render events exist, passing the element to target
WebPart ID

The library will determine the webpart id, based on the parent elements. Having this information allows for multiple instances of the same webpart object to exist on the same page.

Demo

This demo will use the core gd-sprest library to render a webpart. It’s important to understand this process, as it will be automated in the next post.

Step 1 – Upload Assets

1) Download the library here
2) Upload the file to SharePoint

Step 2 – Create a Demo Page

This demo will be tested in SharePoint Online, so make sure to create a classic webpart page.
1) Create a webpart page of your choice
2) Edit the page
3) Add a script part editor
4) Edit the “Snippet” and add the following:

<div id="demo"></div>
<script type="text/javascript" src="/sites/dev/siteassets/sprest/gd-sprest.js"></script>
<script type="text/javascript">
$REST.Helper.WebPart({
    elementId: "demo",
    onRenderDisplay: function(wp) { wp.el.innerHTML = "<h3>The page is being displayed.</h3>"; },
    onRenderEdit: function(wp) { wp.el.innerHTML = "<h3>The page is being edited.</h3>"; }
});
</script>

Update the src location, based on where you uploaded the library.
5) Save the page, and you should see the display message.

6) Edit the page, and you should see the edit message.

Conclusion

That’s it. I hope this demo was useful, but again is just a simple example. Now that we have this base logic written in JavaScript, we can extend it and use it in modern web development tools. The next post will give an example of creating this in TypeScript.

Leave a Reply

Your email address will not be published. Required fields are marked *