D2SV Custom Widget Type Tile

D2SV custom widget type tile plugin will help the developer in solving the following scenarios

Define a custom widget type
Define a custom widget type parameter
Define a custom widget type in the landing pange
Define a shortcut tile with behavior to access the custom widget type parameter.

Instruction to try out the sample

Developer can extract the sample and build it using the workspace assistant. Once built, the distribution is collected in 'dist' folder as D2SV-Custom-Widget-Type-1.0.0.jar which can be placed in WEB-INF/lib directory of a deployed D2 Smartview. The same plugin jar file has to be placed in WEB-INF/classes/plugins directory of your deployed D2-Config application. Subsequently, edit WEB-INF/classes/D2-Config.properties and add an entry like plugin_<sequence>=plugins/D2SV-Custom-Widget-Type-1.0.0.jar where <sequence> is the next natural number following the existing entries of the same pattern in the file. The application server needs to be restarted post deployment.

After restart -

Login into D2-Config and navigate to Widget view -> widget from menubar.
Create a new widget configuration and let's name it D2-CustomType and select value CustomType for the dropdown Widget type.
Fill in other fields like Applications, label etc. as desired.
Take a note of the value in Sample text field 1 field.
Save the configuration.
From the toolbar, click Matrix to go to D2-config matrix and enable the widget configuration, you just created, against appropriate contexts.
Navigate to Widget view -> Smart View Landing Page from menu bar and then download your applicable landing page configuration xml file.
tip
If a pre-created Smartview landing page configuration does not exist, then refer to D2 Administration Guide documentation to create the same and learn basics of landing page structure file.

Edit your landing page configuration file and place the following xml anywhere right under <context> tag

  <tile-container>
      <tile name="D2-CustomType" type="CustomType">
          <theme color="shade1" type="stone1"/>
      </tile>
  </tile-container>

Save the landing structure xml file and upload it to D2-Config under the same landing page configuration from where we downloaded it before.
Save the configuration change in D2-Config and click Tools -> Refresh cache from menubar.
Reloading the D2 Smartview at this point should show an additional shortcut in the landing page, similar to following
Click on the shortcut to see a browser alert with message custom parameter sample1 : Hello World. The value Hello World comes from the Sample text field 1 field in the widget configuration we created above.

As result of deploying this plugin, it will introduce a new widget type in the D2-Config widget types. And the other part of the plugin binds this new widget type to a new shortcut tile in D2-Smartview landing page.

Source code structure

D2SV-Custom-Widget-Type
|
|   pom.xml
|   
+---src
|   \---main
|       +---java
|       |   \---com
|       |       +---emc
|       |       |       D2PluginVersion.java
|       |       |       
|       |       \---opentext
|       |           \---d2
|       |               +---rest
|       |               |   \---context
|       |               |       \---jc
|       |               |               PluginRestConfig_CustomWidgetType.java
|       |               |               
|       |               \---smartview
|       |                   \---customwidgettype
|       |                       |   CustomWidgetTypePlugin.java
|       |                       |   
|       |                       +---api
|       |                       |       CustomWidgetTypeVersion.java
|       |                       |       
|       |                       \---rest
|       |                               package-info.java
|       |                               
|       +---resources
|       |   |   customwidgettype-version.properties
|       |   |   D2Plugin.properties
|       |   |   
|       |   +---smartview
|       |   |       SmartView.properties
|       |   |       
|       |   \---strings
|       |       +---actions
|       |       |   \---config
|       |       |       \---modules
|       |       |           \---widget
|       |       |               \---WidgetDialog
|       |       |                       WidgetDialog_en.properties
|       |       |                       
|       |       \---config
|       |               U4Landing.properties
|       |               WidgetSubtype.properties
|       |               WidgetSubtypelist.properties
|       |               
|       \---smartview
|           |   .csslintrc
|           |   .eslintrc-html.yml
|           |   .eslintrc.yml
|           |   .npmrc
|           |   config-editor.js
|           |   customwidgettype.setup.js
|           |   Gruntfile.js
|           |   package.json
|           |   server.conf.js
|           |   
|           +---src
|           |   |   component.js
|           |   |   config-build.js
|           |   |   customwidgettype-extensions.json
|           |   |   customwidgettype-init.js
|           |   |   Gruntfile.js
|           |   |   
|           |   +---bundles
|           |   |       customwidgettype-bundle.js
|           |   |       
|           |   +---extensions
|           |   |       custom.type.tile.behaviors.js
|           |   |       custom.type.tiles.js
|           |   |       
|           |   +---test
|           |   |       extensions.spec.js
|           |   |       
|           |   +---utils
|           |   |   |   startup.js
|           |   |   |   
|           |   |   \---theme
|           |   |       |   action.icons.js
|           |   |       |   
|           |   |       \---action_icons
|           |   |               action_sample_icon.svg
|           |   |               
|           |   \---widgets
|           |       \---shortcut.tile
|           |               custom.type.shortcut.behavior.js
|           |               
|           \---test
|                   Gruntfile.js
|                   karma.conf.js
|                   
\---target

