Custom SharePoint List Online Forms and Workflows to choose from

In this year of 2017, SharePoint has come out with many flavours and approaches in the way of developing online approval forms, such as a “travel expense form”. From a history list of SharePoint versions, such as SharePoint 2007 all the way to SharePoint 2013 and SharePoint Online 365, the question arises when wanting to develop a Custom SharePoint Form, of what approaches or technologies is their available in the market and what approaches we can use to develop Custom SharePoint Forms. And the next question arises, which workflow tool to use in creating for example approvals in workflows?

Well some of the well known tools in the market for SharePoint Online Form development are:

Online Form Technologies Advantages / disadvantages
infopath_logo.png InfoPath Forms Advantage:

  • Quicker Development Time as generally no code is required (although you can still add code to InfoPath Forms)
  • Very powerful form with views, rules, and many controls
  • Able to link with web services, and SharePoint list data
  • Easy to learn, and software development coding background is not required (unless adding code)

Disadvantage:

  • Not able to attach large files, such as small video files
  • InfoPath is getting deprecated by Microsoft
  • Might experience issues with non-internet explorer browsers
VS2012Logo ASP.NET Web Parts Visual WebParts Advantage:

  • Visual Studio required
  • Allow CSS and JavaScript coding
  • Able to use most ASP.NET controls, with some SharePoint controls such as People Picker

Disadvantage:

  • Longer to develop as code is required, and therefore ASP.NET (preferably C#) coding knowledge background is required.
SPServices HTML, JQuery, and SPServices Advantage:

  • Able to debug directly in web browser, such as google chrome, internet explorer.
  • Provides strong functionalities with HTML controls.

Disadvantage:

  • Longer to develop as code is required, and therefore JavaScript coding knowledge background is required.
  • Not able to use in SharePoint 2007
  • Sometimes harder to debug as the code is in JavaScript and JQuery.
AngularJS_Short.png Angular JS, JQuery, with SharePoint Rest Service API Advantage:

  • Able to debug directly in web browser, such as google chrome, internet explorer.
  • Angular modifies the page DOM directly instead of adding inner HTML code.
  • Provides strong functionalities with HTML controls.

Disadvantage:

  • Longer to develop as code is required, and therefore Angular, JavaScript coding knowledge background is required.
  • Not able to use in SharePoint 2007
  • Sometimes harder to debug as the code is in JavaScript and JQuery.
PowerAppsLogo PowerApps In this year 2017, PowerApps is fairly new in the market for form development. PowerApps is highly being pushed by Microsoft in the cloud on SharePoint Online 365, and it is seen as an alternative to InfoPath forms development, as InfoPath is getting depreciated by Microsoft.

Advantage:

  • Already comes with the Office 365 Online products (with SharePoint Online, PowerApps, Flows, etc.).
  • No code required, and therefore no coding knowledge required.

Disadvantage:

  • New in the market.
 NintexForms

k2SmartForms.png

AgilePointLogo.jpg

3rd Party
Forms
There maybe many 3rd Party Forms out there, but the 3 main 3rd Party Forms for SharePoint that I have come across with are from:

Advantage:

  • All these forms comes with workflows.
  • Comes with some great feature. Each 3rd Party tool has it’s own features.

Disadvantage:

  • Cost money to purchase.
  • Some of these forms might not be as powerful as InfoPath Forms, but you never know in the future.

 

Now moving on to workflows, how do we decide which workflow tool to use with SharePoint?

Well, the most cheapest option, out there is:

1. SharePoint Designer Workflows

SharePoint Designer Workflows are a free Workflow tool that can be downloaded from the internet, however even though it’s free, it doesn’t provide a image look and feel of the Workflow once it’s deployed. Basically, to find out what steps have been completed, and what is the current step in the Workflow, you would have to do a lot of logging in the Workflow.

Below is the design view of SharePoint Designer Workflow:

SharePointDesignerWorkflow

 

2. Nintex Workflows (https://www.nintex.com/)

Nintex Workflows might be one of the most used Workflows tools out there in this time by alot of companies. Nintex Workflow provide a great graphical interface, and it is easy to use and develop.

NintexWorkflow2007.png

 

3. AgilePoint Workflows (http://agilepoint.com/)

AgilePoint Workflow are one of my favourites. Really complicated Workflows can be developed with AgilePoint. This is definitely one of the options considered when deciding to purchase a online Workflow tool.

Workflow4

 

4. K2 Workflows (https://www.k2.com/)

K2 Workflows are another great option to choose from, and comes with many features, including Lazy Approval. K2 Workflows are a real advantage with your work environment. The design interface of K2 Workflows can be browser based, hosted in SharePoint, Visio and Visual Studio.

K2Workflow

 

5. Flow Workflows

Flow is relatively new to the market, and is a Microsoft based Workflow. Flow is highly being pushed by Microsoft in the cloud on SharePoint Online 365.Flow goes well with PowerApps. It might be a good option with SharePoint Online 365, but currently SharePoint on-premises, other Workflow tools are more used.

FlowWorkflow.png

 

In conclusion, spend some good research time into what Custom SharePoint Online Forms and Workflows tool to choose from, as generally when a SharePoint Online Forms and Workflow tool is selected, then many projects will be developed using those tools.

 

SharePoint Angular and bootstrap Form – Part 2

Continuing on with one of my previous blogs, SharePoint Angular and bootstrap Form – Part 1, in this blog, we are going to focus on how to extract data with SharePoint Angular Rest Service and put that into Angular scope.

The steps involved in this process are:

1. Remember to add the Script reference in SharePoint mentioned with the previous blog.

4.ScriptAndLinkReference

2. Then add the following code below within the the angular controller:

1.AjaxGetUserDetails

The code is explained as below:

a)

var userid = _spPageContextInfo.userId;

The _spPageContextInfo.userId code get’s the userId of the the person logged in to SharePoint.

b)

var requestUriGetUserDetails = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

The _spPageContextInfo.webAbsoluteUrl get’s the URL at the site level of the current site:

So if the sharepoint in your URL is:

https://sharepointsite.com/projects/sciprojmgnt/Pages/MyFirstAngularForm.aspx,

then then the value of, _spPageContextInfo.webAbsoluteUrl , would be:

https://sharepointsite.com/projects/sciprojmgnt/

The second part of the code is:

“/_api/web/getuserbyid(” + userid + “)”;

This code calls the api getuserbyid, with the parameter of userId.

getuserbyid api contains good amount of details of the current user, such as:

user’s login name, full name (title), email address, etc.

3.getuserbyid api.png

c) the Jquery Ajax function code is executed, with a success function called:

onSuccessGetUserDetails

and function method:

onErrorGetUserDetails

The onSuccessGetUserDetails function get’s the value from  getuserbyid api, and then stores then to the angular scope variables:

 var varFullName = data.d.Title;
 var varEmail = data.d.Email;
 var varLoginName = data.d.LoginName;

 $scope.loginName = varLoginName;
 $scope.email = varEmail;
 $scope.requestorEmail = varEmail;
 $scope.requestorFullName = varFullName;

 var fullNameArray = varFullName.split(" ");

 var firstNameValue = fullNameArray[0];
 var lastNameValue = fullNameArray[1];

 $scope.firstName = firstNameValue;
 $scope.lastName = lastNameValue;

 

3. When the code is inserted, then save the code, and then upload the form again to the SharePoint site, most likely in the Site Assets document library:

9.SharePointUploadHTMLFile

4. And then the form shows the value of the current details below:

4.SharePointAPIAngularJSForm

 

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

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