dinsdag 21 februari 2012

Give Custom Save button with Sharepoint Layout and Redirection

People are adding custom controls to there sharepoint pages, but the buttons doesn't have 
the same look and feel as the one Sharepoints generates itselfs. 
But I wouldn't be a developer to give you a solution with gives you your buttons the same
look and feel as the Sharepoint buttons. 

To get this, you must not add a HTML Button element, but a Input element of the type button.
For giving it the same look and feel of Sharepoint Buttons you have to 
add a Sharepoint CSS class named "ms-ButtonHeightWidth"

In the example below you have a Button that you can use instead of the generated Save button 
and that redirects your page after saving your content to an other location 
than the standard view of your list in Sharepoint.
For the redirection you have to add some code that generates an event after a succesfull SaveAction.
 



<input type="button" value="Save" name="SaveButton" class="ms-ButtonHeightWidth" onclick="if (!PreSaveAction()) return false;{ddwrt:GenFireServerEvent('__commit;__redirect={<<SITE URL TO REDIRECT>>};')}" />
 

dinsdag 14 februari 2012

How to duplicate / Copy a Sharepoint List Item


One of the questions I have received last week was the next one : 
"Is it possible to duplicate an existing Sharepoint List Item and change some fields before saving it"
Answer after some research... Yes it is... but there is no OOB solution available in Sharepoint. 
Little bit supprised that the functionality doesn't exist in Sharepoint. 
But not supprised completely because of the different tools I already worked with, 
non of them had an answer OOB to that question! 
Every time it had to be additional developed. But good news for the non-developers.
You can use javascript and some handy tricks to give an answer to that question. 

So what do you have to do...
- First of all create a new Edit Form on your list. 
- Secondly add on the bottom of your page add a Display Form, 
  change the parameter "ID" of the datasource of your added Display Form to "DID".
  This will allow you to add in the Edit URL the parameter &DID=xxxxx 
  whitch xxxxx containing the number of the record you want to duplicate
  
  Also what i did was putting only the to-copied fields in a table that's containg only 
  the fields in DIV tags 
  example:

  <table name='my_Copy_records' style='visibility:hidden'><tr><td>
  <DIV ID="RECORD1"><xsl:value-of select'@SHAREPOINT_TITLE_FIELD_REFERENCE' /></DIV>
  <DIV ID="RECORD2"><xsl:value-of select'@SHAREPOINT_PEOPLEPICKER_FIELD_REFERENCE' /></DIV>
  <DIV ID="RECORD3"><xsl:value-of select'@SHAREPOINT_DropDownChoice_FIELD_REFERENCE' /></DIV>
  <DIV ID="RECORD4"><xsl:value-of select'@SHAREPOINT_DATE_FIELD_REFERENCE' /></DIV>
  <DIV ID="RECORD5"><xsl:value-of select'@SHAREPOINT_URL_FIELD_REFERENCE' /></DIV>
  <DIV ID="RECORD6"><xsl:value-of select'@SHAREPOINT_BOOLEAN_FIELD_REFERENCE' /></DIV>
  </td></tr></table>
 

