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: bizloadsolutions@gmail.com

=====================================================

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>

1.CreateHTMLFile

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

2.MyFirstSharePointAngularForm

The file is saved as HTML file

3.MyFirstSharePointAngularFormFileSaved

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

 https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

 https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

 <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 -->
 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 https://code.jquery.com/ui/1.12.1/jquery-ui.js

 http://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

 /_layouts/15/SP.Runtime.js
 /_layouts/15/SP.js
 /_layouts/15/sp.userprofiles.js

4.ScriptAndLinkReference

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";

 });

5.AngularModuleAndControllerCode

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:

6.BodyCode.png

8. Now in SharePoint, go to site contents:

7.GoToSiteContents.png

9.and go to “Site Assets”

8.SharePointSiteAssets

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

9.SharePointUploadHTMLFile

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”

10.SharePointSiteAssetsOpenWithExplorer

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

in this case:

http://…/SiteAssets/MyFirstSharePointAngularForm.html&#8221;

11.SharePointGetURLOfHTMLFile

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

12.SharePointPagesDocLibrary

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

13.WelcomePage

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

14.BlankWebPartPage

And a web page is created in SharePoint:

15.MyFirstAngularForm

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

16.EditPage.png

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

17.ContentEditorWebPart

18. Then edit the Content Editor Web Part

18.EditContentEditorWebPart

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

19.PasteURLInCEWP

20. And then Publish the web page

20.PublishTheWebPage.png

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

21.FirstAngularWebPartPageComplete.png

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

=====================================================

For any assistant, please email us: bizloadsolutions@gmail.com

=====================================================

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s