Getting Started with Custom SharePoint Online Add-Ins

dikuw app development site.PNG

The post covers what you need to create your first custom app in SharePoint Online 2013. 

What you’ll want:

  • Microsoft 365 Account:
  • Visual Studio:
  • SharePoint Designer:
  • Firefox:
  • Firebug:
  • JQuery:

You can also reference jQuery at it’s content delivery network (CDN) site: Use the following code to reference the CDN:


Updating the code to whatever is the latest version. The .min extension specifies the compressed file, which is typically used at runtime (the uncompressed is for development and debugging).

To add this code to your SharePoint site, navigate to the file seattle.master in Master Pages using SharePoint Designer and add the above line of code to the bottom of the file, right above the </head> tag.

SharePoint Online offers no access to the server for end-users, site admin, and developers, so all coding is done on the front-end/client side. In order to enable this, Microsoft has expanded the JavaScript Object Model (JSOM), and introduced a new REST (REpresentational State Transfer) API (Application Programming Interface).

More about JSOM: JSOM is a CSOM (client-side object model). To reference JSOM, use the following code:

JSOM script

JSLink is new in SharePoint 2013 and allows styling list view web parts. To add JSLink to your list web part, perform the following steps:

  1. Open the list you want to style, and click Link in the header:JSLink Custom List 1
  2. Click Form Web Parts and Default Edit Form:JSLink Custom List 2
  3. Click Web Part in the header:JSLink Custom List 3
  4. Click Web Part Properties:JSLink Custom List 4
  5. In the Properties window, scroll down to and expand Miscellaneous:JSLink Custom List 5
  6. This is where you reference the JavaScript file.

Another new feature in SharePoint 2013 is Display Templates. Display Templates are used with Search Web Parts, to control and style search results.

Similar to adding JSLink to a List Web Part, Display Templates are added to a Search Web Part as follows:

  1. Open the Search Web Part in edit mode and click Web Part:Display Template 1
  2. Click Web Part Properties:Display Template 2
  3. Under Properties -> Settings, update the Display Template:Display Template 3

In addition to the existing Content Editor Web Part (CEWP), which allows you to add HTML to a page, SharePoint 2013 introduces the Script Editor Web Part (SEWP), which allows you to now add Javascript.

To add a SEWP, follow these steps:

  1. On the page you want to add the web part to, go to Edit, then click Insert -> Web Part -> Media and Content -> Script Editor and click AddSEWP 1
  2. Edit the Web Part by clicking the drop down menu, and Edit Web Part:SEWP 2
  3. Click Edit Snippet:SEWP 3
  4. Enter your script and click Insert, e.g.:SEWP 4
  5. Click SaveSEWP 5
  6. Enjoy the results:SEWP 6

Stay tuned for more on customizing SharePoint 2013 online!




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s