How to create a Synapse Widget

To create the new widget, there are four aspects that you need to implement.

1. Parameters: Defines the schema of the parameters that your widget needs

2. Editor: This will edit the widget parameters (defined by the Parameters schema above)

3. Renderer:  This will render your widget based on a set of parameters (defined by the Parameters schema above)

4. Widget Registration:  This will hook everything up (new command, and a key to identify your widget).
   
   

Parameters

The parameters are described in a json file in the Synapse-Repository-Services project.  It needs to implement org.sagebionetworks.repo.model.widget.WidgetDescriptor, live in the package lib/lib-auto-generated/src/main/resources/schema/org/sagebionetworks/repo/model/widget, and contain all of the parameters necessary to configure your widget.
Click here to see the configuration file for the YouTube widget.  As you can see, all it needs is the YouTube video-id.

Editor

• Create MVP classes for your widget editor. See the YouTube view, editor, and view implementation.

• Bind your Widget editor view to the implementation by modifying the Portal gin module:

  bind(YouTubeConfigView.class).to(YouTubeConfigViewImpl.class);

• Add a unit test for your editor! (see YouTubeConfigEditorTest)

Renderer

• Create MVP classes for your widget renderer.  See the YouTube view, renderer, and view implementation.
• Bind your Widget renderer view to the implementation by modifying the Portal gin module:
  

  bind(YouTubeWidgetView.class).to(YouTubeWidgetViewImpl.class);

• Add a unit test for your renderer!  (see YouTubeWidgetTest)

Widget Registration

• Hook up automatic dependency injection by first adding methods to the Portal gin injector class (see getYouTubeConfigEditor() and getYouTubeRenderer()).  
• Add a unique content type (to identify your widget) to WidgetConstants.   
• Add code to the Widget Registrar Implementation that call the methods you added to the Portal gin injector (resolve content type to your editor and renderer).  Also register your widget in initWithKnownWidgets() method of this class.  
• Add the new command to the menu (see EntityPropertyFormViewImpl.createWidgetMenu()).
• (Optionally) Add css styles to Portal.css. These will be automatically applied to the div that surrounds your Widget (see youtubeDescriptor in Portal.css).  NOTE: The style name must match the content type that you specified in WidgetConstants.