Toolkit42 Suite: Custom Action für Action Designer erstellen

In dieser Anleitung wird erklärt, wie Sie eine Cutom-Action für den Action Designer im Toolki42 erstellen.
Dabei haben Sie einmal die Möglichkeit die Custom-Action mit TypeScript oder mit reinem JavaScript zu erstellen.

Custom Action mit TypeScript erstellen

1. Legen Sie eine neue JavaScript Datei an und geben Sie ihr einen eindeutigen Namen (Der Name entspricht der ID der Action)
2. Laden Sie sich folgende Definition herunter: Type-Script-Definition-T42
3. Verwenden Sie folgende Vorlage:

   
   

   class T42ExampleAction extends T42.ActionDesigner.Action {
       public constructor(dataItem?) {
           super();
           this.setup(dataItem);
       }
       getId(): string {
           return "T42ExampleAction";
       }
       getCategory() {
           return "Default";
       }
       defaultConfiguration = { name: "Sample", description: "Sample", iconUrl: "" };
       run(configuration: any, context: any): JQueryPromise<T42.ActionDesigner.IActionReturnValue> {
           var dfd = $.Deferred();
           var retValue = true;
           dfd.resolve({ returnStatus: retValue });
           return dfd.promise();
       }
       getConfigurationShema() {
           return {
               "type": "object",
               "title": this.defaultConfiguration.name,
               "properties": {
                   "sample": {
                       "type": "string"
                   }
               }
           }
       }
   }
   T42.ActionDesigner.View.registerAction(new T42ExampleAction());

    

4. Ersetzen Sie den Name "T42ExampleAction" durch Ihren Action-Name. Achtung dieser muss der Datei-Name der JS sein. in unserem Fall "T42ExampleAction.js"

5. Ersetzen Sie die Werte im "defaultConfiguration" Objekt

   1. Die können als iconUrl eine Url zu einem Bild innerhalb der SharePoint Website eingeben oder einen base65 String angeben:

      data:image/png;base64

6.  Die Konfiguration Ihrer Action definieren Sie über den JSON Schema Version 4 (https://github.com/jdorn/json-editor) in der Methode "getConfigurationShema".

7. Die "run" Methode wird zum Starten der Action verwendet. Dabei können Sie über den Parameter "configuration" auf die abgespeicherten Werte zurückgreifen. Im context Parameter stehen Ihnen die Context-Informationen und Variablen zur Verfügung.

   1. Bitte beachten Sie, dass die run Action immer ein jQuery deferred Objekt zurückgibt (https://api.jquery.com/category/deferred-object/)

   2. Sie haben vollen Zugriff auf folgende JS Bibliotheken:

      1. SharePoint ClientContext: https://msdn.microsoft.com/de-de/library/office/jj245759.aspx

      2. jQuery: https://jquery.com/

      3. Kendo UI: http://www.telerik.com/kendo-ui  

8. Lassen Sie sich eine JS Datei gennerieren und kopieren Sie Ihre JS Datei in folgendes Verzeichnis {SharePointWebsiteUrl}/T42Files -> ActionDesigner/Actions

9. Danach stehen Ihnen die Actions im ActionDesigner zur Konfiguration und Ausführung zur Verfügung (Die Action werden im Formular nur geladen, wenn sie benötigt werden)

Custom Action mit JavaScript erstellen

1. Legen Sie eine neue JavaScript Datei an und geben Sie ihr einen eindeutigen Namen (Der Name entspricht der ID der Action)
2. Verwenden Sie folgende Vorlage:

   
   

   var __extends = (this && this.__extends) || function (d, b) {
       for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
       function __() { this.constructor = d; }
       d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
   var T42ExampleAction = (function (_super) {
       __extends(T42ExampleAction, _super);
       function T42ExampleAction(dataItem) {
           _super.call(this);
           this.defaultConfiguration = {
               name: "Sample T42 App",
               author: "sharepoint-templates.com",
               description: "Sample T42 App",
               iconUrl: ""
               };
           this.setup(dataItem);
       }
       T42ExampleAction.prototype.getId = function () {
           return "T42ExampleAction";
       };
       T42ExampleAction.prototype.getCategory = function () {
           return "Default";
       };
       T42ExampleAction.prototype.run = function (configuration, context) {
           var dfd = $.Deferred();
           var retValue = true;
          
   var sampleConfiguration = configuration.sample;
           dfd.resolve({ returnStatus: true });
          
           return dfd.promise();
       };
       T42ExampleAction.prototype.getConfigurationShema = function () {
           return {
               "type": "object",
               "title": this.defaultConfiguration.name,
               "properties": {
                  "sample": {
                       "title": "Sample:",
                       "type": "string"
                   }
               }
           };
       };
       return T42ExampleAction;
   }(T42.ActionDesigner.Action));
   T42.ActionDesigner.View.registerAction(new T42ExampleAction());

    

3. Ersetzen Sie den Name "T42ExampleAction" durch Ihren Action-Name. Achtung dieser muss der Datei-Name der JS sein. in unserem Fall "T42ExampleAction.js"

4. Ersetzen Sie die Werte im "defaultConfiguration" Objekt

   1. Die können als iconUrl eine Url zu einem Bild innerhalb der SharePoint Website eingeben oder einen base65 String angeben:

      data:image/png;base64

5.  Die Konfiguration Ihrer Action definieren Sie über den JSON Schema Version 4 (https://github.com/jdorn/json-editor) in der Methode "getConfigurationShema".

6. Die "run" Methode wird zum Starten der Action verwendet. Dabei können Sie über den Parameter "configuration" auf die abgespeicherten Werte zurückgreifen. Im context Parameter stehen Ihnen die Context-Informationen und Variablen zur Verfügung.

   1. Bitte beachten Sie, dass die run Action immer ein jQuery deferred Objekt zurückgibt (https://api.jquery.com/category/deferred-object/)

   2. Sie haben vollen Zugriff auf folgende JS Bibliotheken:

      1. SharePoint ClientContext: https://msdn.microsoft.com/de-de/library/office/jj245759.aspx

      2. jQuery: https://jquery.com/

      3. Kendo UI: http://www.telerik.com/kendo-ui  

7. Kopieren Sie Ihre JS Datei in folgendes Verzeichnis {SharePointWebsiteUrl}/T42Files -> ActionDesigner/Actions

8. Danach stehen Ihnen die Actions im ActionDesigner zur Konfiguration und Ausführung zur Verfügung (Die Action werden im Formular nur geladen, wenn sie benötigt werden)