5

I've been given a task to allow a user to add a 'Vacancy' web part to a page.

The webpart will be basically a list of all vacancies from various regions.

This is the desired final product...

enter image description here

And this is a view I have gotten so far..

enter image description here

It seems like it's pretty close, in terms of the data Im showing, obviously its the styling I need to achieve.

Is it possible to somehow change the styling of this view to match that of the mock-up? How would one begin to crack open this view and changing the look and feel? Or would I need to go a different approach? And if so, what would be the best approach?

  • Please tag version of the SharePoint with the question. – Pradip R. May 25 '15 at 9:45
  • 1
    Hmmm. You should try looking at the Client Side Rendering (JSLink). It does have the support of modifying this view with help of JavaScript. Take a look at this thread: sharepoint.stackexchange.com/questions/142989/… You need to consider only View option for setting this view. – Pradip R. May 25 '15 at 9:59
5

You can complete this using JSLink. JSLink is a property that controls rendering of fields, items and even Web Parts through a JavaScript file. It will overwrite supply a header and footer and then a JavaScript method (function pointer) to execute for each list item. Please look at this post for more details.

Example how to overwrite item, footer and header for list view:

// anonymous self-executing function to setup JSLink templates on page load..
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "html for header";
    overrideCtx.Templates.Item = "item html";
    overrideCtx.Templates.Footer = "html for footer";

    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = "template number";

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
...
  • Thanks Andrey, I ended up going this route and pretty much making good progress, thanks! :) – Simon May 26 '15 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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