Coder Social home page Coder Social logo

scriptlink's Introduction

SharePoint UserCustomAction with LiveReload

This source code shows the best practices for creating a UserCustomAction for SharePoint.

Liberaries and Tools

  • Babel
  • webpack
  • ESLint, Karma, Mocha, Chai
  • LiveReload

Loader Pattern

The goal of the loader pattern is to provide a way to embed an unknown number of remote scripts into a site without having to update the site. The updates can be done on the remote CDN and will update all sites.

Read more about the Loader Pattern.

Sharepoint JS PnP

The Patterns and Practices JavaScript Core Library was created to help simplifying common operations within SharePoint. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions.

The PnP JS Core Repository

Unit Testing

The unit testing is run using Karma. It is configured to run in both IE and Chrome. See configuration file here.

Running the unit tests: npm run test

Writing Unit Tests

The unit test files can be placed anywhere within the src folder but has to end with the extention .spec.js

We have couple of testcases written for the custom Script Link: search-selected-text.spec.js.

The Asserts are done using the chai-jquery liberary.

Build

Generating the bundled and minified file for development: npm run dev

Generating the bundled and minified file for production: npm run build:prod

Configuring Script Link

Deploying the Script Link is out of scope of this sample code and manually upload the file to the Style Liberary document liberary.

You can use the below C# code to add a custom script link file.

using (ClientContext context = new ClientContext("http://site-collection/"))
{
    context.Credentials = new NetworkCredential("username", "password", "domain");
    var site = context.Site;
    context.Load(site);
    context.Load(site.UserCustomActions);
    context.ExecuteQuery();
    
    var newScriptLink = site.UserCustomActions.Add();
    newScriptLink.Name = "script-link-name";
    newScriptLink.Location = "ScriptLink";
    newScriptLink.ScriptSrc = String.Format("~site/Style Library/scripts/custom-action.bundle.js");
    newScriptLink.Sequence = 1000;
    newScriptLink.Update();
    context.Load(newScriptLink);
    context.ExecuteQuery();
}

Live Reload

Continuously build and host files and start the LiveReload server: npm start Injecting the LiveReload script tag on the SharePoint Page. Use this Chrome Extention - LiveReload

That's it! This should now enable livereloading.

scriptlink's People

Contributors

kiransrikanta avatar ravikiranvs avatar

Watchers

James Cloos avatar Vivek Bharatia avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.