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.

 

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">
</html>

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):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="/_layouts/15/SP.Runtime.js /_layouts/15/SP.js /_layouts/15/sp.userprofiles.js"></script>

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:

http://…/SiteAssets/MyFirstSharePointAngularForm.html

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

2 thoughts on “SharePoint Angular and bootstrap Form – Part 1

  1. Hi there would you mind stating which blog platform you’re using?

    I’m looking to start my own blog in the near
    future but I’m having a difficult time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then most blogs
    and I’m looking for something unique.
    P.S Apologies for being off-topic but I had
    to ask!

Leave a Reply

Your email address will not be published. Required fields are marked *