SharePoint Angular and bootstrap Form – Part 1

hi all,

There are 2 parts of this blog.

1. SharePoint Angular and bootstrap Form – Part 1

2. SharePoint Angular and bootstrap Form – Part 2

This is part 1 of the blog

As InfoPath forms are getting depreciated by Microsoft, and challenges arises how to develop complex online forms in SharePoint, one good answer is develop SharePoint Angular and bootstrap Forms.

This does require a developer who is able to code in Javascript, Angular and cascading style sheets (CSS) in bootstrap.

One good comparison with Angular Forms verses InfoPath forms is with Angular Forms, the attachment file size uploaded can be up to 2GB, where as with InfoPath attachment files are not able to handle large file size attachments such as short video’s, such InfoPath form saves the file directly on the form as base64 string.


For any assistant, please email us:


Here are the following steps involved to get started with SharePoint Angular and Bootstrap Forms.

1. To create a Angular js and Bootstrap form in SharePoint, the first thing to do is create a html file on your local machine.

2. To do this, open Visual Studio Code (which you can download for free) or any text editor tool, such as Notepad.

3. And type the following Code:

<!DOCTYPE html>
<html lang="en-US">


4. And save the file for example, to the name, “MyFirstSharePointAngularForm.html”.


The file is saved as HTML file


5. Go back to Visual Studio Code, and the following reference needs to be added to Visual Studio Code (JQuery, Angular JS, Twitter Bootstrap, JQuery UI (for datepicker control), SharePoint Javascript API):

 <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <!-- Latest compiled and minified JavaScript -->

 <link rel="stylesheet" href="//">

 <link href="//" rel="stylesheet">



6. Then add Angular Module and Controller needs to be created in the code, with 2 example scope variables, called “firstName” and “lastName”.

 var app = angular.module("myApp", []);

 app.controller("myCtrl", function($scope, $location) {

 $scope.firstName = "John";
 $scope.lastName = "Howard";



7. The create a body tag just below script tag, and add the div tag referencing the Angular app and  controller, and then creating the “firstName” and “lastName” text box, as shown below:


8. Now in SharePoint, go to site contents:


9.and go to “Site Assets”


10. Click on “new document” and upload “MyFirstSharePointAngularForm.html” file.


11. Now, we need to get the URL of where the file “MyFirstSharePointAngularForm.html” is located in SharePoint. To do this, go to the Library tab on the ribbon, and click on “Open with Explorer”


12. Copy and paste the URL of SharePoint “MyFirstSharePointAngularForm.html” into a Notepad.

in this case:



13. Go to “Site Contents”, and then click on Pages


14.Go to Files tab in the ribbon, and click on New Document > Welcome Page


15. Put in Title name, in this case, “MyFirstAngularForm”, and in page layout, select “Blank Web Part page”.


And a web page is created in SharePoint:


16. Click on the web page, and then go to Edit Page Mode


17. Click on “Add a Web Part”, and select “Content Editor Web Part”.


18. Then edit the Content Editor Web Part


19. Then paste in the URL in Content Editor Web Page (that you copied to notepad in step 12), and then click OK.


20. And then Publish the web page


21. Now you can see the Angular Form in the Web Part Page


22. Please continue this blog to Part 2, SharePoint Angular and bootstrap Form – Part 2


For any assistant, please email us:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s