- And as last part you need to add an Content Editor Web Part as last part and add next Javascript in it...
Only one function has to be changed to let the copy function... 
You need to change the fillAllDefaultValues function and put there the call's 
you need to have to do for your form.
Also you need one time to look in your source code of your page in a browser 
to search for all the needed id's that 
Sharepoint has generated for you.
In the script you will need to change the [SP_ID] text to your ID's that you have found 
in the source code.


 <![CDATA[<script type="text/javascript">

    _spBodyOnLoadFunctionNames.push('fillAllDefaultValues()');
 function getTagFromIdentifier(identifier) {   return document.getElementById(identifier);          }

 function getTagFromIdentifierAndTitle(tagName, identifier, myid)
    {
  var len = identifier.length;
        var tags = document.getElementsByTagName(tagName);
        for (var i=0; i< tags.length; i++)
        {
            var tempString = tags[i].id;
            if( (tags[i].id == myid) && ( (identifier == '') || (tempString.indexOf(identifier) == tempString.length - len)) )
            { return tags[i]; }
        }
        return null;
    }                      

    function fillPeoplePicker(myPeoplePicker_ID, myPeoplePicker_Name, newPP_ID)
    {
        var ppf = document.getElementById(newPP_ID);
        var myppfValue = ppf.innerHTML;
        var ibegin = myppfValue.indexOf('">') + 2;
        var myppfValueUpperCase = myppfValue.toUpperCase();
        var myPPValue = myppfValue.substr(ibegin, myppfValueUpperCase.indexOf('</A>', ibegin ) - ibegin);
        var myPeoplePicker_UpperLevel_ID = myPeoplePicker_ID + '_upLevelDiv';
        //var assingedToInput = getTagFromIdentifierAndTitle('div', myPeoplePicker_UpperLevel_ID, 'People Picker');
        var assingedToInput = getTagFromIdentifier(myPeoplePicker_UpperLevel_ID);
        assingedToInput.innerHTML = myPPValue ;
        // refresh and validate picker control
        if(!ValidatePickerControl(myPeoplePicker_ID))
        { ShowValidationError();}
        var arg = getUplevel(myPeoplePicker_ID);
        var ctx = myPeoplePicker_ID;
        EntityEditorSetWaitCursor(ctx);
        WebForm_DoCallback(myPeoplePicker_Name,arg,EntityEditorHandleCheckNameResult,ctx,EntityEditorHandleCheckNameError,true);
    }

    function fillInputField(SPFF_ID, newTF_ID)
    {
        var sptf = document.getElementById(newTF_ID);
        var spff = document.getElementById(SPFF_ID);
        spff.value = sptf.innerHTML;
    }

    function Fill_Lookup_Select_FromFieldName(fieldName, newTF_ID, type)
    {
        var value = document.getElementById(newTF_ID).innerHTML;
        if (value == undefined) return;
        var theSelect = getTagFromIdentifierAndTitle("select", type,fieldName);
        // if theSelect is null, it means that the target list has more than
        // 20 items, and the Lookup is being rendered with an input element
        if (theSelect == null) {
                    var theInput = getTagFromIdentifierAndTitle("input","",fieldName);
                    ShowDropdown(theInput.id); //this function is provided by SharePoint
                    var opt=document.getElementById(theInput.opt);
                    setSelectedOption(opt, value);
                    OptLoseFocus(opt); //this function is provided by SharePoint
       } else {
                    setSelectedOption(theSelect, value);
       }
    }
 
    function setSelectedOption(select, value) {
        var opts = select.options;
        var l = opts.length;
        if (select == null) return;
        for (var i=0; i < l; i++) {
            if (opts[i].value == value) {
                select.selectedIndex = i;
                return true;
            }
        }          
        return false;
    }
 
    function fillHyperlinkField(SPFFUrl_ID, SPFFDesc_ID, newTF_ID)
    {
        var sptf = document.getElementById(newTF_ID);
        var spffurl = document.getElementById(SPFFUrl_ID);
        var spffdesc = document.getElementById(SPFFDesc_ID);
        var mySplitResult = sptf.innerHTML.split(", ");
        if(mySplitResult.length > 1)
        {
                    spffurl.value = mySplitResult[0];
                    spffdesc.value = mySplitResult[1];
        }
        else
        {          
                    spffurl.value = mySplitResult[0];
        }
    }          

    function fillCheckboxField(SPFF_ID, newTF_ID)
    {
        var sptf = document.getElementById(newTF_ID);
        var spff = document.getElementById(SPFF_ID);
        if (sptf.innerHTML.toUpperCase()=="TRUE"||sptf.innerHTML=="1"){
   spff.checked=true;
  }
        if (sptf.innerHTML.toUpperCase()=="FALSE"||sptf.innerHTML=="0"){
            spff.checked=false;
        }
    }
                                   
    // only change this function...
    function fillAllDefaultValues()
    {          
        // Pre-populate Title or other Text Fields
                    fillInputField("[SP_ID_TextField]","RECORD1");
  // Pre-populate peoplepicker field
     fillPeoplePicker("[SP_ID_UserField]","[SP_NAME_UserField]", "RECORD2");
        
        // Pre-populate Lookup/Select Field
                    Fill_Lookup_Select_FromFieldName("[SP_ID_DropDownChoice]","RECORD3", 'DropDownChoice');
        // Pre-Populate Date Field
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,1) ==> DD/MM/YYYY
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,2) ==> M/DD/YYYY HH:MM AM/PM
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,3) ==> DD Month YYYY
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,4) ==> HH:MM  
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,5) ==> DD/MM/YY HH:MM
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,7) ==> DD Month YYYY HH:MM
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,12) ==> HH:MM:SS
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,13) ==> DD/MM/YYYY HH:MM:SS
                    // ddwrt:FormatDate(string(<<Date Field>>),2057,15) ==> DD Month YYYY HH:MM:SS
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,1) ==> M/DD/YYYY
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,2) ==> M/DD/YYYY HH:MM AM/PM
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,3) ==> DAY, Month DD, YYYY
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,4) ==> HH:MM AM/PM
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,7) ==> DAY, Month DD, YYYY HH:MM AM/PM
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,13) ==> M/DD/YYYY HH:MM:SS AM/PM
                    // ddwrt:FormatDate(string(<<Date Field>>),1033,15) ==> DAY, Month DD, YYYY YYYY HH:MM:SS AM/PM
                    // fillInputField( ID of Sharepoint Form Text Field, ID of DIV readonly field)
                    fillInputField("[SP_ID_DateTimeField_DateTimeFieldDate]", "RECORD4");
        // Pre-Populate Hyperlink
                    fillHyperlinkField("[SP_IDUrl_FieldUrl]","[SP_ID_UrlFieldDescription]", "RECORD5");
        // Pre-Populate CheckBox
                    fillCheckboxField("[SP_ID_BooleanField]", "RECORD6");

 }
    </script><p>(c)SPCC</p>]]>
 
 

Still missing at this moment...
- fill in Date Time Field
- fill in Multi select Field
- fill in radio button
- ... ????

If you have scripts to do this... don't hesitate to contact me... ;-) 
otherwise... I will create them and post them in an update in a few days...