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

    Custom widgets

    kranthi.chiluveru

      Hello,

       

      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?

       

      Thanks

      Kranthi

      Satyam .

        • Re: Custom widgets
          gopi.gorantala

          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";

             @Override

             public String getTitle(WidgetContext widgetContext) {

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

           

            @Override

           

             public String getDescription(WidgetContext widgetContext) {

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

           

          //renders the widget
          @Override

          public String render(WidgetContext widgetContext, ContainerSize size) {

             return applyFreemarkerTemplate(widgetContext, size, FREEMARKER_FILE);
             }

           

           

          //actual mappings

          @Override

             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>

           

          <div id="block1">

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

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

                    </div>

           

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