SharePoint 2010 Custom List Form: Issues with MultiTab UI

If you want not to use InfoPath Form for some reason and want to customize the List Form using DVWP, which is still a good option in case you want more control on the UI of the form, you will come accross a few issues specially if you are using the JQuery tabs (MultiTab form). To get the JQuery tabs to work, you have to download JQuery UI and then upload in a Script Library (A doc library), as you were doing on SharePoint 2007. Then you have to refer them on the custom form like this:

[This should go in the PlaceHolderAdditionalPageHead]

<link rel="stylesheet" href="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="/ScriptLib/jquery-1.5.1.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/demos/demos.css">

Once done, you code the form HTML to have tabs as explained here.

But you are not done. If you have any DateTime control on your form, they will look very small and if you look at the view source, you would find that the font size is 0 for the Date Picker control.

Therefore, you have to override the settings of CSS like this:


         <style>

.ms-dtinput{
   font-size:11px!important;
}

</style>

Note: I recently learned that the issue was with one of the CSS and better way of handling would be to correct that CSS. I was using JQuery UI (tabs) and one of the CSS I was using was jquery.ui.theme.css. In this CSS, here is the code snippet that should be changed:


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }

The font-size part should be removed and this wil fis the issue and the consumer component will inherit the font size from main CSS (in my case core.css).

Then there is another issue if you many any HTML change in the form and save it, assuming that you made your custom form default, aftre changing the HTML, though it still shows as default form, it does not work and you will see the OOB form when aftre you change any HTML in the form and save it. SO you have to set OOB form default and set the custom form default again. I am assuming that either I am missing some setting some where (and the chances for that is remote) or it is a bug.

SharePoint 2010- Content Types, Lists and UI for the List

In my recent project on SharePoint 2010, I came across with various options to create list, content type and UI for the list. Few of them that I played with were:
VS Code Approach:
SharePoint Guidance Approach
1. Create your content type 
2. Create your List Instances
3. Create the feature to assign Content Type to List Instances
4. Put the required code like removing other or default content type from list in feature activation and deleting the list in feature deactivation.
5. Create the Entity classes using SPMetal
6. Create your UI in the Visual web parts.


The approach is good but it all depend on your requirement. If your requirement is such that you want business to give the flexibility to be able to add new field, or to modify the view, then this approach is not the correct one for you. In most of the cases, since SharePoint is a system for business, you would like those features to be available for business.


Another issue with this approach is that it takes TOO much time to do a small thing. 


However it would be a perfect solution for a project where the requirements are pretty much stable and business should NOT be able to change things.


Then there is a middle approach, though with the coding approach only, to create list definition with custom list form in the code and deploying them. List definition approach can also utilize site content types and list content types or site columns and list columns. And you may put a custom list form within the project rather then creating a web part or visual web part. 


And then there is No Code approach where you use SPD. You can create your site content type. Though using site content type is probably not a good idea is the requirements keep changing or to be more specific, you see business coming up with new fields or change in field type frequently. So you can create your list columns and either customize the list form or use InfoPath custom forms. If you customize the list forms, you can get the benefits of all JQuery power that you used in MOSS and can do most of the things in client side and have more control on how things will be rendered. However InfoPath form is better if you don't want to go in SPD each time you have a little change or you have a tech-savvy business user who needs to power to be able to change things in UI. However most of the things can be done in both places like validation or RegEx validation and client side rules.

Custom Content Type with Lookup Column and SPMetal in SharePoint 2010

If you have custom content type in your Visual Studio project that you are going to use to create a List and if that Content Type has a Lookup field that points to another custom content type AND if you try to use SPMetal to create entity classes, you get this error:

Error: The given key was not present in the dictionary.

Now Nowhere in Microsoft documentation it even gives you any clue of this. rather, as per the documentation, it should work flawlessly. 

I came across this article from where I got some clues. So, you have to create a custom parameter XML in order to get it to work. I in any case liked this as if you don't use any parameter file, SPMetal creates a very big, complex entity class and most of the thing in there you wont use. Therefore, using parameterize SPMetal is a good idea to keep code simple.

So here is what I did:

<?xml version="1.0" encoding="utf-8"?>

<Web AccessModifier="Internal" xmlns="http://schemas.microsoft.com/SharePoint/2009/spmetal">

<ContentType Name="Facility"></ContentType>

<ContentType Name="IntakeQuestionaire"></ContentType>

<ExcludeOtherContentTypes></ExcludeOtherContentTypes>

</Web>

Check that you have to use the ExcludeOtherContentTypes element in order to get rid of other content type and you get s simpler code.

Though it has bee a few weeks that I did but I also remember that if you dont use this, and if you in same scenerio, you will get entity class with two entity classes, one for content type and one for list that uses same content type and it names like contenttype1 and list1contenttype1. 

So, as best practice you should always use the Exclude elements and use parameter files for SPMetal.