6 Replies Latest reply on Dec 4, 2018 10:51 AM by gopi.gorantala

    Custom widgets

    kranthi.chiluveru Advanced



      We are planning to develop a custom widget which can be used across the platform in Overview pages. Can you share some useful resources and any additional information that will be helpful for us?




      Satyam .

        • Re: Custom widgets
          gopi.gorantala Advanced

          Create a plugin with the help of this document : https://community.jivesoftware.com/docs/DOC-111844#jive_content_id_New_plugin_setup


          Next steps:


          1. create a java file with below code -


          @PropertyNames({ "properties01", "properties02"})  // lets say your widget is having 2 properties which accepts two properties
          @WidgetTypeMarker({ WidgetType.COMMUNITY, WidgetType.HOMEPAGE }) // this is a configuration, whether you wanna display the widget in HOMEPAGE or COMMUNITY or BOTH


          @WidgetCategoryMarker({ WidgetCategory.OTHER })  // or if you widget targets to display/get content etc.. then use @WidgetCategoryMarker({ WidgetCategory.CONTENT}) , if you widget use-case is something else, use OTHER


          public class HelloWorld extends BaseWidget{

            private String properties01;
            private String properties02;// getters and setters for these properties

            private static final String FREEMARKER_FILE = "/plugins/${YOUR_PLUGINNAME}/resources/templates/hello-world.ftl";


             public String getTitle(WidgetContext widgetContext) {

             return getLocalizedString("widget.helloworld.title", widgetContext);




             public String getDescription(WidgetContext widgetContext) {

             return getLocalizedString("widget.helloworld.desc", widgetContext);


          //renders the widget

          public String render(WidgetContext widgetContext, ContainerSize size) {

             return applyFreemarkerTemplate(widgetContext, size, FREEMARKER_FILE);



          //actual mappings


             protected Map<String, Object> loadPropertiesForSoy(WidgetContext widgetContext, ContainerSize size) {

            Map<String, Object> properties = super.loadPropertiesForSoy(widgetContext, size);
          // Community targetCommunity = (Community) getContainerFromContext(widgetContext);
          // properties.put("communityID", targetCommunity.getID());
          // properties.putAll(feedbackDailyReportProvider.getReportContext(targetCommunity));
             return properties;



          2. FTL file which contains the UI

                - create an FTL file in the resources directory, write some code.. in the below the properties are binded to the widget class members

                   <div id="block1">

                      <a id="box-link" href="${properties01!""}"></a>

                       <a href="${properties01!""}">${properties01!""}</a>



          <div id="block1">

                      <a id="box-link" href="${properties02!""}"></a>

                       <a href="${properties02!""}">${properties02!""}</a>



          3. plugin.xml entries :   <widget class="com.simplewidget.HelloWorld" />