SharePoint forms styling

CodeProject

In my previous entry I demonstrated how to customize SharePoint forms with Forms Designer tool. Now I would like to show how to customize the views of forms by CSS-styles in the Forms Designer.

I changed my SharePoint web site theme into one of the standard named 'Grapello'. Now my HelpDesk has the following view:

Now I want to change the view of my forms customized with Forms Designer. Since these forms use JQuery UI library I went to http://jqueryui.com/themeroller/ to find an appropriate theme. 'Eggplant' fits a lot to my SharePoint theme. You can also define your own theme with easy-to-use ThemeRoller interface:

In the Download Builder dialog box I selected all items in 'UI Core' group and 'Button' and 'Tabs' items in 'Widgets' group. All other items were unchecked. After downloading was completed I copied all content from file css/[theme]/jquery-ui-[version].custom.min.css in the downloaded archive and pasted it into Forms Designer CSS-editor:

Now request form acquired the following view:

I found two problems:

1. The 'Select' elements in the field Date and Time became very small.
2. The borders of controls were not changed.

To fix the first issue I removed selector .ui-widget select from CSS. For the second, I added the following CSS-code:

.fd_control input[type="text"],  
.fd_control textarea,  
.fd_control select, 
#fd_form .ms-dtinput input[type="text"],  
#fd_form .ms-dttimeinput input[type="text"], 
#fd_form .ms-inputuserfield, 
#fd_form .ms-rtefield,  
#fd_form .ms-rtefield2,  
#fd_form .ms-longfileinput,  
#fd_form .ms-fileinput 
{ 
    border: 1px solid #903CD6; 
}

The result is here:

Summing up, I want to say that it is very easy to define your own style for Forms Designer view with JQuery UI Theme Roller utility. Alternatively you can choose one of the existing themes. But it is important to check your form after applying a new theme because there may occur some visual problems that will have to be fixed with quick modifications of CSS.

How to create dynamic forms with Forms Designer in SharePoint 2010

CodeProject

In the first post I would like to show a simple case of customization SharePoint 2010 forms with Forms Designer tool. I will create form with tabs and tables and add basic dynamic with JavaScript.

Last week I worked on Help Desk system. I started with template 'Help Desk' from CodePlex project and implement some modifications. Next I needed to design forms for requests to make it simpler and more usable. The default form has the following view:

There are many fields, some of which user doesn't have to define himself, for ex.: Resolution Type, Resolution Date etc, cause they have to be filled by the person assigned to the request. And some should be predefined automatically in most cases, for ex.: if author and customer are the same person Customer field has to be filled with current user value. Also, it would be great to organize fields in categories: Main (required info), Resolution and Links.

So, I decided to distribute fields into tabs with Forms Designer tool, add autofilling to Customer field with current user and hide resolution fields if status of the request is not 'Resolved' or 'Closed'. For the last two tasks I used Forms Designer JavaScript framework that allows to manipulate fields in JQuery manner.

After 5 minutes of manipulation with Forms Designer's drag-n-drop interface I got the following form:

Looks nice. Now we can further simplify this form:

1. Resolution tab is useful only if status of the request is 'Resolved' or 'Closed'. So, I will hide it for other cases.
2. In most cases customer and author are the same person. So, I will prefill this field with current user info.

Resolution tab

In the Forms Designer I opened JS-editor window and put the following code to disable 'Resolution' tab when Status field equals 'Close' or 'Resolved':

// Enable or disable 'Resolution' tab 
function setResolutionTab() { 
    var v = fd.field('Status').control().value(); 
    if (v == 'Closed' || v == 'Resolved') { 
        $('#fd_tabcontrol-0').tabs('option', 'disabled', null); // Enable 
    } else { 
        $('#fd_tabcontrol-0').tabs('option', 'disabled', [1]); // Disable 
    } 
} 

// Subscribe on status change 
fd.field('Status').control().change(function () { 
    setResolutionTab(); 
}); 

// Initialize 
setResolutionTab(); 

To hide disabled tabs I added following CSS directly to the Forms Designer:

.ui-tabs .ui-state-disabled {  
    display: none; /* disabled tabs don't show up */  
}

Great. Now when user sets status to 'Initiated' or 'In progress' they see only two tabs:

Autofilling

I added this function only on a new form. The following code loads the current user login and pass it into the Customer field:

// Load current user login 
SP.SOD.executeOrDelayUntilScriptLoaded((function () { 
    var ctx = new SP.ClientContext.get_current(); 
    var web = ctx.get_web(); 
    ctx.load(web); 
    var user = web.get_currentUser(); 
    user.retrieve(); 
    ctx.executeQueryAsync( 
    function () { 
      // Set user login 
      fd.field('Customer').control().value(user.get_loginName()); 
      // Run validation by emulating validation image click
      fd.field('Customer').control()._el().find('a:eq(0)').click(); 
    }); 
}), "SP.js"); 

Method _el() of the FDControl class returns control's div-wrapper as JQuery-object. So, if you work with custom fields and the Forms Designer doesn't know where the field stores its value, you may use this method. And here it was also helpful to click on the validation link in the people picker field.

I can answer your questions in the comments. Thank you.