Hot answers tagged

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. ...


13

Option 1. How to remove row in List View The following example demonstrates how to delete rows via client side rendering (function () { function listPreRender(renderCtx) { var excludeRows = [0,2,3]; //row idexes to be excluded var rows = renderCtx.ListData.Row; //get current rows for(var i = excludeRows.length - 1; i >...


12

SharePoint 2013 CSR OnPreRender handler could used for initialization of ClientContext since OnPreRender is called before the actual View/Fields rendering Example: (function () { function OnPreRenderDocItemTemplate(renderCtx) { SP.SOD.executeOrDelayUntilScriptLoaded(loadContext, 'sp.js'); function loadContext() { ...


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 ...


11

You should do this steps (for example): Create New Field <Field ID="{FFCDA660-279E-4581-B451-49365B002B1A}" Name="RequestStatus" DisplayName="Request status" Type="Choice" Required="TRUE" Overwrite="TRUE"> <CHOICES> <CHOICE>Open</CHOICE> <CHOICE>In Progress</CHOICE> <CHOICE>Resolved&...


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 ...


10

It depends on what you want to do with it. The power of using JSLink is that it uses JavaScript and runs in the client and you can use all the powerfull JavaScript libraries and for its easy to debug. It is easy to change the fields appearing and add some nice functionality to views. The weakness however is that JSLink runs in the client and it depends ...


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

First, let's just clarify that JSLink is not equivalent to Client Side Rendering. JSLink is merely a property on SP objects that lets you attach Javascript files to them. However, the ability to attach a Javascript file to a SP object is enormously useful for CSR. Using the JSLink property is one of the easiest ways to apply CSR. And I would say that ...


8

Since SharePoint 2013 supports several sets of APIs, you could utilize client APIs (CSOM/REST) in PowerShell. How to set View.JSlink property using PowerShell in SharePoint Online CSOM version The following example demonstrates how to specify View.JSlink property via CSOM in PowerShell: [System.Reflection.Assembly]::LoadWithPartialName("Microsoft....


8

Please try to use CSR. Step 1: Create a JS file and paste below code. (function () { function registerRenderer() { var ctxForm = {}; ctxForm.Templates = {}; ctxForm.Templates = { Fields : { 'LinkTitle': { //------ Change Hyperlink of LinkTitle View : function (ctx) { ...


8

That's a kind of bulky way to do it, what if you create multiple sites using this template and then need to change something in the text document? That would be a lot of manual work to update the document in all site collections. While it would be possible to store this text file on the root site and give everyone read access, i think it can lead to ...


7

You need to open the DispForm.aspx page for the List Item in a Modal Dialog.. The URL for the List Item will be: http://sharepoint/Lists/ListName/DispForm.aspx?ID=1 where ID is the List Item Id.. Now opening it in a modal dialog, write a function in JavaScript like: function openDialog( pageUrl ) { SP.UI.ModalDialog.showModalDialog( { ...


7

After searching over internet I found the solution. I just needed to execute my function after the SP.JS gets loaded. So I added one line.ExecuteOrDelayUntilScriptLoaded(getResponsibleArray, "sp.js"); in my code. So my new code is : $(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(getResponsibleArray, "sp.js"); }); (function () ...


7

Modify the view using browser and do following Select column from the filter (company) Select contains Enter {company} Or Select column from the filter (year) Select contains Enter {year} Save and close. Now open SharePoint designer and edit the view aspx file in advanced mode. Look for <ParameterBindings> and add following <ParameterBinding ...


7

You can put the code of loading external css file in JS only. Give it a try for below code: var cssId = 'myCss'; // you could encode the css path itself to generate id.. if (!document.getElementById(cssId)) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.id = cssId; link.rel = '...


6

You could use the "PostRender" event to execute your javascript method after the form is completely loaded, something like: (function () { // Initialize the variable that stores the objects. var overrideCtx = {}; overrideCtx.Templates = {}; // Assign a function to handle the // PostRender events overrideCtx.OnPostRender = ...


6

If yous store .js file in masterpage gallery or styles library you have to write the .js file url like this: Sitecollection level: ~sitecollection/_catalogs/masterpage/myjslinkfile.js Site level: ~site/_catalogs/masterpage/myjslinkfile.js Layouts should work fine without ~site or ~sitecollection.


6

Make JSlink load your file You can put multiple files in the JSlink where you now use: ~sitecollection\....\yourCSRfile.js They have to be separated by a ; (semi-colon) They do not have to be CSR files, can be any JS file (It is called JSlink for a reason). But they have to be in a location where JSlink may access them: ~site or ~sitecollection (and more) ...


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

When you're in the rendering cycle, in your CSR override code, ctx.CurrentItem will have other field values. So for instance you could check ctx.CurrentItem.ProductionStatus (or whatever the internal name of your field is). I highly recommend setting a breakpoint in your CSR script and exploring what is available on the ctx object during rendering. Another ...


6

Use a pipe between the two file paths: ~siteCollection/Style Library/colorcode.js|~siteCollection/Style Library/disabletitle.js


5

Here is the C# version of Anders answer as it was not as straightforward as I would have thought. public static void SetFormJSLink(this SPList list, PAGETYPE formBaseView, string jsLinkUrl) { var file = list.ParentWeb.GetFile(list.Forms[formBaseView].Url); file.CheckOut(); using (var manager = file.GetLimitedWebPartManager(PersonalizationScope....


5

The only way to make the update available to all users is to edit the webpart and add a timestamp to the JSLink file. For example you can add ?timestamp=2016122200. Also, to avoid this problem, I use a short static code in the JSLink file that will call another JS file where all the stuff I modify often will written. By doing it I'm able to do all the ...


5

It seems that the Custom mode was not really tested by MS. I've been digging into the Custom mode for several days, and I actually found a workaround, although I don't think it really pays off to use it. You can find example of using this workaround to create a tabbed list form on CodePlex: CSRTabs.js - the main script that renders the layout Schema.xml - ...


5

The following example demonstrates how to control field visibility in List Forms using JSOM function setFieldVisibility(listTitle,fieldName,properties,success,failure) { var ctx = SP.ClientContext.get_current(); var web = ctx.get_web(); var list = web.get_lists().getByTitle(listTitle); var field = list.get_fields().getByTitle(fieldName)...


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