To create the new widget, there are four aspects that you need to implement.
Parameters: Defines Define the schema of the parameters that your widget needs
Editor: This will edit the widget parameters (defined by the Parameters schema above)
Renderer: This will render your widget based on a set of parameters (defined by the Parameters schema above)
- Widget Registration: This will hook everything up (new command, and a key to identify your widget).
...
| Anchor | ||||
|---|---|---|---|---|
|
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
| Anchor | ||||
|---|---|---|---|---|
|
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)
...
- 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 to give your widget a friendly name.
- 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 youtube in Portal.css). NOTE: The style name must match the content type that you specified in WidgetConstants.
...