The Actions Widget is a widget dependent on an asset Dialog Template which will determine its behavior. Within the Configuration dialog of the widget, a user can either select one of the pre-defined templates or create a new Dialog Template configuration.

Action Config Window

All Dialog Templates which are dedicated to the Action’s Widget have their Resource Usage set as censhare:actions-view-definition. It’s very likely that an Action Widget Dialog can have a JavaScrip controller assigned to it via a JavaScrip Controller type of Relation, to extend its logic.

A good example of a similar set up, it’s the censhare Action: Assign to template. It consists of the ‘Dialog’ asset (type: module.dialog.), which contains the HTML and CSS part of the widget and a JS Controller (type: module.script.) which contains the logic of the Widget. In more detail:

  • censhare Actions: Assign to (Dialog)

<style type="text/css">
  .csActionsWidget__frame--assign-to .cs-widget-action {
    height:90px;
  }
  .csActionsWidget__frame--assign-to .csActionsWidget__background-image {
    font-size: 6.5rem;
    line-height: 6.5rem;
    opacity: 0.1;
    float: right;
  }
  .csActionsWidget__frame--assign-to .csActionsWidget__title {
    font-size: 3.8rem;
    line-height: 3.8rem;
  }
</style>
 
<div class="csActionsWidget__frame--assign-to cs-p-h-w">
  <div class="cs-widget-action" type="page" ng-click="assignTo()">
    <span class="csActionsWidget__background-image cs-icon cs-icon-circle-arrow-right"></span>
    <p class="csActionsWidget__content">
      <span class="csActionsWidget__title">Assign to</span>
    </p>
  </div>
</div>

  • censhare Actions: Assign to (JS controller)

function controller($scope, application, csAssetWorkflowEditDialog, pageInstance) {
 
    $scope.assignTo = function () {
        if (application) {
            csAssetWorkflowEditDialog(pageInstance.getDialogManager(), application).then(
                function () {
                    var app = application.getValue();
                    if (angular.isFunction(app.methods.checkin)) {
                        app.methods.checkin();
                    }
                }
            );
        }
    };
 
}

This is how the widget looks like when added on a page:

Actions Widget

This is the dialog after the action button is clicked:

Actions Widget Dialog

Widget configuration

The Widget configuration for an action widget should be created using the following set up:

  • Workspace Widget (csActionsWidget):

<asset_feature feature="censhare:workspace.widget" value_string2="censhare:resource-key" value_asset_key_ref="censhare:workspace.widget.csActionsWidget"/>

  • Internal Workspace Configuration of that widget will look the one below:

<xmldata>
  <configuration templateKey="{resourceKey-of-template}"/>
</xmldata>

Full XML sample:

<?xml version="1.0" encoding="UTF-8" ?>
<asset name="{widget-name}" type="module.workspace.widget.config." application="metadata" domain="root."
domain2="root.">
  <asset_feature feature="censhare:resource-enabled" value_long="1"/>
  <asset_feature feature="censhare:resource-key" value_string="{resource-key}"/>
  <asset_feature feature="censhare:workspace.configuration">
    <xmldata>
      <configuration templateKey="{resourceKey-of-template}"/>
    </xmldata>
  </asset_feature>
  <asset_feature feature="censhare:workspace.widget" value_string2="censhare:resource-key" value_asset_key_ref="censhare:workspace.widget.csActionsWidget"/>
</asset>

Alternative configuration methods

Import widget configurations as System Module Assets

Developer Mode: Add Widget Type