Item actions
StructPIM allows you to implement your own actions to perform on items in a search, also called item actions
Whare are multi item actions
When users search products or variants in StructPIM and select one or more of these, the action menu appears. In the action menu a list of actions are available to the user. StructPIM provides a range of actions, suitable for almost all use cases. If you do have a custom action you want your users to be able to perform when selecting products and/or variants, you can implement your own item action
Implementing a custom item action
In order to implement a custom multi item action, you need to create your own App_Plugin in your Umbraco project with StructPIM installed. In this app plugin you need to create a class, implementing the IItemAction interface. You also need to create an angular directive containing the frontend logic for your action. Lastly, you need a packages.manifest file, to tell Umbraco to load your angular directive
An example implementation would have the following file structure:
An example implementation of each file could look like this:
//CustomAction.cs
public class CustomAction : IItemAction
{
public string ActionName => "Custom action name";
public string DirectiveName => "customaction";
public List<string> ItemTypes => new List<string> { "VariantItemType", "ProductItemType" };
}
In the IItemAction implementation you specify a name for the action, the name of your directive and which item types your action shall be available for
//customAction.js
angular.module("customaction", [])
.directive("customaction", [
"umbracoHelper", function (umbracoHelper) {
return {
restrict: "E",
templateUrl: '/App_Plugins/CustomPlugin/scripts/directives/customaction.html',
link: function (scope, element, attrs, modelCtrl) {
console.log("custom logic here...");
console.log(scope.model.selectedItemIds);
console.log(scope.model.currentItemType);
scope.close = function () {
scope.model.close();
};
scope.doWhateverThing = function () {
scope.model.submit();
}
}
}
}
])
var app = angular.module("umbraco");
app.requires.push("customaction");<!-- customAction.html -->
<div class="umb-overlay__form" name="overlayForm" novalidate>
<div class="umb-overlay-header">
<h4 class="umb-overlay__title">Custom action headline</h4>
<p class="umb-overlay__subtitle">
Custom action description
</p>
</div>
<div class="umb-overlay-container form-horizontal">
<h3>{{model.currentItemType}}</h3>
<div ng-repeat="item in model.selectedItemIds">{{item}}</div>
</div>
<div class="umb-overlay-drawer">
<div>
<div class="umb-overlay-drawer__align-right">
<umb-button action="close()"
shortcut="esc"
button-style="link"
label="Cancel"
type="button">
</umb-button>
<button class="btn btn-success" ng-click="doWhateverThing()">Submit</button>
</div>
</div>
</div>
</div>
The angular directive is passed a model containing all the selected items as well as the type of those items. The directive is rendered in an Umbraco dialog opened in the right side of the browser window just like with the actions built into StructPIM. From here you can do anything you want with these items. When you call the model.close() function, your dialog is closed, and the selected items remain selected in the search table. When you call the model.submit() function, the dialog is closed and the selection is reset.
The package.manifest file looks like this:
{
javascript: [
"~/App_Plugins/CustomPlugin/scripts/directives/customAction.js"
],
css: [
]
}
If you implement the above example, you will see your new item action appearing, when selecting items in a search and opening the actions menu.
And when you click your custom action, your directive is rendered in a dialog
