0

Can someone help me decide between JS Link and CEWP or any alternative that you see fit?

I need to build a page (actually entire site with some 5, 6 pages). These pages should look pretty decent (Some good CSS work expected here).

And the decision is to not to use Server object model, and I'm not going Provider hosted app way too. So I have decided to do it through JavaScript.

As I said I need to do good work on branding(CSS), so what do you think is a better option for me? My thoughts are as I've to modify the templates so much, JS Link or CEWP, both would take close to the same number of hours. I'm looking for pros and cons of the each approach.

Once I have the custom master page in place, For the page customization, I'm looking at CEWP or JS Link. To display data from SharePoint on the pages, I can't use the OOTB web parts such as List View Webpart etc as I want to brand those web parts.

I can do one thing that is to use OOTB LVWP and apply JS Link or the second thing is to use CEWP.

In the first case, I get the data loaded to the page without any code and only code that I need to write is to present the data on UI as per branding needs. CEWP case, I need to write data retrieval logic as well. But data retrieval is pretty simple.

With CEWP, I have full control on my code. I'm not sure on the challenges with JS Link. Want to hear on that. If JS Link, is simpler and advantageous to reduce efforts, I would prefer that.

Improve this question
3
  • There are a lot more ways to apply a different look to your SharePoint. Some are : custom masterpages, custom pagelayouts, composed looks (color / font), usercustomactions, alternate css. You can package and deploy these via an sandboxed solution. I would recommend custom actions since they have the smallest footprint and the best compatibility (excluding SP new UI but i won't start with this)
    – Mx.
    Aug 4, 2016 at 9:17
  • @Mix, Added more details, That might help you understand my question better
    – Venkatesh Kadiri
    Aug 7, 2016 at 4:46
  • You should dig deeper in the techniques you plan to use. A CEWP is no replacement for the ListViewWebPart, since you would have to rebuild everything from scratch. Also keep in mind that a CEWP will likely cause problems regarding to MDS.
    – Mx.
    Aug 8, 2016 at 7:51

2 Answers 2

Reset to default
2

Before getting into the analysis whether a CEWP or JSLink, you should better know that these are only just a place holders to add your JavaScript/Jquery/CSS Scripts, so choosing what to use doesnt impact much on your real solution. Lets see a detailed analysis on it,

Content Editor Webpart - CEWP is a placeholder to put your content such as formatted text, tables, hyperlinks, and images in a Web Part Page. You may also use it to put your JavaScript/Jquery/CSS Scripts through edit source option, but it is not pretty standard to put your scripts in a CEWP, only in that case Script Editor Webpart comes into picture. To Know more.

Script Editor Webpart - Script Editor Webpart is a placeholder where you can add your HTML contents and all the JavaScript/Jquery/CSS scripts. But Script editor will not give you a option to format contents as you get in CEWP. To know more.

JS Link/Client Side Rendering - Client Side Rendering is also a JavaScript concept that is used to override the rendering of Fields, Items, Views using the JavaScript File referenced in JS Link property field of a Web Part. You may also use Script editor WP instead of linking the JS file using JS Link option of the webpart, add the Client Side Rendering JS code in the Script editor webpart directly in your page, it will work. To Know more.

So my suggestion is better use Script Editor webpart for adding all you scripts into the page.

Improve this answer
3
  • 1
    You forgot the UserCustomActions option of adding a ScriptLink to a Site/Web, that would give OP just one script reference for all his pages
    – Danny '365CSI' Engelman
    Aug 4, 2016 at 7:59
  • @Danny'365CSI'Engelman I have tried UserCustomAction, It applies the script on all pages. But you know I don't want it run on System Pages. Is there some way I can detect the page is system page and not run the code conditionally.
    – Venkatesh Kadiri
    Aug 7, 2016 at 4:50
  • You have to do the check in JavaScript. If the string _layouts is in the URL is a clear indicator it is a system page
    – Danny '365CSI' Engelman
    Aug 7, 2016 at 7:03
1

To me it kind of boils down to whether or not you need to add HTML.

One of the advantages of the CEWP is that you can use it to link to another file that will then just be dumped onto the page where the CEWP is. That means you can essentially put together a complete HTML page, with CSS and script links and HTML content, and have it be pulled in. So for instance, you could have a file called MyPage.html that was structured something like this:

<!-- You can have a link to a stylesheet -->
<link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css" >

<!-- You can link to a script file -->
<script type="text/javascript" src="/path/to/jQuery.min.js"></script>

<!-- You can have a style block -->
<style>
    .hello {
      font-weight: bold;
    }
</style>

<!-- You can have a script block -->
<script type="text/javascript">
    $(document).ready(function(){
      var x = 1;
    });
</script>

<!-- And you can have regular HTML, without the need for <html> or <body> tags -->
<div class="hello">
    Hello World!
</div>

Link to that file through a CEWP, and all that content just gets dumped right on the SharePoint page.

If you are using JSLink, you can only pull in Javascript files. You can't use JSLink to pull in CSS files or HTML content. The advantage with JSLink though, is that it is available in a lot of places, not only in a View. It's also on Content Types and Fields, so if you have some script that needs to always get loaded when a particular Content Type or Field is present, you can link to it in one place, and the script will "follow" the Field or CType no matter what page or view it ends up in. (This is particularly useful for CSR scripts.)

So if I only needed to pull in Javascript, I might use JSLink. If I need to link to CSS and/or Javascript files, but no HTML, I might use a Script Editor web part (which will let you use <link> and <script src=""> tags). But if I need extra HTML, then it's a CEWP.

Improve this answer
3
  • So it looks like CEWP, you need, if you want HTML,CSS and JS. With JS Link too you can override Header/Footer/Item templates with functions that return a string(HTML). But writing Html as a string is error prone and troublesome.
    – Venkatesh Kadiri
    Aug 7, 2016 at 4:58
  • If I place a LVWP in the page, It actually loads ListData as json object. If the List View hase paging to load only 30 records first. I believe I get only 30 records. When I customize my footer, Are there any OOTB functions that I can use to load the next set of paged records and the previous set. If there are such functions, then my job is easy, no need to write custom code for that. OOTB Web parts I get Document preview and many other features like sorting/filtering etc.
    – Venkatesh Kadiri
    Aug 7, 2016 at 5:07
  • When I customize LVWP with JS Link, Can I call any OOTB function from Client Side rendering framework to get benefits from all these features sorting,filtering,Document preview etc. If such functions present, I prefer to go with JS Link, otherwise I see CEWP is more cleaner and reliable approach. Please share your thoughts.
    – Venkatesh Kadiri
    Aug 7, 2016 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.