Monday, November 4, 2013

Customize a list view by using client-side rendering in SharePoint 2013

http://msdn.microsoft.com/en-us/library/jj220045.aspx
http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
http://msdn.microsoft.com/en-us/library/jj220061.aspx
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "CSRListViewApp"
Click on 'Validate' Button 
Click on 'Finish' Button.
 CSRListViewApp -> Right Click -> Add -> New Item -> List -> "CustomList"
CSRListViewApp -> CustomList -> CustomListInstance -> Elements.xml
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <ListInstance Title="CustomList"
                             OnQuickLaunch="TRUE"
                             TemplateType="10057"
                             Url="Lists/CustomList"
                             Description="My List Instance">
              <Data>
                     <Rows>
                           <Row>
                                  <Field Name="Title">List Item Title 1</Field>
                                  <Field Name="Body">List Item Body</Field>
                           </Row>
                           <Row>
                                  <Field Name="Title">List Item Title 2</Field>
                                  <Field Name="Body">List Item Body</Field>
                           </Row>
                           <Row>
                                  <Field Name="Title">List Item Title 3</Field>
                                  <Field Name="Body">List Item Body</Field>
                           </Row>
                           <Row>
                                  <Field Name="Title">List Item Title 4</Field>
                                  <Field Name="Body">List Item Body</Field>
                           </Row>
                           <Row>
                                  <Field Name="Title">List Item Title 5</Field>
                                  <Field Name="Body">List Item Body</Field>
                           </Row>
                     </Rows>
              </Data>
       </ListInstance>
</Elements> 
CSRListViewApp -> CustomList -> Elements.xml
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <ListTemplate
        Name="CustomList"
        Type="10057"
        BaseType="0"
        OnQuickLaunch="TRUE"
        SecurityBits="11"
        Sequence="320"
        DisplayName="CustomList"
        Description="My List Definition"
        Image="/_layouts/15/images/itann.png"/>

</Elements>
CSRListViewApp -> CustomList -> Schema.xml
add below script before "</Views>" tag and after "<View>"
<View BaseViewID="2"
                       Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb"
                       DisplayName="Overridable"
                       Type="HTML"
                       WebPartZoneID="Main"
                       SetupPath="pages\viewpage.aspx"
                       Url="Overridable.aspx"
                       DefaultView="TRUE">
                     <ViewFields>
                           <FieldRef Name="Title" />
                     </ViewFields>
                     <Query />
                     <Toolbar Type="Standard" />
                     <XslLink>main.xsl</XslLink>
                     <JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>
              </View>
CSRListViewApp -> Scripts-> Add new "CSRListView.js"
and add below the custom js code for CSRListViewApp
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" + "<hr><ul id='unorderedlist'>";

    overrideCtx.Templates.Item = customItem;
    overrideCtx.Templates.Footer = "</ul>";

    overrideCtx.BaseViewID = 2;
    overrideCtx.ListTemplateType = 10057;

    overrideCtx.OnPreRender = preRenderHandler;
    overrideCtx.OnPostRender = postRenderHandler;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function customItem(ctx) {

    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
    return ret;
}

function preRenderHandler(ctx) {

    ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
}

function postRenderHandler(ctx) {

    var ulObj;
    var i, j;

    ulObj = document.getElementById("unorderedlist");

    for (i = 1; i < ulObj.children.length; i++) {
        var x = ulObj.children[i];
        for (j = 1; j < ulObj.children.length; j++) {
            var y = ulObj.children[j];
            if (x.innerText < y.innerText) {
                ulObj.insertBefore(y, x);
            }
        }
    }
}
 CSRListViewApp -> double click on 'AppManifest.xml'
change the start page url as "CSRListViewApp/Lists/CustomList/Overridable.aspx"
CSRListViewApp -> Right Click -> Deploy 
Thank You

No comments:

Post a Comment

Featured Post

SharePoint Edit Control Block (ECB) menu or Custom Action Menu In ListItem and Site

 SharePoint Edit Control Block (ECB) menu or Custom Action Menu In ListItem and Site: < script   language = "javascript"   type...

Popular posts