6

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?

2
  • Please tag version of the SharePoint with the question.
    – Pradip R.
    May 25, 2015 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, 2015 at 9:59

1 Answer 1

6

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);
})();
...
1
  • Thanks Andrey, I ended up going this route and pretty much making good progress, thanks! :)
    – Simon
    May 26, 2015 at 15:18

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .