Friday, March 2, 2012

Article 3: Customize user interface on Sharepoint List use Ecmascript to query data


Ø  Step1: Create new List name is ECMASCRIPTFearture include Fields:
Ø  Step 2: Open Sharepoint Designer 2010 (SPD) | Open List ECMASCRIPTFearture | Open Form NewForm.aspx and Design User Interface below, then copy to SPD
Ø  Code Html:
      <center>
                <table style="width: 60%" border="1">
                                <tr>
                                                <td>SingleLineOfText</td>
                                                <td><input name="SingleLinesText" type="text" id="txtSingleLinesText"/>&nbsp;</td>
                                                <td>MultipleLinesOfText</td>
                                                <td><input name="MultipleLinesOfText " type="text" id="txtMultipleLinesOfText"/>&nbsp;</td>
                                </tr>
                                <tr>
                                                <td>Choice </td>
                                                <td><select><option selected="selected" value="Male">Male</option>
                                                                                                <option value="Female">Female</option>
                                                                </select>
                                                </td>
                                                <td>Number</td>
                                                <td><input name="Number" type="text" id="txtNumber"/></td>
                                </tr>
                                <tr>
                                                <td>Currency</td>
                                                <td><input name="Number" type="text" id="txtNumber"/></td>
                                                <td>DateAndTime</td>
                                                <td><input name="DateAndTime" type="text" id="txtDateAndTime"/></td>
                                </tr>
                                <tr>
                                                <td>Lookup</td>
                                                <td>     
                                                                <select id="ddlLookup">
                                                                                <option value="1">H&#224; Nội</option>
                                                                                <option value="2">Hồ Ch&#237; Minh</option>
                                                                </select>
                                                </td>
                                                <td>YesNo</td>
                                                <td><input type="checkbox" checked="checked" id="chkYesNo"/></td>
                                </tr>
                                <tr>
                                                <td>HyperLinkOrPicture</td>
                                                <td><input name="HyperLinkOrPicture" type="text" id="txtHyperLinkOrPicture"/></td>
                                                <td><input type="button" id="btnSave" value="Save" style="width:100px"/></td>
                                                <td><input type="button" id="btnCancel" value="Cancel" style="width:100px"/></td>
                                </tr>
                </table>
 </center>

Ø Step 3: User Interface below is right
Ø  Step 4: Copy code below under code html
<script type="text/javascript" src="../../JqueryLibrary/jquery-1.4.2.js"></script>
<script type="text/javascript">
$("#btnSave").click(function(){
                CreateListItem();            
});
function CreateListItem() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('ECMASCRIPTFearture');       
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    //My New Item! is "txtSingleLinesText"
    //You can write oListItem.set_item('Title', $("#txtSingleLinesText").val()');
    oListItem.set_item('Title', 'My New Item!'); 
    //Similar other Fields using Jquery to Get value then assign to method set_item
    oListItem.set_item('MultipleLinesOfText', 'Hello World!');
    oListItem.set_item('Choice', 'Female');
    oListItem.set_item('Number', 1);
    oListItem.set_item('Currency', 100);
    oListItem.set_item('DateAndTime', '2011/10/10');
    oListItem.set_item('Lookup', 1);
    oListItem.set_item('YesNo', true);
    oListItem.set_item('PersonalOrGroup', 34);//Value of PersonalOrGroup require number (develop to find)
    oListItem.set_item('HyperLinkOrPicture', 'http://google.com');      
    oListItem.update();
    clientContext.load(oListItem);       
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Ø  Step 5: Now you can Add New Item remember don’t input data into control and click button Save
Ø  All code in Sharepoint Designer

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"   Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full"  %>
……………………………
……………………………
……………………………
</WebPart>
</WebPartPages:ListFormWebPart>
</ZoneTemplate></WebPartPages:WebPartZone>
                 <img src="/_layouts/images/blank.gif" width='590' height='1' alt="" />
                  </td>
                 </tr>
                </table>
<center>
                <table style="width: 60%" border="1">
                                <tr>
                                                <td>SingleLineOfText</td>
                                                <td><input name="SingleLinesText" type="text" id="txtSingleLinesText"/>&nbsp;</td>
                                                <td>MultipleLinesOfText</td>
                                                <td><input name="MultipleLinesOfText " type="text" id="txtMultipleLinesOfText"/>&nbsp;</td>
                                </tr>
                                <tr>
                                                <td>Choice </td>
                                                <td><select><option selected="selected" value="Male">Male</option>
                                                                                                <option value="Female">Female</option>
                                                                </select>
                                                </td>
                                                <td>Number</td>
                                                <td><input name="Number" type="text" id="txtNumber"/></td>
                                </tr>
                                <tr>
                                                <td>Currency</td>
                                                <td><input name="Number" type="text" id="txtNumber"/></td>
                                                <td>DateAndTime</td>
                                                <td><input name="DateAndTime" type="text" id="txtDateAndTime"/></td>
                                </tr>
                                <tr>
                                                <td>Lookup</td>
                                                <td>     
                                                                <select id="ddlLookup">
                                                                                <option value="1">H&#224; Nội</option>
                                                                                <option value="2">Hồ Ch&#237; Minh</option>
                                                                </select>
                                                </td>
                                                <td>YesNo</td>
                                                <td><input type="checkbox" checked="checked" id="chkYesNo"/></td>
                                </tr>
                                <tr>
                                                <td>HyperLinkOrPicture</td>
                                                <td><input name="HyperLinkOrPicture" type="text" id="txtHyperLinkOrPicture"/></td>
                                                <td><input type="button" id="btnSave" value="Save" style="width:100px"/></td>
                                                <td><input type="button" id="btnCancel" value="Cancel" style="width:100px"/></td>
                                </tr>
                </table>
</center>
<script type="text/javascript" src="../../JqueryLibrary/jquery-1.4.2.js"></script>
<script type="text/javascript">
$("#btnSave").click(function(){
                CreateListItem();            
});
function CreateListItem() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('ECMASCRIPTFearture');       
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    //My New Item! is "txtSingleLinesText"
    //You can write oListItem.set_item('Title', $("#txtSingleLinesText").val()');
    oListItem.set_item('Title', 'My New Item!'); 
    //Similar other Fields using Jquery to Get value then assign to method set_item
    oListItem.set_item('MultipleLinesOfText', 'Hello World!');
    oListItem.set_item('Choice', 'Female');
    oListItem.set_item('Number', 1);
    oListItem.set_item('Currency', 100);
    oListItem.set_item('DateAndTime', '2011/10/10');
    oListItem.set_item('Lookup', 1);
    oListItem.set_item('YesNo', true);
    oListItem.set_item('PersonalOrGroup', 34);//Value of PersonalOrGroup require number (develop to find)
    oListItem.set_item('HyperLinkOrPicture', 'http://google.com');      
    oListItem.update();
    clientContext.load(oListItem);       
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>             
<SharePoint:UIVersionedContent UIVersion="4" runat="server">
                <ContentTemplate>
                </div>
                </ContentTemplate>
</SharePoint:UIVersionedContent>
……………………………
……………………………
……………………………
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaSeparator" runat="server"/>
Ø  Step 5: Finish

0 comments:

Post a Comment