SharePoint Development - Part 2 (Customization)

In the previous blog we created a list and used all out of the box controls.   I can tweak a list and create libraries, lists, Site Assets, activate features, and more.  That may be sufficient for most users but what if you need form validation or fields that should be auto-populated.   Your user base wants the title to be calculated, group fields, rearrange the fields in a particular order, a field to be hidden unless a user exists in a specific group, or need to present a field in rows.  This is where customization of SharePoint becomes very easy.   We will show you the usage of Custom Forms, XSLLink, Content Link and injecting jQuery.  In a future post we will show you a List Item leveraging Client Side Rendering.  What options do you have to customize?     I like SharePoint Designer but i really love Visual Studio and I'm going to show you both.     In this sample I'll walk you through how to create a custom form (Not modify an existing form) and some techniques that will allow you to leverage source control and short cuts to make your deployment and development life much easier.  The Infrastructure-As-Code Cmd-Lets are meant to automate much of the deployment.  After these videos and the sample code you should be able to configure and customize SharePoint lists.  The Cmd-Lets will allow you to make changes in Visual Studio to XSL, JavaScript, HTML, and CSS files and upload them to your SharePoint site.

Prerequisites: Go to development-samples/Sample02/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.

In this first video we will use Infrastructure-As-Code to create a Sample 02 File Upload list with specific columns and upload Site Assets from the Sample02 project.  We will then use SharePoint designer to create custom forms.

1. First we open PowerShell ISE (ensure you've read the prerequisites) and follow the Sample02/readme.md instructions.
2. After we have run the Cmd-Let to create the list we will create custom forms.
3. First we will create custom forms for the List Actions.
   1. We copy the XSL markup from the CustomDisp.aspx page and place it in an XSL file CustomDisp.xsl in Visual Studio
   2. We copy the XSL markup from the CustomNew.aspx page and place it in an XSL file CustomNew.xsl in Visual Studio
4. We will run the Cmd-Let to upload SiteAssets
   1. We will remove the XSL markup from the CustomNew.aspx page
   2. We will then use XslLink to point the Data Form Web Part at the CustomNew.XSL file located in the Site Assets library
5. If the video does not render the source file is: https://mix.office.com/watch/bwuc6qngczko

[video width="852" height="480" mp4="https://msdnshared.blob.core.windows.net/media/2016/05/How-to-Create-Custom-Form1.mp4"][/video]

In the second video we will use Visual Studio to make changes the CustomNew.XSL and use SharePoint designer to mark CustomNew.aspx as the default form.  We use PowerShell ISE to run the Set-IaCProvisionAsset Cmd-Let.  I've set the full path to the SiteAssets folder in my source repo folder location.  This allows me to make tiny or massive tweaks in Visual Studio to XSL, JS, CSS and push the files up as often as needed.  We gain massive benefits from Intellisense, Source Control, and VS capabilities.   I can and do reuse this in a continuous integration mantra to automate deployments.

1. First we will use Visual Studio to move the Last Updated field to the top of the XSL row
2. We will use a style=display:none for the Title field to hide it
3. We will create a div with ID to write a message to later
4. Run the Set-IaCProvisionAssets -SiteContent $RelativeOrFullPath -Verbose Cmd-Let to upload the new XSL file into the SiteAssets library.
5. Once we hit refresh in the browser we can see our changes immediately.
6. Highlight the form in the "Forms" pane and click the "Set as Default" ribbon button
7. In the video you'll see the form render as it did but we are now using the "new" custom form.
8. If the video does not render the source file is: https://mix.office.com/watch/2t5mkf31ks43

[video width="852" height="480" mp4="https://msdnshared.blob.core.windows.net/media/2016/05/How-to-Create-Custom-new-form-then-set-as-default1.mp4"][/video]

In the third video we will use Content Link in a Content Editor Web Part (CEWP) to inject JS libraries on page render and enable an On Load activity.

Note: In the video I use SharePoint Designer to add the webpart but I could do this in the browser if I did not have access to SPD.

1. We will open the custom form in SharePoint Designer
2. To activate the WebPart group we will need to be in a WebPart zone or somewhere in a webpart.
3. Once the WebPart group is active, insert the Content Editor Web Part
4. We will use the ribbon group to change properties of the CEWP such as the Chrome = None and 'Content Link' to the relative URL to the .html file
5. We know the path to the .html file to render JS libraries but If we didn't we could use the ellipse in the SPD 'Content Link' text box to navigate to the file.
6. Once we updated the CEWP lets make sure SPD didn't move the XslLink to a separate line (known issue)
7. Now we will hit save and navigate to the browser and hit refresh.
   1. Developer Console is opened to display the files being loaded.
   2. The DOM ready event fires setting our DIV to 'Hello World.  I've run'
8.  SharePoint list definitions can ensure field requirements and data validation.  However, there may be a variety requirements that out of the box will not meet.
9. We will extend the Sample02New.js file with a PreSaveAction() method in the JavaScript file.   SharePoint forms will listen for this function to perform pre-validation.
   1. If the field we check is not filled in then alert the user (you could use many open source JavaScript frameworks for validation)
   2. If the require field is completed, read the user input field, format it, and create a string to append to the hidden 'Title' field
10. If the video does not render the source file is: https://mix.office.com/watch/a4smzpw5qes5

[video width="852" height="480" mp4="https://msdnshared.blob.core.windows.net/media/2016/05/How-to-Edit-Using-SP-Designer.mp4"][/video]

In Summary:

With minimal effort we can configure and extend the out of the box capabilities.   The focus on this particular blog post is to demonstrate creating custom forms, isolating the XSL into a separate file, and leveraging Content Link to inject JavaScript and CSS.    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.  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 (Configuration) | Next: SharePoint (KnockoutJs, HTML5, jQuery)