Files and their purpose

Following are the list of function oriented source files and their purpose. Other source files present within the plugin are part of common infrastructure code and explained in Understanding D2SV plugin project.

src/main/resources/strings/config/U4Landing.properties - Defines the custom widget type which are supported

shortcut_types=CustomType

src/main/resources/strings/config/WidgetSubtypelist.properties - Defines the custom widget type

CustomType=true

src/main/resources/strings/config/WidgetSubtype.properties - Defines the custom widget type parameter for the custom widget types mentioned which are supported Here the default value for the paramter can also be provided which can be changed in the D2 Config widget configuration

CustomType.sample1 = Hello World

src/main/resources/strings/actions/config/modules/widget/WidgetDialog/WidgetDialog_en.properties - This properties file will contain the labels used for parameters for the custom type

label_sample1 = Sample text field 1

D2 Smartview UI changes for the plugin

src/main/smartview/src/bundles/customwidgettype-bundle.js - A portion of this file is used to refer to key RequireJS modules that define the extensions shortcut behavior API and click of the widget tile

define([
    'customwidgettype/utils/theme/action.icons',
    'customwidgettype/utils/startup',
    'customwidgettype/extensions/custom.type.tiles',
    'customwidgettype/extensions/custom.type.tile.behaviors'
], {});

src/main/smartview/src/utils/theme/action.icons.js - Defines the default icon for the widgets
src/main/smartview/src/utils/startup.js - Runs as part of D2 Smartview client-side startup flow. This flow is executed everytime end users reload the D2 Smartview application in their internet browser.
src/main/smartview/src/customwidgettype-extensions.json - A portion of this file registers extensions to enable the custom shortcut tile for the widget configuration and also to have custom shortcut tile behavior.

{
  "d2/sdk/utils/landingpage/tiles": {
    "extensions": {
      "customwidgettype": [
        "customwidgettype/extensions/custom.type.tiles"
      ]
    }
  },
  "d2/sdk/widgets/shortcut.tile/shortcut.tile.behaviors": {
    "extensions": {
      "customwidgettype": [
        "customwidgettype/extensions/custom.type.tile.behaviors"
      ]
    }
  }
}

src/main/smartview/src/extensions/custom.type.tiles.js - This will define the custom widget type to the tile containers in the UI

define(['d2/sdk/utils/widget.constants'], function(widgetConstants) {
    'use strict';

    function validateConfigCustomType0() {
        var validation = {
            status: true
        };
        // TODO: Validates widgetConfig. Set validation.status = false if the validation should fail.
        return validation;
    }
    // List of landing tile definitions
    return [{
        type: 'CustomType',
        icon: 'custom-widget-type',
        isShortcut: true,
        tileConfigType: widgetConstants.TileConfigTypes.WIDGET,
        validateConfig: validateConfigCustomType0
    }];
});

src/main/smartview/src/extensions/custom.type.tile.behaviors.js - This will define the custom shortcut behavior to the custom widget type CustomType

define(['customwidgettype/widgets/shortcut.tile/custom.type.shortcut.behavior'], function(CustomTypeShortcutBehavior) {
    'use strict';
    return [{
        type: 'CustomType',
        behaviorClass: CustomTypeShortcutBehavior
    }];
});

src/main/smartview/src/widgets/shortcut.tile/custom.type.shortcut.behavior.js -Define custom shortcut behavior with the onclick action to perform. This will prompt the user with the default parameter value configured for the CustomType

define([
    'd2/sdk/widgets/shortcut.tile/shortcut.tile.behavior'
], function(ShortcutTileBehaviorImpl){
    'use strict';

    var CustomTypeShortcutBehavior = ShortcutTileBehaviorImpl.extend({
        constructor: function CustomTypeShortcutBehavior() {
            CustomTypeShortcutBehavior.__super__.constructor.apply(this, arguments);
        },
        onClick: function() {
            alert('custom parameter sample1 : '+this.options.widgetParams.sample1);
        }
    });

    return CustomTypeShortcutBehavior;
});

D2SV Custom Widget Type Tile

Instruction to try out the sample​

Source code structure​

Files and their purpose​

Custom widget type references needed for the D2-Config widget configuration and D2 Smartview landing page configuration​

D2 Smartview UI changes for the plugin​

Instruction to try out the sample

Source code structure

Files and their purpose

Custom widget type references needed for the D2-Config widget configuration and D2 Smartview landing page configuration

D2 Smartview UI changes for the plugin