Introduction

This simple App shows how we can use JavaScript, jQuery and RESTfull in an app to change the ListView UX for SharePoint that manages Links List and reoder the Links using Jquery and SharePoint Client Object Model.

This solution is based on the SharePoint-hosted app template provided by Visual Studio 2012.

The solution uses Link List Template with the Jquery/JavaScript with SharePoint client object model to read, create, update, and delete data from Link list.

This List will display the Link items using Accordion Plug-in http://jqueryui.com/accordion/ to change the ListView UI and Reorder the Links positions without Server Side code.

It was created a Client Web Part to display the Listitem from the "SharePoint-hosted" as accordion without administrative actions.

for more info about this simple app solution can view the following link 

Building the Sample

 

This sample requires the following:

Either of the following:

Installation

Manage Link List

 

Description

This simple example shows how we can create a custom ListView using JS and include Jquery-plugin to interact with SharePoint Client Object Model and RESTfull

 

 

Should be created a Client Web Part where get Data from the SharePoint-hosted List Link and display in the Host SharePoint Site.

C#
Edit|Remove
 var executor; 
 
    try { 
        executor = new SP.RequestExecutor(appweburl); 
 
        executor.executeAsync( 
            { 
                url: appweburl + "/_api/web/lists/getbytitle('reorderLinks')/items?$select=ID,URL,Comments&$orderby=OrderLink", 
                method: "GET", 
                headers: { "Accept""application/json;odata=verbose" }, 
                success: function (data) { 
                    readallData(data); 
                    callAccordion(); 
                     
                }, 
                error: errorHandler 
 
            }); 
 
        var context = new SP.ClientContext(appweburl); 
        var factory = 
            new SP.ProxyWebRequestExecutorFactory( 
                appweburl 
            ); 
        context.set_webRequestExecutorFactory(factory); 
        var web = context.get_web(); 
        var _theList = web.get_lists().getByTitle('reorderLinks'); 
         
        context.load(_theList, 'EffectiveBasePermissions''DefaultNewFormUrl'); 
        context.executeQueryAsync( 
         function () { onPermissionsSuccessMethod(_theList); }, 
         onQueryFailed 
     ); 
 
    } catch (e) { 
        alert(e); 
    }

Source Code Files

Related content