SPArrangeChoices on custom form

Mar 5, 2010 at 3:50 PM

Having seen the blog article and comments here:

http://www.endusersharepoint.com/2010/02/12/a-jquery-library-for-sharepoint-web-services-wss-3-0-and-moss-part-5-the-sparrangechoices-function/comment-page-1/

I thought I'd let folk know that I haven't been able to get this working on a customised form "out of the box".

The standard / vanilla SharePoint form will give an HTML comment like this:

 

<!-- FieldName="Display Name"
FieldInternalName="Display_x0020_Name"
FieldType="SPFieldChoice"
-->

just before the radio buttons or checkboxes.

However, a custom form has the standard form made invisible (it's mostly still there in the HTML with style="display:none;" set on the surrounding table). The custom form is then created using XSL and markup like this

<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="Edit" FieldName="Display_x0020_Name" 
__designer:bind="{ddwrt:DataBind('u',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Display_x0020_Name')}"
/>

When this is rendered in the browser, the comment block (shown above) is not in the HTML.

The simplest way to get this displayed is to add

<xsl:comment>FieldName="Display Name"</xsl:comment>
just above the <SharePoint:FormField> in the XSL of the custom form.

Now the SPArrangeChoices code will find the comment with the "FieldName" set and will rearrange the radios / checkboxes as desired.


Now here's something that I thought would work... if you want to rearrange a number of radios all in one go, add 
<xsl:comment>FieldName="RearrangeMe"</xsl:comment>
to each <td> that contains the radios to rearrange, and then you will only need one call:
$().SPServices.SPArrangeChoices({
    columnName: "RearrangeMe",
    perRow: 5
});

This doesn't actually work with the current release of SPArrangeChoices (it works for every other field!). The SPArrangeChoices function needs to be amended with
searchText.lastIndex = 0;
added as the last statement within the if block:
if(searchText.test($(this).html()))
...OR remove the "g" flag from the RegExp object

 

Coordinator
Mar 5, 2010 at 4:21 PM
Edited Mar 5, 2010 at 4:21 PM

Alex:

I just created a new custom form, and I'll be damned if you aren't right.  I could have sworn I looked at that when I built the function.

The real PITA is that columns which are displayed as radio buttons or check boxes don't have nice anchors to hook into in the DOM like other column types do.  I'm going to look at how I can enhance the function to be a little bit smarter.  In the meantime, you've got a nice workaround with the

<xsl:comment>FieldName="Display Name"</xsl:comment>

trick.

With all of the functions, I've consciously decided not to build them to allow wildcard use.  I think that it's important to require specific decisions per column so that we don't overburden the client side.  It may not make sense to you, but in the long run, I feel like people will end up with more useful results.

M.

Coordinator
Mar 5, 2010 at 4:23 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Mar 5, 2010 at 4:28 PM

Marc,

I hear what you are saying about the wildcard use. I'm probably being rather picky then...  the SPArrangeChoices code looks at every field on the hidden and custom form for every field that I want to re-arrange. In my case, the form has about 50 fields, and 12 of which are radio buttons (yes / no).

The current code requires looking through 100 fields 12 times. My change means it looks through 100 fields once.

A small improvement would be to return false when the code has triggered so that no further processing is done...?

Alex

 

Coordinator
Mar 5, 2010 at 4:33 PM

I see what you're saying.  I'm not being very efficient, am I?  I can tighten up the selector, I think.

M.

Mar 5, 2010 at 4:35 PM

You guys are great. You make the idiots like me look that much smarter!

Coordinator
Mar 5, 2010 at 4:39 PM

No idiots here. Just people who are earlier in the learning curve.  ;+)

BTW, Alex, I ALWAYS delete the default form and I have NEVER had any issues.  I think that the need to hide the existing form is a SharePoint Myth. (I need to publish Part 2 of that which contains this thought!)

M.

Mar 5, 2010 at 4:46 PM

So I am playing around and got it to work on a test site I use.

If I understand this right, I will need to add <xsl:comment>FieldName="Display Name"</xsl:comment>
above each line that I am changing the layout on and add the correct name.

Is that correct?

I am way at the beginning of the curve. I almost feel like I am still on the street leading up to the curve.

:)

Coordinator
Mar 5, 2010 at 6:46 PM

Yes, Scott, that outght to work.  Try it out and let me know if it does or not.

Until I can come up with some other trick, this is going to be the way to go.  I'll add this to the docs as well.

M.

Mar 5, 2010 at 7:47 PM

Yep its working. I got all the horizontal to vertical changes made. Now I just have to start moving everything around.

Whats the fastest way to restructure the layout of a new form? I am currently just adding rows and merging cells to get the look I want (never really looks right). There has to be an easier or cleaner way to do this.

I am basically making the list have two columns of answers for each question. We are converting a checklist for a group.

Any suggestions?

Coordinator
Mar 5, 2010 at 7:51 PM

There's no real magical trick.  I always do it in the code so that I don't end up with any SharePoint Designer cruft in the table structures.

I added a note on this in the docs here:
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPArrangeChoices

Let me know if it makes sense.

M.

Mar 5, 2010 at 8:43 PM

OK I had a "Life Lesson" as I tell my kids with this one. So if you customize the form wait to add the above code until you have finished moving everything around. Once you have finished then go back and add the line above each item in the code.

I hope my mistake helps someone else out some day!

Coordinator
Mar 5, 2010 at 10:18 PM
Edited Mar 6, 2010 at 1:09 AM

Alex:

Looking at the selector logic in SPArrangeChoices, I'm not sure I can do any better.  jQuery doesn't seem capable of selecting based on the contents of HTML comments, unless I'm missing something.  I did add a return to break out of the each once we've done what we need to do.

M.