How to use AngularJS in SharePoint Framework (SPFx)

By -
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.

Comments

Post a Comment

Popular Posts

SharePoint Interview Questions and Answers

By -
SharePoint Interview Questions and Answers Get More Questions and Answers Q What is SharePoint? Ans SharePoint is a browser based document collaboration platform given by Microsoft. Q What are features of SharePoint 2010? Ans Some features are : ·          Document Collaboration ·          Enterprise Search FAST Search ·          New Enhance Web Part ·          Ready made Silver Light web part ·          Business Connectivity Services ·          Social Media Investments ·          Large lists ·          Enhanced collaboration features ·          Visio Serv...
Read more

Download Infopath Form Templates

By -
Click here to download InfoPath Form Collection   Hi, I have lots of InfoPath forms with me which are downloaded from lots of places. I am uploading this InfoPath form collection for all InfoPath and SharePoint Users. These form are related to Infopath 2003, 2007 & 2010.   Click here to download InfoPath Form Collection
Read more

How to get current logged user information using JavaScript ?

By -
This is post which is simple and not really needed. But when I started writing the code in ECMAScript I have faced problems in getting the logged in user information. So, my readers may feel good after see this post and really most the users are looking for this too. By this time, we have really understood all about ECMAScript Client Object Model and debugging. So, it's easy for us to know it well. Please find the code below to get the current user information. <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> Now copy & paste this JavaScript code after above mentioned tag : <script type="text/ecmascript">         ExecuteOrDelayUntilScriptLoaded(getUserData, "sp.js");              // To Get Current User Name     var context = null;      var web = null;      var currentUser = ...
Read more

Steps to set Form based authentication (FBA) for SharePoint 2010

By -
Image
1.        DOWNLOAD FBA User Management Tool           Go to “C:\Windows\Microsoft.NET\Framework\v2.0.50727”. 2.        Open file “aspnet_regsql.exe” (with Run as Administrator).                                 I.             You will get an installation form. Hit “Next” button.                               II.             Click on “Configure SQL Server for application services” then hit “Next” button.             ...
Read more

SharePoint Interview Questions and Answers II

By -
What is Microsoft Windows SharePoint Services? How is it related to Microsoft Office SharePoint Server 2007? Windows SharePoint Services is the solution that enables you to create Web sites for information sharing and document collaboration. Windows SharePoint Services -- a key piece of the information worker infrastructure delivered in Microsoft Windows Server 2003ice system and other desktop applications, and it serves as a platform for application development. Office SharePoint Server 2007 builds on top of Windows SharePoint Services 3.0 to provide additional capabilities including collaboration, portal, search, enterprise content management, business process and forms, and business intelligence. What is Microsoft SharePoint Portal Server? SharePoint Portal Server is a portal server that connects people, teams, and knowledge across business processes. SharePoint Portal Server integrates information from various systems into one secure solution through ...
Read more

Get List Items - JavaScript

By -
  var value = SP.ListOperation.Selection.getSelectedList();   var productcollection; function getProducts(title) {     try {         var context = new SP.ClientContext.get_current();         var web = context.get_web();         var list = web.get_lists().getByTitle('product');         var query = '<View Scope=\'RecursiveAll\'>'+                         '<Query>'+                             '<Where>'+                      ...
Read more

Change Language for current user with JSOM in SharePoint Online

By -
Hi, Here is code which can change language for current user with JSOM : <script type="text/javascript" charset="utf8" src="/sites/BizDev/Style%20Library/SPS/jquery-1.11.3.min.js"></script> <select id='LangSelect' onchange="SetUserLanguage(this.value);"></select> <script type="text/javascript"> function SetUserLanguage(lCode) {     var call = $.ajax({             url: _spPageContextInfo.siteAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Languages')/items?" + "$select=Title,Code,LCode,ID&$top=5000&$filter=Code eq "+lCode,             type: "GET",             dataType: "json",             headers: {                 Accept: "application/json;odata=verb...
Read more

Cross Site List Rollup Web Part for SharePoint 2010

By -
Downalod Cross Site List Rollup   Hi I was wondering that how to show a list from other site on my home page. But I didn’t get any proper & free solution. So I decided to create a Cross Site List Rollup Webpart . Now I have developed a Cross site list rollup web part which can show your list from any site to any site (within site collation only) and I am ready to share this web part with all of you.  It’s too simple in use. You have to just provide a:    Site URL (Site URL from where you want to display list or library).    List Title (Display Name of List) (Title of the list which has to be on given site URL).    View Name (Name of view which you have created to show in this web part). Now it is ready to use. Enjoy!!! Downalod Cross Site List Rollup Gaurav Goyal
Read more

Hide Recently Modified Items

By -
Image
Hide Recently Modified Items In SharePoint 2010 we all are familiar with the following annoying quicklaunch menu:   Follow these steps :  Go to  " Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\Template\DocumentTemplates" . Open "wkpstd.aspx" file . Search for tag " SharePoint:RecentChangesMenu". Add visible="false"  at the end of this tag. Save this file & refresh SharePoint site .
Read more

SharePoint 2010 CSS Chart

By -
Image
CSS Comments Screenshots body #s4-ribboncont{background-image:none;} /*Globally turning off bordersThis is needed to have any of the style below to take effect.   .ms-cui-groupSeparator {border-right:1px solid #E7E7E8 !important; } .ms-cui-topBar2{border-width:0px;}*/ /*Turn on separators in the Ribbon   .ms-cui-ribbonTopBars{ background: red url() repeat-x !important; padding-top:0px; } /* Set the background for the tabs at the top (Browse / Page) */ .ms-cui-cg-i{ background-image:url() !important; background-position:bottom left; background-repeat:no-repeat !important; height:15px; margin-bottom:2px; } .ms-cui-cg-db .ms-cui-cg-t{height:17px; background-image:url(‘http://integration.echn.ca/Media/SiteImages/bgBackground.gif’) !important; background-position:bottom right !important; background-repeat:no-repeat !important; margin-left:4px;} .ms-cui-cg-t-i{ color:white; font-weight:bold; } .ribbon-wrapper{position:relative;} /* Set the background for...
Read more