SharePoint and the User Interface with JavaScript
Download as PPTX, PDF2 likes3,705 views
Colin Phillips discusses the integration of JavaScript with SharePoint, highlighting its role in creating interactive web pages and applications. He emphasizes the importance of JavaScript libraries like jQuery and frameworks like AngularJS and ReactJS for enhancing functionality, especially within SharePoint 2013 and its new JSLink feature for customizing list views. The document concludes by demonstrating various applications of JavaScript and CSOM in SharePoint, showcasing the potential for creating dynamic user interfaces.
SharePoint and the User Interface with JavaScript
- 1. SharePoint and the User Interface with JavaScript Colin Phillips :: SharePoint MVP :: itgroove March 2015 The Magic Glue to Bring Interactive Pages to Life
- 2. Who I am: Colin Phillips My Background 16+ Years in Technology Today: SharePoint Consultant and MVP (with itgroove) Previously: 12 Years Developing Software, IT Infrastructure Projects, Workflows, and Many Other Related Topics B.Sc. in Computer Science from UVic My Socialness Blog: mmman.itgroove.net / Twitter: @itgroove_colin Where to learn more [email protected]
- 3. What is JavaScript? • JavaScript (or JS) is a powerful language that has the capacity to do many very simple things (such as reload a webpage) or can be the basis of entire (typically web-based) applications • Developed by Brendan Eich of Netscape in the mid-90s, it (along with influence from Microsoft and their version “JScript") ultimately became the basis of the standard ECMAScript • Strictly speaking, “JavaScript is an object-based scripting language that is lightweight and cross- platform. JavaScript is not compiled but interpreted.” • Supported by a broad coalition of companies - no single person or company controls it On a side note, I actually met and spent a number of days with Brendan and the Mozilla team in 2001 as part of attending a conference & being asked to join them at the Netscape campus
- 4. Who / Where / Why? • JavaScript can be used by almost anyone – but that doesn’t mean they should. • Typically used by front-end web developers to add interactivity to web pages • Most often combined together with HTML and CSS to create interactive web pages • "JavaScript is one of the world's most popular programming languages. Virtually every personal computer in the world has at least one JavaScript interpreter installed on it and in active use.“ • Rather than asking, “What is the future of JavaScript?” the right thing to say is JavaScript is the future. Another answer to the same question is JavaScript will stay relevant as long as people use the Internet.
- 5. JavaScript Libraries / Frameworks • JavaScript is extremely popular and lots of people have made “libraries” (or “frameworks”) for it - small packages which simplify writing code or performing a specific function, very well • Most often open source and combined with HTML & a browser • Including, but not limited to: (there are lots more) • Chart.js (and many other charting libraries) • Dojo Toolkit (web apps, mobile, charting cross-browser) • ExtJS (data aggregation, dashboards & BI) • AppJS & App.js (cross-platform desktop / mobile apps with JS/HTML/CSS) • Kendo UI (Very well constructed, but $ – from Telerik) Technology and Ghostbusters are amongst my favourite things
- 6. Popular JavaScript Library #1: jQuery According to Google, “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.” • jQuery can make lots of (formerly) complex tasks trivial because of the nature of how it abstracts the complex portions of JavaScript away • Simply include jQuery in a web page (with a <script> include), then you can start using the shortcut syntax (like “$(document).ready(alert(‘hi’));”) in a <script> block • We use jQuery all the time because writing much of the equivalent JavaScript out by hand is tedious, and cross-browser compatibility is a huge pain in raw JavaScript
- 7. Popular JavaScript Library #2: TypeScript • “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.” (Like SASS for CSS) • JavaScript is “loosely typed” – so a variable can act like a string in one statement, a number in the next statement, a date after that, or even an object • TS Allows JavaScript to act more like “strongly typed” languages such as C++ or Java • In other words, a character data type, must operate like a character data type, and not like anything else – or else you’ll get a compile error • My own personal opinion is that TypeScript is cool, and probably helpful to some, but I love how JS is loosely typed, so it’s not as interesting to me
- 8. Application Frameworks • Node.js - Web applications with real-time, two-way connections, where both the client and server can initiate communication (individual creator) • AngularJS (by Google) • Ember.js (spinoff of SproutCore) • Backbone.js (by developer of CoffeeScript) • ReactJS (by Facebook & Instagram) • Many many others One or a combination of several may be the best option for your web app.
- 9. SharePoint and JavaScript • In SharePoint 2013, using JavaScript is the only way to perform certain types of functionality (like Conditional Formatting) • 2013 introduced a new list/library display override called “JSLink”. You can use this to create your own / modify an existing view • Of course, nearly anything you can do outside of SharePoint with JavaScript can also be done within SharePoint – just not a lot of people are that adventurous • JavaScript is a key component of the new SharePoint App model – lots of modern SharePoint Apps are written with JavaScript and JS Frameworks Below: JSLink in Action
- 10. SharePoint JSLink Code Sample • At it’s most basic, you’re telling SharePoint to override it’s default list view mechanism, and use the custom one you define instead • In this case, when the column “MoreText” is seen, output that column’s text in bold (using a simple HTML tag <b>) • For the nerds, yes, it’s just a bunch of nested objects with some JSON using an anonymous function (which is called once SP is ready) – but it can do SO much! (function () { // Initialize the variables for overrides objects var overrideCtx = {}; overrideCtx.Templates = {}; /* Using the Fields override leaves the rest of the rendering intact, but allows control over one or more specific fields in the existing view – this is just one of many ways to use the override */ overrideCtx.Templates.Fields = { 'MoreText' : { 'View' : '<b>' + ctx.CurrentItem.MoreText + '</b>' }}; /* Register the template overrides. */ SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })();
- 11. CSOM – Client Side Object Model Now we’re cooking with napalm • The Client Side Object Model (CSOM) is a collection of methods exposed to programmers to allow you to speak directly to objects in SharePoint • In other words, you can do lookups on lists or libraries using JavaScript, add new items, even modify existing list / library items • The JSOM – JavaScript Object Model exposes the same objects as the CSOM • The CSOM is constantly being developed. New API’s are being exposed in Office365 all the time • The CSOM is an important part of the SharePoint App Model. You use the CSOM to communicate with SharePoint to retrieve data for your app, then can further manipulate it using JavaScript, or present that data using HTML/CSS • The CSOM isn’t exclusively for JavaScript, you can use it with C# & VB.net as well, and many other languages (even things like Perl, PHP, PowerShell or any language that can speak web services) Yes, this is a real book And has really good reviews!
- 12. Example 1: Visual, Responsive Location Chooser • All items are defined by a SharePoint list • Each item has a label (Location X), an image, and a URL (destination upon click) • Using the new JSLink technique in SP2013, we’re able to take that simple information, and using an HTML template, turn that into a dynamic, responsive, flowing layout that presents visually stunning
- 13. Example 2: Effective Visual Layout of SharePoint List Data • Here’s one of the landing pages for the previous example • One list entry represents the entire top portion of the page • Each of the Properties (in the details) are just a column in that single list entry • Again uses the JSLink technique to translate list content into a powerful visual representation
- 14. Example 3: Self Service Employee HR Dashboard • Responsive design • Uses a charting library (JQPlot) • Some include transitions • Each “box” is just a webpart • Some web parts use both back-end server side logic, while the front end uses JavaScript for final presentation
- 15. Example 4: Custom Mysite Landing Page • Tabbed interface (on right) allows the bottom portion of the screen to be a broken down collection of details about each user • Uses the JSLink technique at the bottom to “inject” an image on the left, and an “Action” on the right, otherwise the rest is just regular list data
- 16. Example 5: HR Recruitment Job Posting Mgmt Tool • Adding large, interactive buttons and making “sections” interactive (with status) added greatly the sites’ overall usability • Uses the JavaScript CSOM to dynamically update and query list data • When each button is clicked • Upon page load (to update the button status’) • And when the site is first created • Also enforces permissions (on Office Use Only column)
- 17. Comparison of Old to New
- 18. Example 6: Company Portal HomePage • Another example of using the JSLink technique on SharePoint list data to layout several webparts • That’s an interesting cupcake policy
- 19. Demo Things to Show • Consultant Dashboard - Conditional Formatting - Elimination of empty web parts - Floating ball icons • Mega / Micro Menus • Projects Dashboard (Time/money/scope & barometer) • Time Entry modals • Client Details drop down (taking you to the client dashboard) • Landing page photo rotator • Collapsible divs • Tabs • URL Shortener • LED Dashboard (with auto refresh)
- 20. Summary • JavaScript has been around for many years and is only getting stronger – it’ll be around for as long as the web is • Combined with libraries (like jQuery), you can make some awesome little tweaks to add a lot of value, for little expense • In SharePoint: • The new layout possibilities using JSLink are nearly endless, and very easy to make into a reality • The CSOM brings to life a whole world of possibilities, and is the foundation of SharePoint Apps • When your users get it, and it’s easy for them, you’ve built it right
- 21. Questions? Contact Info Colin Phillips [email protected] blog: mmman.itgroove.net Twitter: @itgroove_colin
Editor's Notes
- #22: In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.