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