Custom Field in SharePoint 2013

Question

I have been entrusted with migrating the existing custom plugin from SharePoint 2010 to 2013. SharePoint 2013 solution should create a custom column for which the data should be fetched from our product (application) using webservice. With 2010, the js file location and the function has been called from fldtypes_xxxx.xml file using the renderpattern. But with 2013, since the UI has changed, I'm not able to link the JS file. Hence I had to use the JSLink property. Referred to the below msdn article and tried the same.

http://msdn.microsoft.com/en-us/library/jj220061%28v=office.15%29.aspx

Now I would like to make a webservice call from the JS file. I need to get the document's information like the listid, itemID and send it to our custom webservice which handles the request which inturn should send a webservice call to our external application and get the data for the appropriate document in sharepoint library.

Please guide me on this.

How to add a call from the below function.

(function () {
    var favoriteColorContext = {};

    favoriteColorContext.Templates = {};
    favoriteColorContext.Templates.Fields = {
        "FavoriteColorField": {
            "View": favoriteColorViewTemplate
        }
    };

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

function favoriteColorViewTemplate(ctx) {
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<span style='background-color : " + color +
        "' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + color;
}

Answer 1

You code above is for rendering field in the view. In this case, you can get these properties in favoriteColorViewTemplate function:

• List ID: ctx.listName or from global variable _spPageContextInfo.pageListId
• Item ID: ctx.CurrentItem.ID

If you will use functions in display or edit forms, these properties are a little bit different:

• List ID: ctx.FormContext.listAttributes.Id or _spPageContextInfo.pageListId
• Item ID: renderCtx.FormContext.itemAttributes.Id

Probably, the easiest way to call you custom web service is to use JQuery $.ajax(...) call. Check some samples here:

1. http://api.jquery.com/jquery.ajax/
2. http://www.w3schools.com/jquery/ajax_ajax.asp

If you want to make reference to JQuery, you can do it also using JSLink, using | symbol like this:

{path to JQuery}|{path to your JS file}