Displaying a List Within a SharePoint Form

This one is more than a bit complicated depending on how custom you want to make it. Because of this, I'm going to try and keep the description of how this solution came about very simple and generalized, hopefully you can take bits of ideas away and build your own solutions.

The Challenge: An task generates several sub-tasks that need to be completed before the event can occur. I need to build a way for users to quickly and easily view the status of the task and it's sub-tasks.

The Problem: DispForm.aspx is a relatively fixed form that is very difficult to modify dynamically.

The Solution: To solve this one, I combined Calculated Columns with <iframe>, Filtered Views, and (of course) a lot of Javascript. Definitions first:

• ccSubTask - the calculated column that builds the HTML string that incorporates the IFRAME & filtered sub-task list.
• Filtered sub-task list - this list contains all of the sub-task information. Each sub-task has an identifier linking it to the original task. This identifier is how the view is filtered.
• CEWP code - this is the javascript code that goes in the Content Editor Web Part at the bottom of the page.

Ok, now that we have a common point of reference, let's get to the code:

ccSubTask code:

=CONCATENATE("<iframe name='ifrm' id='ifrm' src='[URL TO THE LIST]/AllItems.aspx?View={[ID OF LIST VIEW]}&FilterField1=Title&FilterValue1=",[TASK ID],"' width='625' frameborder=0 height='255' scrolling='auto'></iframe></td>")

To get the [ID OF LIST VIEW] simply go to the sub-task list and filter based on any value. When the page reloads, copy the string of letters/numbers between the curly brackets and paste them into the calculated column.

CEWP code:

<script type="text/javascript">
var TDs = document.getElementsByTagName("TD");
var i=0;

while (i < TDs.length)
{
 try
 {
  if (TDs[i].innerText == "ccSubTask")
  {
   TDs[i].innerHTML = "sub-task view";
   TDs[i+1].innerHTML = TDs[i+1].innerText;
  }
 }
 catch(err){}
 i=i+1;
}
</script>

Again, there is a lot else going on here so it probably won't work to do simple copy/pasting with this solution. But if you're able to get it working or draw ideas for how to customize your site, then I've achieved my goal.

This picture shows how I've implemented it on my site: