SharePoint, Office 365, Azure, and Front end JS geek. – Chicago IL
SharePoint, Office 365, Azure, and Front end JS geek. – Chicago IL

JavaScript

Custom Web Part – Save settings to SPList (without jQuery)

Ever wanted to code a JavaScript content editor (script editor) web part that saves settings to a list?   Without jQuery?

The library below “wp-settings.js” does exactly that with native XHR (XML HTTP Request) and nested callback to invoke REST API.   The free standing POJO (Plan Old JavaScript Object) design enables us to package into a web part gallery and use freely across any site without preparation work to ensure jQuery, Angular, or other dependent frameworks are loaded.

Look at the “webpart.html” to see example usage pattern:

  • wpsRead()  Get settings (if any)
  • wpInit()  Local web part initialize
  • wpsWrite()  Save settings (UPDATE/INSERT)

 

Cheers! 

shades_smile

 

 

Source Code

 

Video

 

Screenshots

image
image
image

 

References

VIDEO – code JS todo CRUD on Breeze & SQL Express (part 2 of 2)

Our next step in this series is cloud hosting.  Each of the local source components has a Microsoft cloud destination equivalent.   Here is the mapping:

  • SQL Express > SQL Azure
  • WebAPI > Azure Web App
  • Angular SPA > Office 365 SharePoint Content Editor

In the video below I walk through all of these steps to migrate the local “todo” CRUD application created earlier to be fully hosted in Microsoft’s cloud.    From there, we have a fully operational business application running on Office 365 with all custom code hosted in Azure.

Enjoy!

shades_smile

 

 

Video

VIDEO – code JS todo CRUD on Breeze & SQL Express (part 2 of 2) from Jeff Jones on Vimeo.

VIDEO – Cloud migration of JS todo CRUD to Azure & Office 365 (part 2 of 2)

Live walk through of hosting “Todo List” CRUD application on the Microsoft cloud.   Continued from the first video where we coded a full local application, this video migrates the application front/back end to the cloud.   HTTPS Breeze WebAPI endpoint hosted on Azure for the backend with HTTPS Office 365 SharePoint Content Editor Web Part for the frontend GUI end user experience.

Custom HTTP header was added for extra security as an application “client secret” which is required for the WebAPI middle tier to respond to HTTP traffic.  Missing HTTP header will respond with “null” and not execute any Dot Net code.

Enjoy!

shades_smile

 

 

Diagram

breezejs-sharepoint-architecture

 

Video

 

References

VIDEO – code JS todo CRUD on Breeze & SQL Express (part 1 of 2)

Live coding walk through of a locally hosted “Todo List” CRUD application with Breeze WebAPI 2.2 middle tier and SQL Express relational database storage.  This baseline allows developers to be more productive locally with fast feedback loops.   Iterate code changes, reload test, and repeat.   This technology stack can create sophist acted business application with input validation, advanced data schema, workflows, and more bringing in the latest web innovations from NPM and NodeJS.  

Custom HTTP header was added for extra security as an application “client secret” which is required for the WebAPI middle tier to respond to HTTP traffic.  Missing HTTP header will respond with “null” and not execute any Dot Net code.

In this video I used several components and want to share links for each:

 

 

In a future video, I’ll show how this application can then be deployed to Office 365 and SQL Azure to leverage Microsoft’s cloud hosting.

Enjoy! 

shades_smile

 

 

Diagram

 

Video

Live code JS todo CRUD on Breeze & SQL Express from Jeff Jones on Vimeo.

 

References

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