Tag Archives: JavaScript

FIXED – Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

When coding JavaScript with SP-PNP-JS I came across the error below and wanted to document for others.  Cheers!  shades_smile

Error

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

image

image

image

Root Cause

When calling HTTP GET the default Header “accept: application/json” can return data as XML.  

Use F12 Developer Tools to view network traffic with HTTP headers and raw response text.

Solution

Modify JS code to initialize AngularJS with different HTTP headers.

Now SharePoint PNP api calls with Header “accept: application/json; odata=verbose” and returns data as JSON for correct parsing.

$pnp.setup({
	headers: {
		"Accept": "application/json; odata=verbose"
	}
});

image

References

VIDEO – Angular CLI – SPCRUD Todo List in SharePoint Content Editor (part 2 of 2)

Continued part 2 of earlier video at https://www.spjeff.com/2017/05/31/angular-cli-todo-list-in-sharepoint-content-editor/

Here we add “spcrud.ts” library with CRUD methods to save JSON data over REST api into SharePoint Lists.
SPCRUD is a Typescript library with methods to easily interact with SharePoint APIs by providing management of Digest Token, HTTP headers, and URL formatting. As developers we interact with simple TypeScript methods that have input validation which in turn execute the correct underlying HTTP call.

Cheers!  shades_smile

Source Code

Video

Angular 2 CLI – SPCRUD Todo List in SharePoint Content Editor (Part 2 of 2) from Jeff Jones on Vimeo.

VIDEO – Angular CLI – Todo List in SharePoint Content Editor

Angular 2 (“Angular”) brings many improvements over Angular 1 (“AngularJS”).  The CLI tools (Command Line Interface) help streamline operations so we can develop professional applications with ease including unit testing, bundling, minification, live preview, webpack, distribution, and more.

The below demo shows how to create a new application, run tests, add features, and deploy to SharePoint Pages hosted in a Content Editor Web Part.  The CLI tools boost developer productivity while holding up quality control.

Check out the live coding video below, hosted on both Vimeo and YouTube.

Leave a comment if you found it helpful.  Cheers!  shades_smile

Video

Screenshots

image

image

image

image

image

Source Code

Steps

  1. MD TODO
  2. NG NEW TODO
  3. CD TODO
  4. NG SERVE
  5. NG HELP BUILD
  6. NG BUILD -PROD -AOT -D http://portal/sites/todo/SiteAssets/todo -W
  7. Upload all files from local /dist/ to SharePoint /SiteAssets/todo/
  8. Right click “index.html” in SharePoint to copy absolute URL
  9. Edit Page, add Content Editor Web Part (CEWP)
  10. Modify CEWP and provide URL for display
  11. Enjoy!

References

Errors Fixed

https://stackoverflow.com/questions/40386883/sharepoint-angular-2-app-using-cli-webpack

