Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

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 http://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

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