Hot answers tagged

30

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


25

Some resources about Client Side Rendering INTRODUCTION TO CLIENT-SIDE RENDERING IN SHAREPOINT 2013 - I would suggest to use this great article as a starting point, it goes through what CSR is, how CSR can be used, and some tips about debugging and developing As a primer on how to customize a field type by using CSR there is an article in MSDN How to: ...


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


22

7 Code samples that cover Client-Side Rendering/JS Link usage scenarios: http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a


17

You need to add a JSLink to the fields themselves (this means you need to either update the existing fields (by code or by PowerShell, harder in Office 365) or create your own field definition) In that .js file you need to specify a number of methods that will override the standard functions, including View, DisplayForm, EditForm, NewForm. Note that this ...


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


14

SharePoint is a huge historical monster. Core of the current paging implementation was introduced long ago, probably in SP2010 or even earlier. That's why your approach doesn't work: SharePoint isn't finding some html elements that are supposed to be there, and falls back to a simpler approach with link. Investigation Here is why it happens (you may skip ...


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

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

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

You can use the JSLink property to load multiple files. Include a url to the jQuery file and you have a nice workaround. Please note that you will have to use a url within the same web application, you can’t reference the library from a CDN or similar. Try something like this: $Field.JSLink="~sitecollection/Style Library/MicrosoftAjax.js|~sitecollection/...


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


7

If the page the JSLink is on is not referencing jQuery and jQuery UI scripts, you will need to load them yourself. This can be done by for example: function loadScript(url, callback) { // adding the script tag to the head as suggested before var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); ...


7

Here is a complete Tutorial on JS Link with few examples that you can use - http://www.learningsharepoint.com/2013/04/13/sharepoint-2013-js-link-tutorial/


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

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


7

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


7

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


6

Not sure how much does it respond to your need for documentation, I've got an article written a while back with code sources for download. You could do quite a lot just be using that http://nettitude.wordpress.com/2013/01/27/creating-a-carousel-in-a-sharepoint-app-using-client-side-rendering/


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

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


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