By: Omar Stewart

 

Recently a co-worker asked if he could create a quick action from SharePoint designer, that launches a modal window and passes in a list item ID. This should really just be a checkbox in SharePoint designer but since its not, we can leverage SharePoint's beautiful and simple UI Dialog framework.

 

For our scenario, we have a list of projects we would like to allow employees to quickly add comments to. There are tons of ways to do this, but we want users to be able to do so without leaving the page.

 

We'll create a simple Projects list to house our Project Content Type.

 

All the content type will have is "Project Title, Project Description, and Project Leader"

 

 

 

We'll also create a project comment content type with a Comment Author, Project Comment, and Associated Article. For the Associated Article Column, configure it to be a lookup column, and have it point to the Projects List and grab the project title.

 

 

 

Then we'll just create a list to display the User and Project Comment.

 

 

 

Now this is where it gets really fun.

 

We'll browse to our Projects list and edit the page.

 

Click on the Projects List Web Part, then click Web Part Tools: Options on the Ribbon.

 

 

Now click "Insert Related List" and select the Comments list from the drop down.

 

We can now filter our comments view below by clicking on the select icon in the projects list for any project.

 

 

 

Now we want users to be able to add a comment without leaving the page.

 

Open SharePoint designer and select your Comments list.

 

 

In the Forms section, click New to create a new Form. Title the form "AddComment" and make sure its set to use the "Project Comment" Content Type. We'll also leave default-form  unchecked.

 

 

 

Click to edit the form, then click Advanced mode so we can make some changes to the code-behind.

 

Scroll down to the bottom of the page source and add some comments to declare our script section.

 

 

We'll first add our JQuery reference. Then we'll add our actual script:

 

 

<!-- Setting the default value of the associated project for our article comments -->

 

<!-- Reference JQuery -->

<script type="text/javascript" src="/ScriptLibrary/jquery-1.5.min.js"></script>

 

<script type="text/javascript">

 

$(function(){

 

//Get our Associated Project DropDown Field By its Title.

//SharePoint adds a title with the column name to form fields.

var AssociatedProjectDropDown = $('select[title=AssociatedProject]');

 

//Get the value of the associated project.

var AssociatedProject = getParameterByName('AssociatedProjectId');

 

//Now we'll set the value of the drop down based on our value

AssociatedProjectDropDown.val(AssociatedProject);

 

//Function to pull values from query string

function getParameterByName( name )

{

  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

  var regexS = "[\\?&]"+name+"=([^&#]*)";

  var regex = new RegExp( regexS );

  var results = regex.exec( window.location.href );

  if( results == null )

    return "";

  else

    return decodeURIComponent(results[1].replace(/\+/g, " "));

}

 

});

 

</script>

<!-- Setting the default value of the associated project for our article comments -->

 

 

You're done with editing the form. Save and navigate to the "Projects" List.

 

 

Now all we have to do is create our custom action.

 

While in the Projects Library Settings page, click Custom Action, then click List Item Menu.

 

 

Give the action a title of "Comment on this Project"

 

Then change the action type to "Navigate to URL".

 

For the Url, we'll throw in our AssociatedProjectID in part of the SP.UI Framework call.

 

Our full url should be

"javascript:var options={url:'/sites/projects/Lists/Comments/AddComment.aspx?AssociatedProjectId={ItemId}',title:'Leave Comment'};SP.UI.ModalDialog.showModalDialog(options);"

*without quotes

 

 

Now just browse to your page, click the list item drop down, and you should see your Leave Comment action.

 

 

Now users can just leave a comment. Once you enter the comment and click save, the comment will be posted, and the new dialog window is automatically closed. Refresh your page and you should see the new comment added to your page.

 

 

 

Hope this helps!

 

By: Omar Stewart