Skip to main content

How to use AngularJS in SharePoint Framework (SPFx)


In this post, I will show you how to use AngularJS in SPFx. I have divided the steps for better understanding.

Here are the steps:

1.       Create SPFx Project with No JavaScript Web Framework
2.       Add Dev Dependencies
3.       Remove some Dependencies
4.       Run “npm install”
5.       Modify “config.json”
6.       Create folder called “app” under “/src/webparts/ angularjsWebpart/” and Create following files in “app” folder
a.       Greetings.component.html
b.       Greeting.module.css
c.       Greetings.component.ts
d.       Greetings.service.ts (If required)
e.       app.module.ts
7.       Modify “<<your_webpart>>webpart.ts” file & add some code.
8.       Finally run your solution


Create SPFx Project with No JavaScript Web Framework

Remember you have to create project with No javascript web framework option.

Create a new project directory in your favorite location.
md angularjs-webpart

Go to the project directory.
cd angularjs-webpart

Create a new angularjs web part by running the Yeoman SharePoint Generator.
yo @microsoft/sharepoint

When prompted:
  • Accept the default angularjs-webpart as your solution name, and then select Enter.
  • Select SharePoint Online only (latest), and select Enter.
  • Select Use the current folder for where to place the files.
  • Select N to not allow the solution to be deployed to all sites immediately.
  • Select N on the question if solution contains unique permissions.
  • Select WebPart as the client-side component type to be created.


The next set of prompts ask for specific information about your web part:
  • Accept the default angularjs as your web part name, and then select Enter.
  • Accept the default angularjs description as your web part description, and then select Enter.
  • Accept the default No javascript web framework as the framework you would like to use, and then select Enter.


At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the angularjs web part. This might take a few minutes.

When the scaffold is complete, you should see the following message indicating a successful scaffold.

Add Dev Dependencies

After creation of project, open this project in Visual Studio Code. Now open “package.json” and add following line of code in “devDependencies” section :

    "@types/angular": "^1.6.57",
    "@types/jquery": "^3.3.31",
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.13.1",
    "sp-pnp-js": "^3.0.10"

Here we are installing developer dependencies for AngularJS, Jquery & sp-pnp-js.

Remove some Dependencies

Remove following code from “dependencies” section:
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.13.1"

Run “npm install”

Now we have to run npm install command to install dependencies in our project.

Modify “config.json”

Now navigate to “config” folder and open “config.json” & modify “externals” section with following values :

"externals": {
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",
    "angular": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js",
      "globalName": "angular"
    },
    "es-promise": "https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js",
    "fetch": "https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.js",
    "sp-pnp-js":"https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js"
  },

Create folder called “app” under “/src/webparts/angularjsWebpart /” and Create following files in “app” folder

Greetings.component.html

<div class="demo" ng-cloak>
  <div class="container">
      <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">
              <div class="email-signature">
                  <div class="signature-img">
                      <img ng-src="{{$ctrl.userImageUrl}}" alt="">
                  </div>
                  <div class="signature-details">
                      <h3 class="title">{{$ctrl.userName}}</h3>
                      <span class="post">{{$ctrl.userJobTitle}}</span>
                  </div>
                  <ul class="signature-content">
                      <li><span class="fas fa-map-marker-alt"></span> {{$ctrl.greetingMessage}}</li>
                      <li><span class="fas fa-envelope"></span> {{$ctrl.webSiteTitle}}</li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</div>

Greeting.module.css

