Creating Edit and View Buttons in SharePoint 2013 List View using JS Links

JS Links Intro in SharePoint 2013

  1. Client-side rendering is a new concept in SharePoint 2013. It’s provides you with a mechanism that allow you to use your own output render for a set of controls that are hosted in a SharePoint page (list views, display, add and Edit forms). This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of custom and predefined field types.
  2. JSLink files have the ability to quickly and easily change how a list views and forms are rendered. More specifically how the fields in that list should be displayed.
  3. Note: I wrote those code samples to be easy to understand and to achieve learning purposes, because of that I avoided using complex code and controls. In the same time I tried to present real world examples as much as possible.
Creating Edit and View Buttons in SharePoint 2013 List View
  • First we want to create a list. For eg: I am creating the Employee as a custom List.
  • Fist we want to create two list columns like ItemEdit and ItemView  as Single line of Text we will show in the first two place in the list.
  • We will create html file as ViewEditOptions.html and we will write the code the in the file and we will insert these file in the List view page using the Content Editor Web Part.
  • In the html file we will use the button css as below under the Head section.
<style type="text/css">
        input.secondaryButton, input.secondaryButton:hover {
            min-width: 6em;
            padding: 7px 10px;
            border-top: 1px solid #666666;
            border-left: 1px solid #666666;
            background-color: #666666;
            margin-left: 10px;
            font-size: 13px;
            color: #ffffff;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.7);
        }
    </style>
1. Under script in the html file we will define the code for to create the View and Edit buttons for the list view.
2. Below script we will use to create the buttons 
<script>
"use strict";

jQuery(document).ready(function () {
    jQuery(":button").addClass('secondaryButton');
});

(function () {
    var fieldJsLinkOverride = {};
    fieldJsLinkOverride.Templates = {};
    fieldJsLinkOverride.Templates.Fields =
    {
        'ItemView': { 'View': GetPriorityFieldIconView },
        'ItemEdit': { 'View': GetPriorityFieldIconEdit }
    };

    // Register the rendering template
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);

})();



function GetPriorityFieldIconView(clientContext) {

    var itemId = clientContext.CurrentItem.ID;//to Get current Item Id
    var viewButtonhtml = '<input type="button" id="btnItemView" value="View" style="cursor: pointer;margin-left:0px" onclick=\'EmployeeItemView(' + itemId + ');\'/> '//To bind the button
    return viewButtonhtml;
}

function GetPriorityFieldIconEdit(clientContext) {

    var itemId = clientContext.CurrentItem.ID;//to Get current Item Id
    var viewButtonhtml ='<input type="button" id="btnItemView" value="Edit" style="cursor: pointer;" onclick=\'EmployeeItemEdit(' + itemId + ');\'/>' //To bind the button
    return viewButtonhtml;
}

function EmployeeItemView(returnValue) {
    var link = _spPageContextInfo.webAbsoluteUrl + "/Lists/Employee/DispForm.aspx?ID=" + returnValue; //Current list item Display Form URL
    window.open(link, '_self');
}

function EmployeeItemEdit(returnValue) {
    var link = _spPageContextInfo.webAbsoluteUrl + "/Lists/Employee/EditForm.aspx?ID=" + returnValue; //Current list item Edit Form URL
    window.open(link, '_self');
}
</script>

3. Save the file with EmployeeEditView.html and upload it to any of the libraries like Site Assest/ Document Library.
4. Go to Employee list Default and edit the page insert the Content Editor Web Part and Add the html file url from the Uploaded file from the Library.
5. Finally below are the output  for the solution.



I Hope the code will help you... :) 

Happy Coding....Sharing is caring .... Keep Smiling...

Comments

Post a Comment

Popular posts from this blog

SharePoint 2013 Keyword Query (KQL) Content Class Property Restrictions

Using property restrictions in your KQL queries, you can restrict your search to only pull back certain things like calendar events for instance. This is a very powerful way to limit search results  and get exactly what you are looking for. You can use these in your query like this: " lunch contentclass:STS_ListItem_Events " This will return only calendar events with the word "lunch" in them.  Pretty powerful and pretty simple. Here is a list of available content class items: STS_Site –  Site Collection STS_Web  –  Site (Web) STS_List_850  –  Page Library STS_ListItem_850  –  Page STS_List_DocumentLibrary  –  Document Library STS_ListItem_DocumentLibrary  –  Document Library Items STS_List  –  Custom List STS_ListItem  –  Custom List Item STS_List_Links  –  Links List STS_ListItem_Links  –  Links List Item STS_List_Tasks  –  Tasks List STS_ListItem_Tasks  –  Tasks List Item STS_List_Events  –  Events List STS_ListItem_Events 
Read more

Filtering the Sharepoint List Taxonomy Column using Rest API

I ran into a strange issue today when using the SharePoint 2013 REST API for Lists with Managed Metadata columns    but I just had a ‘clever workaround’ moment with SharePoint’s oData/REST implementation when it comes to filtering list items based on taxonomy (managed metadata) columns. Now I do not consider myself a developer, so this article is probably a little verbose for some readers, but should be helpful to power users or IT pros. 1. To filter the Taxonomy columns in SharePoint list using Rest API call we need to use the Post method. 2. The Rest API call will give errors some times when the Rest API Query string crosses limit 260 characters that time we will use the Query in the body. Those things are clearly explained in the below example clearly. 3. WE can use the CAMEL Query in the Rest API call this example come under that. < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script > < script > $(do
Read more

SharePoint CSOM to Create Folders and Sub Folders based on Excel Data

Contents: 1. Reading data from the Excel sheet. 2. Connecting to SharePoint Online Site & Checking the SharePoint list is available or not. 3. Creating the SharePoint Library Folders and Sub Folders. 4. Conclusion. 1. Reading data from the Excel sheet: a. Open Visual Studio, Select New Project Creation and Select C# Console application and provide the appropriate Solution name. b. First add the required references like below.     I . using Microsoft.SharePoint.Client;     II. using System.Configuration; (Used to read the data from the App.config file)     III. using Microsoft.Office.Interop.Excel; (Excel supported file reference)     Note: If above references and not able to add please install the references from the NuGet Package  Manager Console. To Read the values from the App.config file use the below  and declare all the fields globally for re-usability.                 public   static   string  userName = ConfigurationManager.AppSettings[ "Username&qu
Read more