Page Comparison

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

1. Parameters: Defines Define 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.

...

Define a key for each parameter that your renderer/editor needs.  See WidgetConstants

Editor

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

  • For your widget to be inline, add to the editor's updateDescriptorFromView() method:

    descriptor.put(WidgetConstants.INLINE_WIDGET_KEY, "true");

• 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)

...

• 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 in Markdown, like the YOUTUBE_CONTENT_TYPE constant) 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 to give your widget a friendly name.  
• Add the new command to the menu (see EntityPropertyFormViewImplMarkdownEditorWidget.createWidgetMenu()).
• (Optionally) Add css styles to Portal.css. These will be automatically applied to the div that surrounds your Widget (see youtubeDescriptor youtube in Portal.css).  NOTE: The style name must match the content type that you specified in WidgetConstants.

...