Custom Sign Off Page
The custom sign off page requires customization beyond the ones provided natively by the SharePoint toolset. This key component captures the users sign off for the document in question, and relates the users sign off with the document they are signing off on.The custom sign off page is reached through the custom URL generated by the sign off workflow connected to the document library. This url is a combination of the actual URL of the sign off page along with the document ID added as a URL parameter:
yourSite/SitePages/DocSignOff.aspx?DocumentID=[%CurrentItem:WorkflowSetID]
We will generate this URL in a later phase of this article. For now, we are creating the page that this URL points to, so that when someone clicks that URL, it will resolve to this page.
This page completes the following:
- Captures the DocumentID from the URL Parameter.
- Present the user with sign off interface.
- Capture the users sign off and save it to the sign off list.
- Redirect the user to the thank you for signing off page.
Jquery Library Import and Setup
Before you can create this page, you first need to import the JQuery and SPServices libraries that support the functional components. These are available on the web:http://sympmarc.github.io/SPServices/
The two files I used are called:
jquery.SPServices-2014.02
jquery-1.11.3
These two files get downloaded to your site assets library (usually automatically generated for a new site, add it if it isn't):
Thank You Page
The Thank You Page is the page the users are directed to after they have completed the document sign off form. This is a simple SharePoint Web Part page, in which you add a thankyou message and can then add any other supporting information necessary. As this is Simple Sign Off, I created the simplest thankyou page possible called "Thankyou", and then populated it with some quick content:
Make note of the URL of the Thank You Page, we will use that later
Create the Sign Off Page
Open SharePoint Designer and navigate to the site that hosts your document library that will have associated sign off. Click on "Site Pages" to view the pages already created on the site. Create a new page by clicking "Page", select "aspx" as type, name it "DocSignOff.aspx".Now open the page in Designer. If it says you can only open the page in advanced mode, click ok.
Copy and paste the code located at:
https://github.com/steveburgess10/SimpleSignOff/blob/master/DocSignOff.aspx
into a text editor like notepad or textpad. Remove any residual line numbers from the code.
Have both the text editor version and your version open in SharePoint designer at the same time. Copy all of the code in the file you just downloaded with the exception of the first four lines (start at the head tag), and paste that code into your page, starting at the head tag. Except for the first four lines generated by your SharePoint environment, your code and the downloaded code should now be identical.
Update the Sign Off Page if needed
JQuery Links
The first part of this page contains links to the jquery and spservices components necessary that provide the needed functionality. In this code, they are in a relative url as follows:
="/SiteAssets/jquery-1.11.3.js"
If your jquery components are located in a different area of this site, then you will need to update the links. You can test to see if you links are working by uncommenting (removing the two forward slashes) from the line of code "//alert('jquery loaded');". If your paths are correct, a pop up will tell you jquery loaded. If your paths are wrong, when you view the page in Internet Explorer, no pop up will occur.
After you have the jquery links working, put two slashes in front of the "Jquery loaded" line of code.
Style Section
The next section enclosed in style tags is the style section. This is a very basic formatting section that controls the look of the web page. It is designed to be expanded or changed to whatever you need.
Script Section
If you don't yet have jquery working (see above), then do not proceed with this section.
The script section of this page does all of the work. getDocumentID gets the document ID from the URL we set up earlier. "createSignOffRecord" does exactly that, creates a sign off record when the user clicks "Register Choice".
Note here the name of the list it is saving to. This must be exactly the same name as your list you created in an earlier step, including underscores.
Also note the values in "valuepairs". The first value in each pair, the one in quotes, must match precisely the field names in the document sign off list created earlier. If you created the list exactly as specified, you should need no changes.
The final function we are interested in is the saveSignOffRecord function. This function enables the sign off button once the user has checked the acknowledgment checkbox, and passes the document ID to the "createSignOffRecord" function to create the sign off record. The "window.location" function sends the user to your thank you page after clicking "register choice". This path will need to go to your sign off page created earlier. If your thank you page is not in site pages, then you will have to change this link.
HTML section
Finally, the markup that actually displays on the screen is located in the HTML section. Anyone familiar with HTML should know how this section works. It is a bare bones sign off form, ready for you to add styling and content as you see wish.
You will notice at the bottom of the html is an embedded link to this page with the text "Sign Off link with Doc ID attached". This link allows testing of this page right from this page. The document ID is appended to the URL, just like we will be creating in a later workflow. So, if you click this link, it will come back to this form with a document ID of 1. Then check the checkbox, click "Register choice", and see if a new record is created in your Document_Sign_Off library. If it is, everything is working! If not, and you sure jquery is working, then you will need to double check paths and that your list variables are named correctly. IF they are not named correctly, do not rename as behind the scenes SharePoint keeps the original name. Delete the field and then add in another one with the correct name.
That's it! Navigate to this page in SharePoint using Internet Explorer and test it. It will save to your document sign off library if the pathing and variables are all correct. Next, we will configure the workflow that processes this sign off record.
| <- Simple Document Sign Off - Part 4 - Setting the Document ID | Simple Document Sign Off - Part 6 - Notification Workflow -> |
No comments:
Post a Comment