For Angular2 to load correctly on a SharePoint page we must comment out the line “import ‘core-js/es6/string’;” from “polyfills.ts” to avoid conflict with Microsoft Script Resource AXD code already included.

  • Uncaught g {__zone_symbol__error: Error: Sys.ParameterCountException: Parameter count mismatch.
  • polyfills.3737621….bundle.js:1 Uncaught
  • ScriptResource.axd?d=BguhdZbE6Lg8ptBp5skwRENGckVM6n4sP4jY4eLX78z7DZzuMbkeH4dwMKG-9qqtKy6_9p0QSjbOTX…:494 Uncaught

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

Generate TypeScript interfaces from JSON data

Autocomplete JSON property names in JavaScript by generating TypeScript interfaces from sample JSON data.  Check out the below video for a live demo.

Huge win for developer productivity.  No more property name guessing or typos!

 

  1. Copy sample JSON from http://json.org/example.html
  2. Paste into http://json2ts.com/ by @Sorskoot to generate TypeScript interfaces
  3. Add TS file to application working folder
  4. Enjoy autocomplete with Visual Studio Code! shades_smile

 

VIDEO

 

SOURCE CODE

SAAM – Site Asset App Model

Developers have more options in SharePoint 2013 than any version before.   App Model is center stage.  Understandably this has created some confusion and debate in the community.   I’d like to suggest another coding pattern to consider in addition to pure App Model which I call “Site Asset App Model.”

Long before SP2013 released, I would add jQuery “widgets” to pages in MOSS2007 and SP2010 with a Content Editor.  Upload HTML, CSS, and JS files.  Simple and effective.   Requires no special infrastructure changes.  This approach remains valid and has actually improved with advancements like :

  • JavaScript frameworks
  • Angular,  Knockout
  • HTML 5 browsers
  • REST /_api/ endpoints
  • ASP.Net WebAPI
  • Entity Framework
  • BreezeJS

I might not always use pure “App Model”, but I’m 100% sold on JavaScript front end development and the “from Bricks to Houses” philosophy (http://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC404)    Call this whatever name you like, but JavaScript coding has advantages for both developers and administrators alike.    I suggest coding JS first, then fallback to C# wrapped in WebAPI over HTTP, and finally farm solution WSP as last resort.  

Please leave a comment if you found this helpful!   shades_smile

Diagram

image

image

How to Use

Configure

  • Create new folder in Site Assets
  • Map drive letter
  • Create HTML/JS/CSS files with local IDE (Visual Studio, Brackets, NotePad++, etc.)
  • Add page to SharePoint site
  • Add Content Editor to page. Set source Property to HTML location.

Debug

  • Edit source HTML/JS/JSS
  • Reload with browser
  • Press F12 to debug, set breakpoints, inspect DOM
  • NOTE – adding the JS statement “debugger;” can help raise a local browser event. That can be a nice trick to more easily create breakpoints in your editor instead of scrolling the same codebase again with F12. http://www.w3schools.com/js/js_debugging.asp

Admittedly there are drawbacks:

  • No Visual Studio F5 debug
  • No full package (.APP)
  • No Office365 store
  • No app-only principal (limited to current user permissions)
  • Hard to deploy multiple instances

However, there might be times when SAAM is preferred:

  • Working on SP2007/2010
  • Lacking SP2013 App Model infrastructure (Wildcard DNS, Service Apps, etc.)
  • Visual Studio not available (required for .APP package/deploy)
  • Non-SharePoint developers comfortable editing HTML/JS/CSS directly

Comparison Table

FeatureSP2013
“App Model”
Site Assets
App Model
(SAAM)
HTTP call host web without SP Request Executor ProxyNOYES
Support REST to External Content Types made in SharePoint DesignerNOYES
List and Library user data kept if app uninstalled (code upgrade)NOYES
Create standard Views for lists and libraries with App user dataNOYES
Works on SP2007 and 2010 older versionsNOYES
Restricted to “App Web” where many features disabledYESNO
Requires server infrastructure changesYESNO
* Claims authenticationYESNO
* Wildcard DNS on networkYESNO
* Service ApplicationsYESNO
* Additional SQL databases and service accountsYESNO
Requires security manifestYESNO
* Permissions plan to useYESNO
* Web service endpoint URLsYESNO
Able to publish and sell in Office 365 StoreYESNO
Able to use App Identity Security PrincipalYESNO

SP2013 “App Model”

Site Assets App Model (SAAM)

straight-jacket-costume

References

http://channel9.msdn.com/Events/Speakers/Scot-Hillier

  • ​”From bricks to houses” > wider view beyond “App Model” looking at all front end coding (JS/REST)

http://www.itunity.com/community/questions/view/question/id/1

  • ​Use SharePoint where it makes sense (components ready), but now able to include a wider menu of 3rd party technology choices.  
  • Non-Microsoft, Google, others, and a whole web of innovation beyond SP core.

http://blogs.msdn.com/b/amigan/archive/2012/12/10/part-2-introduction-to-sharepoint-2013-app-model.aspx

  • Detailed comparison table
  • Yes, some things cannot be done in “App Model”
  • Yes, farm solutions are still valid  (but as a last resort – try front end coding first)

http://sharepointpromag.com/blog/sharepoint-2013-s-cloud-app-model-it-s-what-you-wanted-all-along

  • ​And ultimately, it’s going to be moot. In multi-tenant environments such as Office 365, this is the only real option.
  • Office365 is the gold standard for low administrative effort.

My first Angular app – Todo List

Recently I began studying Angular as a JavaScript framework to accelerate front end development.  SharePoint 2013 app model is obviously a place where this could be helpful.

Below is a quick 10 minute video of me coding a Todo List with Angular and Visual Studio 2013 based on the JS Fiddle example http://jsfiddle.net/dakra/U3pVM/.    Hopefully this walkthrough shows just how quick and simple Angular can be.  Intellisence from Visual Studio and Viasfora “rainbow brackets” make the coding even easier.   Enjoy!  Smile

 

 

 

For a good read on Angular concepts check out O’Reilly at http://shop.oreilly.com/product/0636920028055.do

Return to Top ▲Return to Top ▲