SharePoint Designer created custom display forms do not display attachments

Custom display forms do not display attachments in sharepoint designer 2010

Recently i came accross an issue that if you are creating a custom display form using Designer than it does not display the attachment controls thus it does not shows the attachments in that form.


After some google i came accross the solution that the attachment <tr> tag is not present in the custom form so u have to add it manullay

Below is the code just edit your display form and add this after the last <tr>

<tr>

                                                                                                <td width="190px" valign="top" class="ms-formlabel">

                                                                                                                <H3 class="ms-standardheader">

                                                                                                                                <nobr>Attachments</nobr>

                                                                                                                </H3>

                                                                                                </td>

                                                                                                <td width="400px" valign="top" class="ms-formbody">

                                                                                                                <SharePoint:AttachmentsField ControlMode="Display" FieldName="Attachments" runat="server" Visible="true"/>

                                                                                                </td>

</tr>



You can also refer solution from Microsoft support site:



http://support.microsoft.com/kb/2590041



Thanks!

Jquery for Tabbed Navigation in Sharepoint Custom List forms

Jquery Tabs for sharepoint custom list form:

This post is to divide custom list form in to jquery tabs.

Using this tab navigation we can also reduce veritcal scrol and also achieve our business functionality.

It is a OOB approach without Infopath and object model

Below are the steps:

1.       Download Jquery from Jquery.com

2.       Add this to Sharepoint All files Folder or Site Assets.

3.       Create you list

4.       Open this list in sharepoint Designer and Create new Custom Form (Newform.aspx)

5.       Add the Following Tab code in your Custom form

<div id="tabs">

    <ul>

        <li><a href="#tabs-1">Personal</a></li>

        <li><a href="#tabs-2">Contact</a></li>

        <li><a href="#tabs-3">Office</a></li>

        <li><a href="#tabs-4">New Hire</a></li>

       

              </ul>

    <div id="tabs-1">

                   <table border="0" cellspacing="0" width="100%">

                   </table>

              </div>

    <div id="tabs-2">

                   <table border="0" cellspacing="0" width="100%">

                   </table>

              </div>

    <div id="tabs-3">

                   <table border="0" cellspacing="0" width="100%">

                   </table>

              </div>

</div>

6.       Cut the Column <Tr> from you list and paste under tabs table.

7.       Save this form and preview in browser

8.       Edit this page after clicking page tab

9.       And add two HTML form web parts on that page

10.       Edit first html web part properties and click source editor button, it will open a window copy and paste the jquery and CSS reference in this window.

In my case I have added this jquery folder to Site Assets.

<link type="text/css" href="SiteUrl/SiteAssets/jquery-ui-1.8.18.custom/css/redmond/jquery-ui-1.8.18.custom.css" rel="stylesheet" />    

<script type="text/javascript" src=" SiteUrl /SiteAssets/jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src=" SiteUrl /SiteAssets/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript">

            $(function(){

                // Tabs

                $('#tabs').tabs();   

            });

</script>

Note- You can also add this script below your Head tad in Master page if you can access Master page

11.       Save the page and Stop editing your Tabs are ready nowJ

12. Final view would be like this:

Columns are divided in to Jquey tabs you can also change the look and feel of list form

The above approach is full OOB and Client side no server hit on clicking tabs(As in case of infopath on every clik there is a post bak occurs )

Thanks!

Javascript validation of people picker control in sharepoint 2010

This post is to get the People Picker contol value or

to validate the People picker using javascript or

you can use this code to compare the current user name with PP(Refer my post 'ECMA Script to Get Current User Name in sharepoint list form')

Steps:

1. Just Add a content editor webpart in you list form(NewForm.aspx or EditForm.aspx) and put the script below:

To add CWEP to you list form you can refer Link

2. Add your 'Control UserField_upLevelDiv ID'(Using View Source you can get upLevelDiv  id of that contol)

<script type="text/javascript">
function getPickerInputElement(identifier)
   {   
      var tags = document.getElementsByTagName('DIV');   
      for (var i=0; i < tags.length; i++)
      {       
       var tempString = tags[i].id;           
       if ((tempString.indexOf('UserField_upLevelDiv') > 0))
    {   
        if(identifier == tempString)
       { 
       var innerSpans = tags[i].getElementsByTagName("SPAN");     
         for(var j=0; j < innerSpans.length; j++)
          {   
           if(innerSpans[j].id == 'content')
             {   
              return innerSpans[j].innerHTML; 
             } 
          }   
       }     
       }   
      }   
      return null;   
   }

var PickerPerson = getPickerInputElement('Control UserField_upLevelDiv ID'); 
alert(PickerPerson);

// For Validation 
   if(PickerPerson == null)
    {
     alert('Please enter PP value.');
     return false;
    }

</script>

Done!

Javascript to Get Current user name in People Picker of sharepoint list form

If you want to current user name in the people picker of sharepoint list form

Here is a simple javascipt to get your current user in your sharepoint people picker control

Steps:

1. Just add content editor webpart.Refer How to add CEWP
2. Copy below script and paste in the HTML of your CEWP
3. Change picker number based on your list form.Picker Number is the number of your People Picker control from the top.If only one PP is there than Picker Number is always 1

