SharePoint

Open a Filtered List from a List in SharePoint Online

sharepoint-list-popup

This post covers how to open a list, with filtering, from another list, in SharePoint Online. This could be useful in any situation where you have a list of information related to another list, and want the user to be able to easily access that second list. The functionality I’m describing will become more apparent as we go. 

So I have created one list called Projects, and that is my main list. The second list is called Project Communications, and it includes a lookup column on the Projects list, Project Number column. I want the Project Communications list to open in a popup/dialog when I click a Project Number in the Projects list, and I want it to be filtered by the project clicked. This gives the user a very nice experience.

The first step is to give the Project Number (Proj. No.) column a clickable appearance and attach an onClick event handler. I’ve done this with JSLink. My code is as follows:


(function () {
  var priorityFiledContext = {};
  priorityFiledContext.Templates = {};
  priorityFiledContext.Templates.Fields = {"Title": { "View": projectFieldTemplate }};

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
})();

function projectFieldTemplate(ctx) {
  var project = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  return "<span style='text-decoration:underline; color:blue; cursor:pointer;' onclick='openDialog(" + project + ");'>" + project + "</span>";
}

function openDialog(myProject) {
  SP.UI.ModalDialog.showModalDialog({
    url: myURL + myProject,
    width: 1000,
    title: "Project Communications"
  });
}

This gives the appearance of a hyperlink for each Proj. No. and opens the Project Communcations list in a popup/dialog on click. But the Project Communcations list is not filtered by Project by default. How to apply filtering?

The solution is here. You need to create a Query string (URL) filter web part on the list page. Once you’ve done that the list will open filtered by the Project you clicked on. Easy!

Let me know how this works for you!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s