SharePoint Development - Part 2 (Customization)
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.
- First we open PowerShell ISE (ensure you've read the prerequisites) and follow the Sample02/readme.md instructions.
- After we have run the Cmd-Let to create the list we will create custom forms.
- First we will create custom forms for the List Actions.
- We copy the XSL markup from the CustomDisp.aspx page and place it in an XSL file CustomDisp.xsl in Visual Studio
- We copy the XSL markup from the CustomNew.aspx page and place it in an XSL file CustomNew.xsl in Visual Studio
- We will run the Cmd-Let to upload SiteAssets
- We will remove the XSL markup from the CustomNew.aspx page
- We will then use XslLink to point the Data Form Web Part at the CustomNew.XSL file located in the Site Assets library
- 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.
- First we will use Visual Studio to move the Last Updated field to the top of the XSL row
- We will use a style=display:none for the Title field to hide it
- We will create a div with ID to write a message to later
- Run the Set-IaCProvisionAssets -SiteContent $RelativeOrFullPath -Verbose Cmd-Let to upload the new XSL file into the SiteAssets library.
- Once we hit refresh in the browser we can see our changes immediately.
- Highlight the form in the "Forms" pane and click the "Set as Default" ribbon button
- In the video you'll see the form render as it did but we are now using the "new" custom form.
- 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.
- We will open the custom form in SharePoint Designer
- To activate the WebPart group we will need to be in a WebPart zone or somewhere in a webpart.
- Once the WebPart group is active, insert the Content Editor Web Part
- 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
- 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.
- Once we updated the CEWP lets make sure SPD didn't move the XslLink to a separate line (known issue)
- Now we will hit save and navigate to the browser and hit refresh.
- Developer Console is opened to display the files being loaded.
- The DOM ready event fires setting our DIV to 'Hello World. I've run'
- 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.
- If the require field is completed, read the user input field, format it, and create a string to append to the hidden 'Title' field
- 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]
Previous: SharePoint Development – Part 2 (Configuration) | Next: SharePoint (KnockoutJs, HTML5, jQuery)