JSLink, WebParts, & Pageing
Maybe this is a promise of posts to come in the future, but if there is anything I have learned to both respect and fear. It is JSlink.
It is both a source of my frustration, and awe in just how powerful a tool it is in our tool kits. We can render and alter just about anything...in the web part itself, all in a single *.js file.
I'd love to discuss more, and really dig deeper into the complexity and power of this, but for the moment, I'm going to put this smaller solution here.
Based on the excellent blog post jslink-with-paging-for-rendering-list-views/ by Cas van Iersel. I was able to implement the same functionality, but with a slight twist. After looking over his template, it was well...awesome, but in a totally different format and style.
I'll discuss more about this project later, as it is a unique one. I have restyled and reshaped the out of the box discussion lists, to take advantage of their functionality, but adding my own fields and stymieing. However, for now, lets look at the JSLink file Download JSLink
Some of my initial statements here.
This block is based on the code found on Iersel's blog. Minor tweak in the display because its always viable now.
It is both a source of my frustration, and awe in just how powerful a tool it is in our tool kits. We can render and alter just about anything...in the web part itself, all in a single *.js file.
I'd love to discuss more, and really dig deeper into the complexity and power of this, but for the moment, I'm going to put this smaller solution here.
Based on the excellent blog post jslink-with-paging-for-rendering-list-views/ by Cas van Iersel. I was able to implement the same functionality, but with a slight twist. After looking over his template, it was well...awesome, but in a totally different format and style.
I'll discuss more about this project later, as it is a unique one. I have restyled and reshaped the out of the box discussion lists, to take advantage of their functionality, but adding my own fields and stymieing. However, for now, lets look at the JSLink file Download JSLink
Some of my initial statements here.
Here is where we are defining WHAT we are overriding... In this case, the Item, and the footer.
I am not adding a header as its just unneeded in this display.
Now we are overrideing the templette for the item level.
The first block is to ensure there is data, else replacing data with the generic response.
The first block is to ensure there is data, else replacing data with the generic response.
Second set is to strip some of the html. There was also a minor problem if a topic title had a single quote (') character in it (Example: Chuck's BBQ) because that would be what was rendered to form the link to the topic. So fixed that. Finely checking the data and ensuring it is formatted properly.
Now that all the data we gathered is pulled together, outputting a consistent html statement that we can then later style with CSS.
Hope this helps someone, it was as much a learning experience for me making this as anything else.
Comments
Post a Comment