image
SPJeff

Tag Archives: Angular

Uncategorized

VIDEO – MS Graph Quick Start (Angular CLI)

Demo of the Microsoft Graph “Quick Start” which generates a full code project with a new App ID (Client ID).    Azure Active Directory (AAD) manages a registration of application ID paired with API permission grants for which API calls can be made.   From there, the client side JavaScript application can invoke HTTP GET to fetch JSON data for the allowed MS Graph API endpoints.   Cheers!  shades_smile

Video

Screenshots

image

image

image

image

image

image

References

Uncategorized

VIDEO – Attempt to build Angular CLI with PNP JS

Recently attempted to create a command line interface (CLI) project with Angular 6 and SP-PNP-JS library for data access.  Followed tutorial by @arustacean at https://medium.com/ng-sp/angular-spa-in-sharepoint-3e7195741460 but with using the latest version of each library.

GitHub source code available at https://github.com/spjeff/sp-ng

However, received strange errors on the web pack TypeScript build process.   Attached video shows the troubleshooting process.  Cheers!  shades_smile

Video

Screenshot

ERROR – Initializers are not allowed in ambient contexts.

image

Reference

Uncategorized

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

Uncategorized

Angular2 – Disable CORS security for smooth Chrome debug

Recently while debugging an application I needed to design REST and JSON api calls across DNS domains.   However, the client browser Chrome blocked those HTTP transactions due to CORS.    While essential to production security, this can be a roadblock to developer productivity locally.   The below steps show how to launch Chrome browser with CORS security temporarily disabled.   This can help remove complexity and security warnings to focus first on application features.

Once stable, we can add CORS support to the endpoint APIs (HTTP header Access-Control-Allow-Origin:*)  and calling JS application.

Install Steps

  1. Create empty folder C:\CHROME\
  2. Edit PowerShell profile script PS1  (notepad $profile)
  3. Add function chromecors()
  4. From CMD run “ng serve” to open local Angular hosting
  5. From CMD run “chromecors” to launch Chrome with CORS disable
  6. Enjoy debug and functional application testing without security warnings
  7. Add CORS support to endpoint APIs as needed.  https://enable-cors.org/ has great advice on configuration.

Code

# Chrome Disable CORS
function chromecors() {
	TASKKILL /F /IM chrome.exe
	Start-Process -FilePath "c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -ArgumentList @("--disable-web-security", "--user-data-dir=""C:\Chrome""")
}

Screenshot

image

image

image

image

image

Uncategorized

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.

Uncategorized

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
Uncategorized

Video – Get Started with SPCRUD.JS

Check out the below 10 minute video for how get started using “spcrud.js” to easily connect Angular JS applications to SharePoint List data.    I created this library as a wrapper for AngularJS $http GET and POST.     We can streamline the repetitive SharePoint plumbing of JSON headers, HTTP VERBs, and URL syntax.    Now you can easily call “spcrud.read()” or “spcrud.update()” instead of formatting each HTTP request.

Enjoy!!  shades_smile

Please leave a comment if you found this helpful. 

 

Uncategorized

Learn Angular!

I wanted to share the links below for learning AngularJS.  Great way to code less AND get higher quality apps.   Dual win for developer productivity.  Enjoy!   shades_smile

 

 

Media

People

Code

Tools

 

 

* diagram from http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes

Uncategorized

AngularJS – $http default JSON headers

The below JavaScript will change $http default headers to be JSON ready for SharePoint REST APIs.  This is handy when sending GET/POST to SharePoint 2013 so we don’t need to repeat headers on each individual call.   Enjoy!  shades_smile

//namespace
var namespace = namespace || {};
//NG-controller
namespace.myCtl = function ($scope, $mySvc) {
    //viewmodel
    var vm = $scope;
};
//NG-service
namespace.mySvc = function ($q, $http) {
	$http.defaults.headers.common['Accept'] = 'application/json;odata=verbose';
	
    //User Profile - me
    this.getMe = function () {
        return $http.get('/_api/SP.UserProfiles.PeopleManager/GetMyProperties');
    };
    //User Profile - users
    this.getUser = function (login) {
		var url = '/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=\'domain\\' + login + '\'';
        return $http.get(url);
    };
};
//NG-module
angular.module('myApp', [])
	.controller('myCtl', namespace.myCtl)
	.service('$mySvc', namespace.mySvc)
	.run(function () {
		//prepare GUI
	});
Uncategorized

BreezeJS – Edit SQL table with < 100 lines of JS code [VIDEO]

With SharePoint 2013 and industry movement towards the cloud I’ve been exploring JavaScript as a primary way to develop rich applications.

One common challenge is data access.  

With C# I have years of experience with [System.Data] and can perform CRUD against SQL relational databases in my sleep.  Open connection, query, data adapter, fill DataTable, and voila!    Muscle memory. Second nature.  Tried and true methods.   However, in the new client side JS world I had no clue where to begin.

Enter Breeze.

 

People describe Breeze as “Entity Framework on the client in JavaScript” which sounds simple yet has profound implication for the developer.   CRUD operations, LINQ style query, navigating primary/foreign keys, input validation, caching, batch updates, and more.   That’s a lot to consider and new ideas take time to absorb.   Breeze could potentially replace:

  • ASP.Net (ASPX) web forms
  • ASCX user controls
  • InfoPath forms
  • SharePoint web parts
  • WCF 5.6 data services
  • OData
  • Classic WebAPI

 

I set out to code an example with a few goals:

  • Create simple SQL schema (two tables – parent/child – one to many)
  • Execute CRUD operations in JS against SQL  tables
  • Leverage JS plugins and NuGet “Install-Package” to load third party components
    • Install-Package breeze.webapi2.ef6
    • Install-Package breeze.angular
    • Install-Package angularjs.core
  • Little code as possible

The whole thing took less than 30 minutes and I edited video down to just 15.    I was impressed by how straightforward and easy the process was.   Breeze# in ASP.Net MVC for the back end WebAPI controller was nearly identical to the Breeze example code.   Add one C# method per entity (SQL table) and Breeze does the rest.  The JS front end took a little more time to understand but was also easy to apply.   Connect  Entity Manager to the Breeze URL and you’re ready for CRUD queries.    Amazing!     Given how easy Breeze is I would be hard pressed to use OData or manually created WebAPI controllers with C# code to query a database.   If you can use Breeze, then use it!    You’ll save lots of effort.

Please leave a comment if you found this helpful.   Thank you!  shades_smile

 

Watch Video

[BreezeJS and WebAPI – Edit SQL table in JS with less than 100 lines of code]

 

Download Code

Download

http://spjeff.com/etc/Appraisal-Breeze-VS2013.zip

 

Screenshots

image

image

 

image

 

References

 

Tags

Administration Angular App Model Azure Breeze Business Intelligence Central Admin CEWP Cloud Development DIAD InfoPath JavaScript JQuery JSON MOSS O365 Office Office365 Office 365 Performance Point PNP PowerBI PowerShell REST SharePoint SharePoint 2007 SharePoint 2010 SharePoint 2013 SharePoint 2016 SharePoint Administration SharePoint Designer SPFx SQL SSRS TSQL TypeScript Upgrade Video Virtualization Visual Studio 2010 VSCode WebAPI WITP Workflow

Recent Comments

Archives

website uptime
Return to Top ▲Return to Top ▲