Does this work with Rendering Templates?

May 11, 2010 at 6:09 PM
Ok so I'm trying to inject javascript into a ListForm Rendering Template. When I added the SPServices and called the SPArrangeChoices function, it did something. It removed all the controls except the last one. I'm trying to debug it now. I didn't quite follow the hint about the DisplayName. My form is outputting the comments FieldName, FieldInternalName, and FieldType. These are the standard comments that come with a CompositeForm control. I'm trying to debug now.
Coordinator
May 11, 2010 at 6:16 PM

I've seen you talk about rendering templates many times, but I'm not up to speed on them.  The important thing for SPArrangeChoices is what ends up being rendered in the DOM.

First, the function looks for a TD with the class .ms-formbody which contains the text 'FieldName=' + DisplayName.  (The DisplayName as opposed to the InternalName or, as the Web Services call it, the StaticName.) Next, the function simply finds all of the TRs, captures the contents in an array, and then replaces the existing section in the DOM with the array of options rearranged.

M.

May 11, 2010 at 6:33 PM

Can you think of any reason why the function would go beyond its parent and remove all the controls except for the final one?

Let me describe what it does:

It removes all TDs up to the next to the last field.  It then displays the description text of this second to last field without formatting.  It then displays the last field.  Everything else was removed.  I need to send some screenshots.

I just DMed them to @sympmarc.

Coordinator
May 11, 2010 at 7:18 PM
Edited May 11, 2010 at 7:24 PM

There's got to be something different about how the checkboxes and their labels are rendered with rendering templates than with the default Sharepoint controls.  Can you post the HTML from the DOM?  Everything inside the <td class="ms-formbody...

M.

May 11, 2010 at 7:56 PM
		<TD valign="top" class="ms-formbody" width="400px">
		<!-- FieldName="Role"
			 FieldInternalName="CSRole"
			 FieldType="SPFieldMultiChoice"
		  -->
			<span dir="none"><table cellpadding="0" cellspacing="1">
					<tr>
						<td><span class="ms-RadioText" title="PM"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl00" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl00" checked="checked" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl00">PM</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="QM"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl01" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl01" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl01">QM</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="HSE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl02" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl02" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl02">HSE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="DM"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl03" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl03" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl03">DM</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="WSS"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl04" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl04" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl04">WSS</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="SWE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl05" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl05" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl05">SWE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="WE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl06" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl06" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl06">WE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="PA"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl07" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl07" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl07">PA</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="SDM"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl08" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl08" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl08">SDM</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="SSM"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl09" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl09" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl09">SSM</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="RE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl10" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl10" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl10">RE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="GE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl11" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl11" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl11">GE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="PP"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl12" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl12" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl12">PP</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="CE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl13" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl13" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl13">CE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="PEM"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl14" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl14" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl14">PEM</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="PT"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl15" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl15" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl15">PT</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="SFE"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl16" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl16" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl16">SFE</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="DS"><input id="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl17" type="checkbox" name="ctl00$m$g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c$ctl00$ctl04$ctl00$CompositeField2$ctl00$ctl04$ctl00$ctl17" /><label for="ctl00_m_g_1a96e7f5_c6c5_4f60_99dd_5f96da84088c_ctl00_ctl04_ctl00_CompositeField2_ctl00_ctl04_ctl00_ctl17">DS</label></span></td>
					</tr>
				</table></span>
			PM - Project Management  <br>						QM -  <br>						HSE -  <br>						DM -  <br>						WSS -  <br>						SWE -  <br>						WE - Well Engineer <br>						PA - Project Assistant  <br>						SDM - Service delivery Manager  <br>						SSM - Subsurface Manager  <br>						RE - Reservoir Engineer  <br>						GE - Geologist  <br>						PP - Petro-Physicist  <br>						CE - Completions Engineer  <br>						PEM - Production Enhancement Manager  <br>						PT - Petroleum Technologist  <br>						SFE - Surface Engineer  <br>						DS - Drilling Superintendent
			
		</TD>

Coordinator
May 11, 2010 at 8:02 PM

I think this ought to work.  What are the values below (PM, QM, etc.)? Are they from the Description?

Are you calling like this?

   $().SPServices.SPArrangeChoices({
    columnName: "Role",
    perRow: 2
   });

(perRow can be whatever number you want, of course.)

M.

May 11, 2010 at 8:20 PM

Yeah so I removed the Description thinking that might be the cause.

No bueno.  Not sure what to do next :(

Coordinator
May 12, 2010 at 12:10 AM
Edited May 12, 2010 at 12:36 AM

The function is actually pretty simple if you want to try debugging it.  It wasn't totally clear to me what's happening based on your screenshots.

Thinking about it, the problem has to be in this section:

    // Remove the existing rows...
    $(this).find("tr").remove();
    // ...and append the out string
    $(this).find("table").append(out);
    // Stop looking; we're done
    return false;

but it also doesn't make sense to me that you aren't seeing all of the options.

M.

Coordinator
May 12, 2010 at 2:50 PM

After some back and forth with tigertoy in email, he got this working.  I'm copying a few snippets from our conversation in case they are of general usefulness.

=======

From tigertoy:

Thats what I did and you were right!  After eliminating everything else thats all was left.

I found it curious when I removed your script library, it still didn't work.  Then I removed JQuery and then it worked, just didn't do anything.  So all this time I thought it was the function -- it was script themselves.  Now I have a custom script writing out the includes for the other libraries.  Works great now, thanks!

document.write('<script type="text/javascript" src="/_layouts/Scripts/JQuery/jquery-1.4.2.min.js"><\/script>');
document.write('<script type="text/javascript" src="/_layouts/Scripts/SPServices/jquery.SPServices-0.5.4.min.js"><\/script>');
function initializeContractorSummary() {
    $().SPServices.SPArrangeChoices({
        columnName: "Role",
        perRow: 5
       });
}
_spBodyOnLoadFunctionNames.push("initializeContractorSummary");


=======

From me:

Glad you got it working!

With jQuery, you have $(document).ready() which you can use instead of _spBodyOnLoadFunctionNames. In places where I am using jQuery, I always use that instead. Because it’s a jQuery function, by using it I’m always positive that jQuery is set up right. when I first drop it into the page, I’ll just do a simple alert to be sure that my script references are right, because the alert will only fire if jQuery is loaded.

I also suggest putting your scripts into a Document Library rather than into the file system on the server, just for easier maintainability.

M.