0

I could use a little guidance on how best to achieve my goals with JSLink and CSR. I'd like to turn this regular list view: Regular List View Into this custom record layout: Custom Layout

I already have the custom layout scripted in plain HTML/CSS. Is the best way to insert this by wrapping it in javascript and replacing the entire "Body" section of the CSR Template in the OnPostRender stage? I could add variables to insert the sharepoint data in the relevant places.

Or is it better to implement these changes during the rendering process? It would be much trickier to track all the code changes and adapt the layout in my reckoning.

FYI, the list view is set to only show one record, receiving a filter from the page QueryString.

If someone could give me a few steps on how to best achieve the result, it would be much appreciated! Thanks!

3
  • You can use rest api in place of JS link for displaying data in this format.
    – Akshay
    Commented Sep 7, 2017 at 9:38
  • Hi Akshay, thanks for responding! How would I complete this using REST? I have no experience using it. I need the solution to be deployable as part of a custom web part. I was intending the 'export' the webpart with the JSLink once I'd created it, and reupload it to the webpart gallery. I'm hoping this means all future iterations of the webpart contain the same jslink.
    – Mark E
    Commented Sep 7, 2017 at 9:55
  • Using JSLink, you'd need to override Templates.Item and add your html to it.
    – Aveenav
    Commented Sep 7, 2017 at 15:01

1 Answer 1

0

Do you want to display all the items in the same view if so go with JS Link and use item rendering if only 1 item use Rest Api to fetch the data and use some html and css to display.

use this link to start with Rest Api and you can read query string value from Javascript code

Your Answer

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

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