<script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(GetUserLoginName, "sp.js");

    function GetUserLoginName() {
        context = new SP.ClientContext.get_current();
        web = context.get_web();
        this._currentUser = web.get_currentUser();
        context.load(this._currentUser);
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod),
            Function.createDelegate(this, this.onFailureMethod));
    }

    function onSuccessMethod(sender, args) {
        alert('Name:' + this._currentUser.get_title() + '\n Login:' + this._currentUser.get_loginName());
        AddCurrentUserToPP(this._currentUser.get_title());
    }

    function onFaiureMethod(sender, args) {
        alert('request failed' + args.get_message() + '\n' + args.get_stackTrace());
    }


    function AddCurrentUserToPP(LoginName) {
        var pickerNo = 1;
        // Change pickerNo based on your list form if there are 3 PP in your form and you want the current user in 3rd one than pickerNo value will be 3

        var pp = getPickerImputElement(pickerNo);
        if (pp != null) {
            pp.innerHTML = LoginName;
        }
    }

    function getPickerImputElement(pickerNo) {
        var result = '';
        var divs = document.getElementsByTagName('DIV');
        var j = 0;
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].id.indexOf('UserField_upLevelDiv') > 0) {
                j++;
                if (j == pickerNo) {
                    result = divs[i];
                    break;
                }
            }
        }
        return result;
    }
</script>

Note: This is only usefull if you want Current user in one PP only...:(

Javascript to Random Number in sharepoint list form

In some cases there is a requirement of generation of random/unique number in your custom list form.

Best way to achieve is just use javascript date time format to generate unique number.

Here is sample javascript to achieve this:

Just add a content editor webpart on your custom list form and put below script.
On page load it will generate a random number on your desired column in which u want that id.

<script tpye="text/javascript">

var d = new Date();
var y = d.getFullYear().toString();
y1= y.charAt(2);
y2=y.charAt(3);
var m = (d.getMonth()+1).toString();
if(m.length==1)
{
m = "0"+m;
}
var day = d.getDate().toString();
if(day.length==1)
{
day = "0"+day;
}
var h = d.getHours().toString();
if(h.length==1)
{
h = "0"+h;
}
var min = d.getMinutes().toString();
if(min.length==1)
{
min = "0"+min;
}
var sec = d.getSeconds().toString();
if(sec.length==1)
{
sec = "0"+sec;
}
var msec = d.getMilliseconds();
if(msec.length==1)
{
msec = "0"+msec;
}
var RandomNumber= "DEP-"+y1+y2+m+day+h+min+sec;

document.getElementById("Enter your control ID").value=RandomNumber;

</script>

ECMA Script to Get Current User Name in sharepoint list form

ECMA Script to Get Current User Name in sharepoint list Custom  form
Steps:

1. Just Add a content editor webpart in you list form(NewForm.aspx or EditForm.aspx) and put the script below:
2. Add your control id(Using View Source you can get id of that contol)
<script type="text/javascript">

var context = null;
var web = null;
var currentUser = null;
ExecuteOrDelayUntilScriptLoaded(GetUserLoginName, "sp.js");
function GetUserLoginName() {
context = new SP.ClientContext.get_current();
web = context.get_web();
this._currentUser = web.get_currentUser();
context.load(this._currentUser);
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod),
Function.createDelegate(this, this.onFailureMethod));
}
function onSuccessMethod(sender, args) {
alert(' Name:' + this._currentUser.get_title() + '\n Login:' + this._currentUser.get_loginName());
var user=this._currentUser.get_title();
document.getElementById("Control Id").value=user;
}
function onFaiureMethod(sender, args) {
alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}</script>


Done!

ECMAScript to Generate Sequential Number on list form

If you want to generate a sequential number in a text box of list form on page load, you can achieve this by simply adding a ECMAScript on the list form using content editor webpart.

Below is the code:

Points to Remember: 
1. Replace ColumnInternalName with the internal name of your column where you want the auto generated number.
2. YourLISTID is id of your list
3. Column Id  is id of you column get using View Source
4.  It will Generate number like Dep-1 ,Dep-2 ,Dep-3, Dep-4, Dep-5......etc
You can change dep to any string

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(Start, "sp.js");

var context = null;
var web = null;
var MaxID;
var FDN;

function Start()
{
context = new SP.ClientContext.get_current();
web = context.get_web();
context.load(web);
var list = web.get_lists().getById("YourLISTID");
context .load(list);
var camlQuery = new SP.CamlQuery();
Ascending="FALSE" /></OrderBy></Query><RowLimit>1</RowLimit></View>';
var str='<View><Query<OrderBy><FieldRef Name="ColumnInternalName" Ascending="FALSE" /></OrderBy></Query><RowLimit>1</RowLimit></View>';
camlQuery.set_viewXml(str);
allItems = list.getItems(camlQuery);
context.load(allItems, 'Include(ColumnInternalName)');
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod),Function.createDelegate(this, this.onFailureMethod));
 }
function onSuccessMethod(sender, args)
{
var ListEnumerator = this.allItems.getEnumerator();
while(ListEnumerator.moveNext())
{
var currentItem = ListEnumerator.get_current();
MaxID=currentItem.get_item('ColumnInternalName');
}
 if( MaxID==null)
{
MaxID=1;
var MyData="Dep-" + MaxID;
document.getElementById("Column Id ").value=MyData;
}
else
{
var strId=MaxID.split("-");
var data1=parseInt(strId[1])+1;
var data="Dep-" + data1;
document.getElementById("Column Id").value=data;
}
}
function onFailureMethod(sender, args)
{
alert("Hi2");
}</script>

You are Done!