Tag Archives: CEWP

VIDEO – Demo of “SPGo” Visual Studio Code Extension

Wanted to show how SPGO extension can help with local folder editing for remote SharePoint files. Local save (Ctrl+S) will automatically run upload in the background to destination Document Library. Configuring JSON for workspace, populate first run, download files, and upload files. Cheers!

Video

Code

{
    "sourceDirectory": "src",
    "sharePointSiteUrl": "https://spjeff.sharepoint.com",
    "publishingScope": "SaveOnly",
    "authenticationType": "Forms",
    "remoteFolders" : ["/SiteAssets"]
}

References

https://marketplace.visualstudio.com/items?itemName=SiteGo.spgo

August 21, 2019 spjeff

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!

Source Code

Video

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

June 21, 2017 spjeff

Angular Angular2 AOT CEWP JavaScript JS NG2 Polyfills SharePoint SPCRUD

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!

Video

Screenshots

Source Code

https://github.com/spjeff/ng2-todo-cewp

Steps

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

References

https://cli.angular.io/

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

May 31, 2017 spjeff

Angular Angular2 AOT CEWP JavaScript JS NG2 Polyfills SharePoint

Uncategorized

Replace CE / SE Web Part Content PS1

Managing front end code (HTML/JS) embedded within Script and Content Editor Web Parts can be a hassle. With multiple instances scattered across ASPX pages, web part galleries, and many sites quickly becomes untenable.

The below PowerShell script gives SharePoint admins a new way to search/replace the internal text of CEWP/SEWP web parts within a target site collection. Updating a URL reference or DNS name can now be done across potentially hundreds of WP in just a few minutes.

For example, a team site having 1 CEWP and 1 SEWP with the world “hello” can be quickly replaced with “hola” by running this script.

Cheers!