:root {
  --color_0: #000;
  --color_1: #fff;
  --name: #abb7c5;
  --shadow: rgba(0, 0, 0, 0.5);
  --main_bg: linear-gradient(to right, #181623 13%, #3c3b43 21%);
  --before_bg: linear-gradient(to bottom, #f9da41, #fa771c);
  --after_bg: linear-gradient(to bottom, #a2eee1, #1b819a);
  --main_bg_res: linear-gradient(to top, #181623 13%, #3c3b43 21%);
  --before_bg_res: linear-gradient(to right, #f9da41, #fa771c);
  --after_bg_res: linear-gradient(to right, #a2eee1, #1b819a);
}
.email-signature {
  background: var(--main_bg);
  font-family: "Roboto", sans-serif;
  padding: 20px 185px 20px 10px;
  box-shadow: 0 0 10px var(--shadow);
  position: relative;
  text-align: center;
}
.email-signature:before,
.email-signature:after {
  content: "";
  background: var(--before_bg);
  height: 100%;
  width: 100px;
  position: absolute;
  right: 0;
  top: 0;
}
.email-signature:after {
  background: var(--after_bg);
  width: 20px;
  right: 110px;
}
.email-signature .signature-img {
  height: 140px;
  width: 140px;
  border: 7px solid var(--color_1);
  border-radius: 25px;
  overflow: hidden;
  transform: translateY(-50%);
  position: absolute;
  right: 35px;
  top: 50%;
  z-index: 1;
}
.email-signature .signature-img img {
  width: 100%;
  height: auto;
}
.email-signature .signature-details {
  color: var(--name);
  font-size: 15px;
  margin-bottom: 20px;
  text-align: center;
}
.email-signature .title {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  display: block;
}
.email-signature .title span {
  font-weight: 400;
}
.email-signature .signature-content {
  color: var(--color_1);
  font-size: 14px;
  line-height: 28px;
  padding: 0 0 0 20px;
  margin: 0;
  list-style: none;
}
.email-signature .signature-content li span {
  margin-right: 6px;
}
.email-signature .icon {
  background-color: var(--color_1);
  height: 100%;
  padding: 65px 30px;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
}
.email-signature .icon li a {
  color: var(--color_1);
  background-color: var(--name);
  font-size: 16px;
  text-align: center;
  line-height: 25px;
  height: 25px;
  width: 25px;
  margin-bottom: 10px;
  display: block;
  transition: all 0.3s ease 0s;
}
.email-signature .icon li a:hover {
  color: var(--name);
  background-color: var(--color_0);
  text-decoration: none;
  box-shadow: 0 0 10px var(--shadow);
}
@media screen and (max-width: 767px) {
  .email-signature {
    background: var(--main_bg_res);
    text-align: center;
    padding: 175px 20px 70px 20px;
  }
  .email-signature .signature-img {
    transform: translateY(0) translateX(-50%);
    top: 20px;
    left: 50%;
  }
  .email-signature:before,
  .email-signature:after {
    background: var(--before_bg_res);
    width: 100%;
    height: 70px;
    transform: translateY(0);
    top: 0;
    left: 0;
  }
  .email-signature:after {
    background: var(--after_bg_res);
    height: 20px;
    top: 85px;
  }
  .email-signature .signature-details {
    margin: 0 0 5px 0;
  }
  .email-signature .signature-content {
    padding: 0;
  }
  .email-signature .icon {
    width: 100%;
    height: auto;
    padding: 15px 0;
    top: auto;
    bottom: 0;
  }
  .email-signature .icon li {
    display: inline-block;
  }
  .email-signature .icon li a {
    margin: 0 5px;
  }
}

Greetings.component.ts

import { GreetingService } from "./Greetings.service";

export class GreetingController {
  public userName: string = "";
  public userJobTitle: string = "";
  public webSiteTitle: string = "";
  public welComeMessage: string = "";
  public userImageUrl: string = "";

  public greetingMessage: string = "";
  public prefixWelcomeMessage: string = "Welcome to ";

  public static $inject: string[] = ["GreetingService", "$scope"];

  constructor(
    // tslint:disable-next-line: no-shadowed-variable
    private GreetingService: GreetingService,
    private $scope: ng.IScope
  ) {
    this.$scope.$on(
      "configurationChangedGreetingWebPart",
      (event: ng.IAngularEvent, data: any) => {
        this.webSiteTitle = data.webTitle;
        this.userName = data.userDisplayName;
        this.getValues();
        console.log(this.userImageUrl);
        //this.$scope.$apply();
      }
    );
    this.getValues();
  }

  public getValues = () => {
    if (new Date().getHours() > 0 && new Date().getHours() < 12)
      this.greetingMessage = "Good Morning ";
    else if (new Date().getHours() >= 12 && new Date().getHours() <= 5)
      this.greetingMessage = "Good Afternoon ";
    else if (new Date().getHours() > 5) this.greetingMessage = "Good Evening ";

    if (this.userName.length == 0) this.userName = "Gaurav Goyal";

    if (this.userJobTitle.length == 0) this.userJobTitle = "";

    if (this.webSiteTitle.length == 0)
      this.webSiteTitle = this.prefixWelcomeMessage + "Demo of SPFx Web Part";

    if (this.welComeMessage.length == 0)
      this.welComeMessage = this.greetingMessage + this.userName;

    // if (this.userImageUrl.length == 0)
    //   this.userImageUrl ="";

    this.getCurrentUserInformation();

  }

  public getCurrentUserInformation = () => {
    this.GreetingService.getCurrentUserInformation().then(ig => {
      this.webSiteTitle = this.prefixWelcomeMessage + this.webSiteTitle;
      this.userImageUrl = ig.userImageUrl;
      //this.userName = this.userName;
      this.userJobTitle = ig.userJobTitle;
      this.$scope.$apply();
    });
  }
}

export let GreetingComponent = {
  selector: "greetingComponent",
  template: require("./Greetings.component.html").toString(),
  bindings: {},
  controller: GreetingController,
  styles:require("./Greeting.module.css").toString()
};

Greetings.service.ts (If required)

import { IGreeting } from "./IGreeting";
//import * as angular from 'angular';
import * as $pnp from "sp-pnp-js";

export class GreetingService {
  constructor() {}

  public getCurrentUserInformation = (): Promise<IGreeting> => {
    let promise = new Promise<IGreeting>((resolve, reject) => {
      let ig: IGreeting = {
        userImageUrl: "",
        userJobTitle: "",
        userName: "",
        webSiteTitle: ""
      };

      $pnp.sp.profiles.myProperties.get().then(
        data => {
          data.UserProfileProperties.forEach(property => {
            if (property.Key == "Title") {
                ig.userJobTitle = property.Value;
            }

            if (property.Key == "PictureURL") {
              if(property.Value !==''){
                ig.userImageUrl = property.Value;}
              else{
                ig.userImageUrl = "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png";
              }
              ig.userImageUrl = ig.userImageUrl.replace("MThumb", "LThumb");
            }
          });
          resolve(ig);
        },
        error => {
          reject(error);
        }
      );
    });
    return promise;
  }
}

app.module.ts

import * as angular from 'angular';
import {GreetingComponent, GreetingController} from './Greetings.component';
import { GreetingService } from './Greetings.service';

const greetingApp: angular.IModule = angular.module('greeting-webpart-app', []);

greetingApp
  .service("GreetingService", GreetingService);

greetingApp
   .controller('GreetingController', GreetingController);

  greetingApp
  .component(GreetingComponent.selector, GreetingComponent);

Modify “<<your_webpart>>webpart.ts” file & add some code.


At the top of the file, add 2 highlighted lines.

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './GreetingsWebpartWebPart.module.scss';
import * as strings from 'GreetingsWebpartWebPartStrings';

export interface IGreetingsWebpartWebPartProps {
  description: string;
}

import * as angular from "angular";
import "./app/app.module";

Replace the render function:

public render(): void {

    if (this.renderedOnce === false) {
      this.domElement.innerHTML = `<greeting-component></greeting-component>`;
      this.$injector = angular.bootstrap(this.domElement, ["greeting-webpart-app"]);
    }

    let obj1={
      //webTitle, userDisplayName
      currentUserId: this.context.pageContext.legacyPageContext['userId'],
      webAbsoluteUrl: this.context.pageContext.legacyPageContext['webAbsoluteUrl'],
      webTitle: this.context.pageContext.legacyPageContext['webTitle'],
      userDisplayName: this.context.pageContext.legacyPageContext['userDisplayName'],
      tempData: this.properties.description
    };

    this.$injector.get("$rootScope").$broadcast("configurationChangedGreetingWebPart", obj1);
  }


Finally run your solution


gulp serve –nobrowser
                run your sharepoint workbench
                                https://<<TenantName>>.sharepoint.com/_layouts/15/workbench.aspx
                                Add webpart & see the result

My sample code is part of  PnP community - SPFx Dev webpart sample.  Click here to download the code.
Labels:

Comments

Post a Comment

Popular posts from this blog

Export / Import from Excel file in SharePoint

SharePoint Web Part - Export or Import from Excel Here is the tool which will help you to import excel file into a list. This tool will not create any kind of list or column. It will help users to import their excel file in specific list. This tool also allows users to update existing records directly from excel file. I have develop the tool in SharePoint Framework. Currently this tool is for SharePoint Online version only. We are supporting following columns : Single line of text Multiple lines of text Number Yes/No Person or Group (Person + Group) Person or Group (Person + Group) (Allow multiple selections) Date and Time Choice Choice (Allow multiple selections) Hyperlink or Picture Currency Managed Metadata Managed Metadata (Allow multiple values) Lookup Lookup (Allow multiple values) Installation of App :- 1. Click here to download the sps-import-from-excel.sppkg . 2. Visit the Microsoft 365 SharePoint Admin Center 3. Go to Apps -> App Catalog. If you don't have ap
Post a Comment
Read more

Deploy SPFx production solution files in specific folder with in container on Azure CDN

Hi, When we creates SPFx solution and deploying the build files on Azure CDN, it deploys all the files in a container which you mentioned in "deploy-azure-storage.json" file. This is bit messy to see. Because you can deploy multiple solution on the same container. But what if you want to manage solutions by Solutions or By versions. Here is the way. I will show you how to deploy SPFx production deployment files in a specific folder in the Container on Azure CDN. First you have to deploy some gulp task packages in dev-dependencies npm install gulp-util gulp-deploy-azure-cdn --save-dev Now you need to make following changes in the "gulpfile.js" file : const deployCdn = require('gulp-deploy-azure-cdn'); const gutil = require('gulp-util'); gulp.task('deploy-azure-storage-folder', function () {   return gulp.src('temp/deploy/**/*', {}).pipe(deployCdn({       containerName: '<<Your Container Name>>', // Container
Post a Comment
Read more

Error while compiling spfx project - Error - typescript - node_modules/@fluentui/react-focus/node_modules

 Some when you create new project or upgrade existing project, developer get issues related to fluent ui packages i.e. : Error - typescript - node_modules/@fluentui/react-focus/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,26): error TS1005: ';' expected. Error - typescript - node_modules/@fluentui/react-focus/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,41): error TS1005: ')' expected. Error - typescript - node_modules/@fluentui/react-focus/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,42): error TS1005: ';' expected. Error - typescript - node_modules/@fluentui/react-focus/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,72): error TS1005: ';' expected. Error - typescript - node_modules/@fluentui/react-focus/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,107): error TS1005: '(' expected. Error - typescript - node_modules/@fluentui/react-focus/node_modules/@uifabric/merge-styles/lib/De
Post a Comment
Read more