This project is read-only.

Getting started guide

Download Jefs.wsp from CodePlex and install using PowerShell:

-webAbsUrl (required) Absolute url of the web where you want Jefs installed
-wspPath (optional) Relative path to the Jefs.wsp file. This parameter is optional if you place the wsp file in the same directory as the script.
For additional information, navigate to Installation Instructions

Launching Jefs
Once installed and activated Jefs icon will appear in the Ribbon on the pages that reside under the web where the Javascript Editor for SharePoint (JEFS) feature was activated. Navigate to the page you want to customize with Jefs and click the Javascript Editor icon in the Ribbon.

By default Jefs button is available on:
  • web part pages
  • list view and form pages
  • document library view and form pages
  • wiki pages

Additional ways to launch the editor
If you need to be able to launch Jefs from pages that do not contain the Ribbon, you can add a link that will launch the editor, to another location. For instance, to add the link to the Quick Launch, follow the instructions below:
  • Go to Site Settings - Quick Launch or if you use a publishing page, navigate to the following url <webUrl>/_layouts/quiklnch.aspx (publishing pages do not let you specify javascript commands in the href attribute when using Site Settings - Navigation, which is why you need to navigate to the Quick Launch page instead)
  • Click New Navigation Link (optionally you can specify a New Heading) and enter the following web address javascript:jefs.editor.launch();. Enter the description and select a Heading, then click OK.

Working with Jefs
This section describes the UI components of the editor.
Please note that in order to achieve the resolution required by the real estate available on this page, the top panel had to be slightly modified to decrease the width of the image. When you launch the editor you will see additional margins and extra button and the editing hyperlink will be fully qualified.

  • Editors
    • Javascript - left panel, always visible. The width of the panel can be adjusted by dragging the handle in the middle.
    • HTML, CSS, LIB - Right panel, switched by the view drop down in the control panel at the top.
  • Buttons
    • Save - saves the content of all the editors and optionally adds the content editor web part linked to the html content, if the zone was selected.
    • Save & Close - performs the same save action as the Save button, plus navigates back to the page when the save operation succeeds.
  • Editing Url - provides a convenient way to open the page under edit in a new tab.
  • Lists
    • include - provides a default list of libraries that can be referenced by the page before the main script runs. This list can be modified in the settings.txt file. Each time a selection is made, the editor switches to the libraries view where a script tag can be adjusted if necessary.
    • view - switches the editors between css, html and libraries.
    • zone - provides a list of zones available on the web part page. If the page didn't return any zones, the drop down is disabled. Selecting a zone from this list will add the Content Editor web part and link the html content to it. If this approach isn't used, the html content can still be appended to the page using javascript.

Debugging Jefs code
The javascript code is saved in the list as the jefs-my.js file. This was done so you could more easily use the borwsers' developer tools for debugging your javascript code. Hit F12 to launch the Developer Tools (Google Chrome) and switch to the jefs-my.js file to start debugging.

Last edited May 2, 2012 at 1:00 PM by tstojecki, version 12


No comments yet.