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).
- First we open PowerShell ISE (ensure you've read the prerequisites) and follow the Sample03/readme.md instructions.
- 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
- After we run the Cmd-Let to create the list we will create custom forms in SharePoint Designer
- I'll use the ellipse in the CEWP to browse to the Site Asset that we uploaded via the Cmd-Let
- I'll then remove the XSL and set the XslLink relative path to the uploaded XSL
- I'll go quickly over this process as it is covered in the previous post
- We will then walk through the "new" user experience with HTML5 controls and KnockoutJs binding
- We maintain the existing SharePoint OOTB control capability with Rich Text and markup
- I am hiding the rich text fields and using a custom div to enable drag-n-drop
- I keep the same PreSaveAction but in this case I place the alert in the DOM for the user to see
- We have customized the display with additional file properties (i.e., file size included Bytes/Megabytes/Gigabytes) in the model.
- 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.
- Watch the responsiveness of the browser as we issue asynchronous activities throughout the process.
- If the video does not render the source file is: https://mix.office.com/watch/1chj3lxmaa387
Previous: SharePoint Development – Part 2 (Customization) | Next: SharePoint Hosted Add-Ins