Loading And Executing Javascript In Sharepoint 2013
What is JavaScript and Why Use It in SharePoint
JavaScript is a programming language that enables dynamic interactivity and client-side scripting on websites and applications. With JavaScript, developers can create custom functions that execute in the user’s web browser instead of on the web server. This allows for responsive experiences without needing to reload pages.
Using JavaScript in SharePoint pages and sites unlocks additional possibilities like:
- Validating form data before submission
- Dynamically showing and hiding page elements
- Animating transitions and slideshows
- Sending data to and from the SharePoint API
- And much more
By enhancing sites with JavaScript, SharePoint designers can boost engagement, streamline workflows, and create more intuitive interfaces.
Methods to Load JavaScript in SharePoint
Using Script Editor Web Parts
The most straightforward approach to add JavaScript to a SharePoint page is by using a Script Editor web part. The Script Editor web part enables pasting JavaScript directly into the web part properties. The code will then execute on that page.
To use a Script Editor web part:
- Edit the SharePoint page
- Add a Script Editor web part
- Paste JavaScript code into the text editor field in the web part properties
- Save the page
This method is great for page-specific scripts. However, the code is not reusable across sites.
Adding Links to JavaScript Files in Master Pages
For reusable JavaScript that should load across an entire SharePoint site, add in the section
Embedding Scripts in Web Part Properties
Some web parts enable adding JavaScript through web part properties. For example, the Content Editor and Media web parts have fields for embedded script.
Using these fields can be easier for quick scripts related to that web part. But they should be used sparingly, as embedded scripts can clutter and complicate longer pages.
Injecting Scripts with Custom Code
For complex JavaScript needs, custom code can load scripts through various events and callbacks. Examples include the Client Side Rendering (CSR) API, remote event receivers, or injecting via link elements.
Loading scripts dynamically through code enables advanced scenarios. But requires JavaScript and SharePoint development expertise.
Executing JavaScript in SharePoint
Understanding Client-Side vs Server-Side Execution
Client-side execution means the script runs in the user's web browser, without needing to post back to the server. This leads to faster, more responsive user experiences. Code can respond to interactions like button clicks locally.
Server-side execution means the scripts runs on the web servers, then returns data to populate the rendered pages. Server-side code has access to system resources, but calls require full page reloads.
In SharePoint specifically, most custom JavaScript should be written to execute client-side. This avoids unnecessary server traffic and latency to improve performance.
Calling functions on page load
To execute JavaScript functions automatically when the page loads, attach to the onload event:
window.addEventListener("load", function() { // JavaScript code here });
This technique is commonly used to initialize interactive page elements like accordions or tabbed navigation.
Triggering scripts on user interactions
For functions that require direct user input, attach scripts to events like click, hover, scroll, key down, and more:
document.getElementById("button").addEventListener("click", function(){ // Execute code on click });
This allows user actions to directly trigger dynamic page updates without needing to navigate between pages.
JavaScript Best Practices
Following Accessibility Standards
Ensure custom JavaScript adheres to web accessibility standards through techniques like:
- Keyboard accessibility for functions
- Using ARIA roles for dynamic content updates
- Semantic HTML elements underlying scripts
- Labels and alt text for images
These practices ensure site content remains usable for people requiring assistive technologies like screen readers.
Optimizing Performance
When used heavily, JavaScript can impact performance. Optimize scripts through:
- Loading external .js files asynchronously
- Minifying code by removing whitespace
- Leveraging browser caching by versioning script files
- Debouncing rapidly firing events like scroll
Write efficient code to avoid blocking user interactions and reduce load times.
Handling Errors Gracefully
Robust JavaScript should anticipate and handle potential errors to avoid breaking site functionality. Techniques include:
- Wrapping code blocks with try...catch
- Checking for undefined variables and null values
- Displaying friendly error messages for users
Planning for errors creates reliable experiences accounting for unstable network conditions and user behavior.
Example Scripts
Fading Image Slideshow
This script rotates background images on a SharePoint site, applying a smooth fading visual transition between each image on timers:
let images = [ "image1.jpg", "image2.jpg", "image3.jpg" ]; let fadeDuration = 1000; // ms let currentIndex = 0; function transitionImages() { $('#container') .fadeOut(fadeDuration, function() { $(this) .css('background-image', images[currentIndex]) .fadeIn(fadeDuration); // increment index currentIndex = (currentIndex + 1) % images.length; }); } // Start rotation setInterval(transitionImages, 5000);
Form Validation
This script checks required fields on a SharePoint form before allowing submit:
const form = document.getElementById("myForm"); form.addEventListener("submit", validateForm); function validateForm(e) { let name = document.getElementById("name").value; let email = document.getElementById("email").value; if (name == "" || email == "") { e.preventDefault(); // Stop submit alert("Name and email are required"); } }
Dynamic Menus
This script hides subnavigation when scrolling down, and shows when scrolling up:
let prevScrollPos = window.pageYOffset; window.addEventListener("scroll", function() { let currentScrollPos = window.pageYOffset; if (prevScrollPos > currentScrollPos) { // Show nav on scroll up document.getElementById("nav").style.transform = "translateY(0)"; } else { // Hide nav on scroll down document.getElementById("nav").style.transform = "translateY(-100%)"; } prevScrollPos = currentScrollPos; });
Troubleshooting JavaScript in SharePoint
Debugging with Browser Developer Tools
All major browsers come with built-in developer tools to debug JavaScript. Press F12 to access tools like the Console and Sources panels. Features include:
- Logging messages like console.log for inspecting values
- Breakpoints to pause execution on a line of code
- Watching variables to monitor value changes
Use developer tools to efficiently test scripts and pinpoint issues.
Identifying Conflicts with Other Scripts
If a JavaScript error references an unexpected function or variable name, another script could be causing a naming collision. To isolate, systematically comment out sections of code until the conflict is uncovered.
Namespacing variables is best practice to avoid overlaps between scripts from different sources.
// Scope variables and functions under namespace const MYAPP = { settings: { enableFeatureX: true }, enableFeatureX() { // function body } };
Fixing Issues with Incorrect Scope or Timing
JavaScript code may fail due to issues with scope - where variables and functions are accessible in the file. Double check proper use of function or block scopes. Relevant keywords include var, let, const, function, () => {}, and this.
Errors also arise with timing - the order of operations needed for code to work. Slow things down by using timers, delays, or browser debug tools. This reveals any inconsistent loading sequences or race conditions.