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

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts