Monthly Archives: July 2012

SharePoint 2010 Development – The “Report a Problem” Modal Dialog

Business Requirement:

Employee’s currently have to navigate to a separate system to log issues they find in your SharePoint environment. This causes Employee’s to sometimes forget critical information like the URL where the issue occurred as well as exact time the issue occurred. It also adds an extra step in process.

Solution:

Streamline the process by creating a way for employee’s to log issues directly in SharePoint. This will give the support team better information about the issues so they can resolve them in a timely manner.

Technical Items covered in this tutorial:

Adding the following to a Master Page:

  • Custom JavaScript
  • Custom CSS
  • Custom link

How to:

  • Invoke a Modal Dialog
  • Add custom Application page that adds items to a list
  • Use a site level content type

What’s it going to look like?

____________________________________________________________________________________

Link added to master page

____________________________________________________________________________________

Modal Dialog that is launched

____________________________________________________________________________________

Steps:

1. Open your master page and add the code below to add the “Report a problem” link.

I added this right below the “All Site Content” link in the same <li>.

(The error.png is a file I found and scaled to fit.)

____________________________________________________________________________________

2. Next add the reportproblem CSS class

If you need more details about how to reference CSS or JavaScript files in your master page, please check my other tutorial here.

____________________________________________________________________________________

3. Add the OpenDialog JavaScript function to open the SP modal dialog onclick

____________________________________________________________________________________

4.  Now I have to build the application page to capture the user input and URL where the user reported the problem. For this I’ll need to create a Visual Studio project an create my reportproblem.aspx application page. If you need information on how to create a project to add an application page, please reference here.

____________________________________________________________________________________

5. Add code behind to handle Page_Load and btnReportProblem_Click event.

____________________________________________________________________________________

6. The “problems” list uses a custom content type I created called “Problem” that inherits from the OOTB content type “Issue”. The “Issue” content type had everything I needed except the URL field. Here’s the fields in my “Problem” content type. As you can see the “Problem” content has some great fields that I can user for potential enhancements to the process like “Due Date” or “Related Issue”.

____________________________________________________________________________________

That’s all you’ll need to allow users to report problems directly in SharePoint. Now that the problems are saved in a SharePoint list, you can easily take this to the next level and add workflows, alerts and tasks to the items. This will help track the problems and keep users up to date on what they reported.