31

'Text': { 'View': RenderFieldValueDefault, 'DisplayForm': SPField_FormDisplay_Default, 'EditForm': SPFieldText_Edit, 'NewForm': SPFieldText_Edit }, 'Number': { 'View': RenderFieldValueDefault, ...


23

The following templates define how User field is rendered in List Form pages. Single-valued user field: New: SPClientPeoplePickerCSRTemplate Edit: SPClientPeoplePickerCSRTemplate Display: SPFieldUser_Display Multi-valued user field: New: SPClientPeoplePickerCSRTemplate Edit: SPClientPeoplePickerCSRTemplate Display: SPFieldUserMulti_Display JavaScript ...


15

Client-Side Rendering is simply a term for when the data is transformed using the client rather than the server. This means using client-side technologies, such as HTML and JavaScript. It allows us to style SharePoint elements using JavaScript, rather than having to write XSLT. You can use it to style complete List Views, Fields, Search Results and more. ...


12

Basically what you are looking for is the Deferred loading mechanism (javascript 'promises'). The code block below returns a so-called 'promise'. This allows you for chaining different methods (and is a bit more controllable than the previous answer given). I've applied this to all of my sharepoint apps to keep stuff organized as well (+ you can build some ...


12

I have tested it out and was able to do it using CSR and JS Link. Save the below code to say:projectCode.js and upload it to site assets and then refer it in the JS Link of the list view : (function () { var overrideCurrentContext = {}; overrideCurrentContext.Templates = {}; overrideCurrentContext.Templates.Fields = { 'ProjectCode': { 'View': ...


11

If you look in the clienttemplates.debug.js file you'll see what SharePoint does internally to render fields. It has a "map" class that maps the field.FieldType (or field.Type) to the appropriate field renderer function. You can copy that map into your own function and get back the right renderer for any occasion: // Returns the HTML that would have been ...


11

Personal views Surely you don't actually want to edit a personal view page? This only is relevant for one user. Rather, I think you might want to ensure that all views of a certain list have same customizations, even if personalized views are added. CSR vs JSLink Just to make things clear, CSR is completely separate from JSLink. They can be used together and ...


10

So it seems that the order is : onPreRender field1 override function --> (set registerInitCallback, return html etc.) onPostRender onPreRender field2 override function --> (set registerInitCallback, return html etc.) onPostRender onPreRender field3 (non override field, standard SharePoint render) onPostRender ... > so on for all form fields. ...


9

In general you should avoid using executeQueryAsync inside of a loop -- for one you are generating an HTTP request with every call and second you just don't need to! The general pattern for something like this is to first load all of the objects you want, then executeQueryAsync, then work with the returned data. Here is an example that I've re-worked a ...


9

You can do it using CSR as well as using javascript. Here i'm giving simple and easy javascript solution. Working Javascript solution: <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("table[summary='YourListTitle'] td:nth-...


8

Template handler returns the HTML that is to be displayed instead of the value. It doesn't actually replace the value in the context. You should use the same way of calculating the Sales Progress value in postRenderHandler. For example, like this: (function () { var overrideCurrentContext = {}; overrideCurrentContext.Templates = {}; ...


8

You can try CSR concept. It will be applied to the List View Web Part, so you need to following script in all the places where you are using List View Web Part (if you are) otherwise, just follow the below steps. Open the List All Items view or the desired view. Now click on gear icon and select Edit Page. Now the page will be on edit mode, so you can ...


7

To create a form that would submit items to multiple lists, you should: Add some elements to your main list form, probably arranging them in a certain way. If those elements aren't related to fields as I suspect from your description, best way to do it would be to leverage OnPostRender CSR event and then use HTML5 selectors or jQuery to insert your HTML ...


7

Below example demonstrates how to customize List View in order to highlight list item rows. Assume there is a Tasks list and depending on status, rows have to be highlighted using the corresponding color. Template code: SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { SPClientTemplates.TemplateManager....


6

I have corrected your code and here you go $(document).ready(function() { ExecuteOrDelayUntilScriptLoaded(GetDesc, "sp.js"); }); function GetDesc() { context = new SP.ClientContext.get_current(); web = context.get_web(); siteURL=$(location).attr('href'); var titleName=document.title; var mListName= "TestList"; ...


6

I wrote my own JSLink Manager (runs as a Browser Bookmarklet) To: add/delete JSlinks on WebParts/Views in order Immediate save/apply on any change Have to refactor it a bit to work it into the iCSR library Update #1 http://icsr.github.io/JSLinkManager.html is my current version of the JSLinkManager as Bookmarklet...


6

This script should do it: (function () { var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.Templates.OnPreRender = function(ctx) { if (!ctx.inGridMode) { return; } var statusField = ctx.ListSchema.Field.filter(function(f) { return f.Name === 'TrackingStatus'; }); ...


6

With jQuery, what happens is it bind event listeners on each DOM element inline and not on classes or ids. So when the binding method is called, events are bonded on the DOM loaded. To bind event on dynamically loaded DOM, we bind the event to the nearest static parent and give the element we want to bind event. Please note that "parent" and "yourElement"...


6

Disclaimer - I don't work for Microsoft and cannot officially speak on their behalf. However, I do work closely with the engineering team and am very familiar with SPFx and long term plans. SPFx solutions developed using included, generally available APIs will continue to work regardless of changes to SharePoint Online. Solutions made with any released ...


5

As said on Twitter. You could first create an empty element with a specific ID. Pass that ID with your ajax call, and once you retrieved the information from your ajax call, you could retrieve the empty element and pass the necessary information in it. This is probably the easiest and quickest way to achieve it.


5

After some intense debugging I am answering my own question. And wasted +50 StackOverflow points on this, so am an idiot. I copied and de-minified the original (global) SharePoint RenderGroupTemplate function The relevant lines: b[d+".groupHeader"]=true; a+=spMgr.RenderFieldByName(c,d,b,h); delete b[d+".groupHeader"]; Became: listItem[...


5

I don't understand why I am unable to target using other things, like listName or view. The short answer is: because that's how Microsoft designed it, and that's all they gave us. It definitely is kind of a bummer. Keep in mind that ListTemplateType: 100 is only referring to custom lists. If you have views to other OOB SharePoint list types (Contacts, ...


5

This worked for an announcements list. You need to write your code in 'OnPostRender'. Check the rendered DOM and modify the code in 'postRenderHandler' function if needed. Add the required html for displaying your icon. You might want to add some validations to make sure the code doesn't throw any errors. (function () { // jQuery library is required ...


5

I don't think this is necessarily an edge case because it is easy to reproduce the issue and as it turns out, the behaviour is expected. It might be helpful if you have an on-prem version of SP13 available so you can step through the code in start.debug.js to see what's going on. I noticed your reference to Hugh Wood's excellent blog post Part 4 - Async ...


5

As promised, I found the solution. It can be done using CSR with this line of code when rendering : ctx.ListSchema.NoListItem = "";


5

Try this one, you just need to replace the values in the array in line 2: OnPostRender: function(ctx) { ["col1", "col2"].forEach(function(name) { var header = document.querySelectorAll("[displayname=" + name + "]")[0].parentNode; var index = [].slice.call(header.parentNode.children).indexOf(header) + 1; header.style.display = "...


5

First of all, you definitely don't want pre-render because there are no DOM elements there to hide yet. I believe you should be able to set the row's display style setting to "none" right in the code that you have. Something like this: SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () { SPClientTemplates.TemplateManager....


4

After searching for the issue for hours I found a solution which returns the data to SharePoint for Person or Group field. Thanks to author of this post. From this post , I got the idea. However in my case the only string to return to SharePoint is [{"Key":"i:<id>#.w|domain\\\\<UserLoginName>"}]. So, finally my piece of code to submit data ...


4

You only have a reference to the list item, but the actual list item is not fetched to you from the server until you do the executeQueryAsync. Not until then do you have any actual information to work with.


4

Natively CSOM only allows for asynchronous calls. If you want to overcome that, you can use a framework such as http://spservices.codeplex.com/


Only top voted, non community-wiki answers of a minimum length are eligible