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.
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.
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:
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
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
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.
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:
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.