SharePoint Development - Part 3 (KnockoutJs)

In the previous blog we created and customized a list.    We applied some very basic customization's to a SharePoint list while leveraging out of the box controls.   In this post we will further extend the usage of Custom Forms building upon the previous example.   In some cases you will be asked to make SharePoint not look or operate like SharePoint.  This example will take advantage of modern development frameworks and the SharePoint REST API's.    I will focus on KnockoutJS and jQuery in this demonstration.  I chose KnockoutJs because of its simplicity in implementing MVVM patterns.  We could easily use AngularJs or another framework.  In a future blog I will focus exclusively on AngularJs 2 for a Provider Hosted Add-In.   I prefer JavaScript because of its ease of use, growing community, and ability to be reused across SharePoint On Premise and SharePoint Online.  I've found KnockoutJs to be a simple enough framework to demonstrate custom solutions and rapidly develop solutions for customers.

Prerequisites: Go to development-samples/Sample03/readme.md for more information to leverage our sample code and configure your SharePoint site.  We will reuse the Infrastructure as Code Binary PowerShell module https://github.com/pinch-perfect/Infrastructure-As-Code to automate various aspects of this demo.  It will be helpful to follow the previous blog post as we mimic the Custom form creation for the 3 forms (New, Edit, Display)

Purpose: The purpose of this demonstration is to detail the MVVM pattern leveraging KnockoutJs and HTML5.   In this example we enable drag-n-drop associated with specific rich text fields, custom display of the form hyperlinks, and control of the destination for the file uploads.  In this particular example we create folders and upload files into the 'Shared Documents' library.  In the previous post the user was prompted for a destination.  With this we control the destination and how it is stored.  Also of note, this demonstration continues to support up to 2 Gibs per file upload.  We provide a font-awesome spinner to indicate an active upload for the user.

 

In this video we will use Infrastructure-As-Code to create a Sample 03 File Upload list with specific columns and upload Site Assets from the Sample03 project.  We will then use SharePoint designer to create custom forms (New, Edit, Display).

1. First we open PowerShell ISE (ensure you've read the prerequisites) and follow the Sample03/readme.md instructions.
2. You'll see the new list provisioned into SharePoint with the individual columns and their properties (Multi-Line, DateTime, Text) and if they are required
3. After we run the Cmd-Let to create the list we will create custom forms in SharePoint Designer
   1. I'll use the ellipse in the CEWP to browse to the Site Asset that we uploaded via the Cmd-Let
   2. I'll then remove the XSL and set the XslLink relative path to the uploaded XSL
   3. I'll go quickly over this process as it is covered in the previous post
4. We will then walk through the "new" user experience with HTML5 controls and KnockoutJs binding
5. We maintain the existing SharePoint OOTB control capability with Rich Text and markup
6. I am hiding the rich text fields and using a custom div to enable drag-n-drop
7. I keep the same PreSaveAction but in this case I place the alert in the DOM for the user to see
8. We have customized the display with additional file properties (i.e., file size included Bytes/Megabytes/Gigabytes) in the model.
9. We navigate from display to Edit and move a file from one field to another by using the custom 'Remove' command in the HTML control.
10. Watch the responsiveness of the browser as we issue asynchronous activities throughout the process.
11. If the video does not render the source file is: https://mix.office.com/watch/1chj3lxmaa387

[video width="852" height="480" mp4="https://msdnshared.blob.core.windows.net/media/2016/05/How-To-Edit-HTML5-and-KnockoutJs.mp4"][/video]

 

In Summary:

With minimal effort we can configure and extend the out of the box capabilities with KnockoutJs/jQuery/CSS/Bootstrap.   The focus on this particular blog post is to demonstrate creating custom forms, isolating the XSL into a separate file, leveraging Content Link to inject JavaScript and CSS, and enabling HTML5 specific controls.    We used the InfrastructureAsCode PowerShell module to automate uploading these individual files from Visual Studio into SharePoint.  We could use drag-n-drop to upload files into the Site Assets library or make the modifications directly in the site using SharePoint Designer.    By using Visual Studio we can leverage one of the best IDE's on the market with Extensions for JavaScript, CSS, and HTML development.   With Visual Studio and Intellisense I can program in JavaScript with open documentation from JS frameworks and my individual documented JavaScript files.  We gain source control with version history and can use labels and branching to target a specific builds for a SharePoint site.  We can use these same artifacts on every site to which we deploy.  We can use the site provisioner to configure the lists and fields, deploy the site assets, and pages.    We can make Production, Staging, and Development appear identical.  The greatest gain from using Visual Studio is the ability to label a deployment so if you need to repair something in production while you are working on the next version you can fork the production label, fix the code, deploy to staging (test), and then deploy to production.  By moving our changes away from browser based changes and into automated changes we can ensure the process is repeatable and identical across environments.

 

Previous: SharePoint Development – Part 2 (Customization) | Next: SharePoint Hosted Add-Ins