SharePoint 2010: Custom List form and Lookup Field rendering displacement

If you have below scenario:

1. Custom List Form

2. Lookup Field 

3. Lookup list more  having more than 19 items

4. You are using some custom CSS that has position:relative

Then in IE, the lookup field starts rendering like this:

See the displacement of the lookup list values from the drop down. This happens because if the number of items crosses beyond 19, it starts rendering it as Input HTML control and if items are below 19, it renders them as Select. It assumes that if there are more then 19 items, users will type the starting characters to get smaller number of items to select from. And if you custom CSS has position:relative for DIV (if you are using JQueryUI, you may have it), you get this. 

So the solution is to override the custom CSS setting. simpleste solution would be to put this in style section

Note: Style section should go in the PlaceHolderAdditionalPageHead placeholder.

<style>

#_Select

{

position:static!important;

}

</style>

And then you get it right.

SharePoint 2010: Custom Validation in List Form for US Phone Number

Recently I had hard time in validating the a filed for a phone number in a custom list form. The OOB ASP.NET RegEx validator can be used but somehow in SharePoint 2010 even if the RegEx expression is correct, it does not validate the correctly formated number. Therefore I decided to use the custom validator.

1. Before you go ahead and use the validator, you should have the ID of the control you wish to validate. The best way I have figured out so far is:
    a. Browse to the custom new form in browser and go to view source
    b. Locate the control and copy the portion of the control name (not the ID) aftre the ff value of control. For example if the name of the control is ctl00$m$g_7864a235_2177_4ad9_bb8e_c9c86a8b6b4f$ff61$ctl00$ctl00$TextField then you should copy only the text aftre the ff (form field) text including ff. so the form name that you will use for this example will be ff61$ctl00$ctl00$TextField

2. You can simply insert the custom ASP.NET validator from ASP.NET tools sectionwhile you are in design view of the custom form:

3. Put correct statement in error message property of the validator.
4. Paste this name (ff61$ctl00$ctl00$TextField in our example) in the ControlToValidate property of the custom validator.
5. Put the name of the javascript function (where you will be performing the validation.) in the ClientValidationFunction property of custom validator.
6. Go to the Code of your form and put the java script function in the PlaceHolderAdditionalPageHead area.
Sample Code:

        function ValidateCallerPhoneNumber(source, arguments)
{
var phoneNumberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
arguments.IsValid = phoneNumberPattern.test(arguments.Value);
return;
}

To understand the RegEx, please read this.

And you are all set.On run time, the custom validator will fire this java script function and supply the required parameters and get the IsValid back from function and show the error message in case validation fails.

Logged-In/Current user's email address populated from list in custom list form

Scenario: Recently I had a requirement wherein the business wanted to maintain the email addresses of users in a list. And in other forms where users are suppose to enter data, the email address should automatically populated from this list. The Site was going to be hosted with hosting company and they wanted the email address in a list so that every user can easily maintain the email address and other information.

Solution: One custom list for user where at least email address, User ID and the person's NT ID (filed type-person) is stored. Then in the record list where users are making entries (for example: Sales Order Main) there will be a field for email address of the user (for example: Sales Executive) and in the new form, it would automatically populated form the other user list using SPServices GetListItems method supplying the currentUser as parameter.

Example execution:

1. Create a list for users:

Note: The title column has been renamed to NTUserID. You may as well customize the new list form for this lsit so that users dont have to enter the NTUserID manually and by validating the NTUserName, it inserts the NTUserID in the text field. and you can make the NTUserID hidden. 

2. In SPD, create a custom list form for new items and and edit that form in advance mode and locate the placeholder PlaceHolderAdditionalPageHead

3. Put reference to the Script Library (I assume that you would have a DocLib for script libraries that will have all scripting libraries uploaded).


<script src="/ScriptLib/jquery-1.5.2.js"></script>

<script language="javascript" type="text/javascript" src="/ScriptLib/jquery.SPServices-0.6.0/jquery.SPServices-0.6.0.min.js"></script>

4. Now you have to get the email address from the Users list for currently logged in user.

$(document).ready(function() {

var thisUserAccount = $().SPServices.SPGetCurrentUser({

fieldName: "Name",

debug: false

});

Note: You should alway use the Name field as working with Title is easy but then there could be more than one person with same Title person in AD however there cannot be two person with same account name.

5. Before you can use the thisUserAccount , you should replace the single slash with double slash so that it works with CAML.

var userID=String(thisUserAccount);

userID.replace("\\","\\\\")

5. Now get the element ID for the email address text box. (If the element ID in your form is ff4 then it will be rendered with a big ID with _ff41_ as part of the ID text. You can just use this rather then using complete ID to get hold of the text box and assign value of the email address you got from previous JQuery call.

   $().SPServices({
   operation: "GetListItems",
   async: false,
   listName: "Users",
   CAMLViewFields: "<ViewFields><FieldRef Name='EMailAddress' /></ViewFields>",
   CAMLQuery: "<Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + userID + "</Value></Eq></Where></Query>",
   completefunc: function (xData, Status) {
     $(xData.responseXML).find("[nodeName='z:row']").each(function() {
       $("#[id*='_ff41_']").val($(this).attr("ows_EMailAddress"));
     });
   }
 });
});

Note: The expression $("#[id*='_ff41_']").val() will locate any element that has _ff41_ in the ID. Since we are using both underscores, it would surely get that text box and another good thing (may be) about this is that even if you move this list to other web apps/site collection on any different level, or upgrade SharePoint  in future, the full ID may change but (most probably) it will have the _ff41_ text in it.

So now if the list has the email address for logged in user, the new form will have that in the email address text box on form load.