Page History

This guide will help you create the Angular UI part of a built-in stage (recognizer or processor) which is called a "plugin" and is added to the "saga-plugin" angular library.

Before Start

Before Start

Get access to our NPM Repository by adding this configuration file into your user folder, just replace the fields insede <>, and remenber all the tokens and passwords are encoded in Base 64

Adding the Angular Library Step-by-step guide

1. Install angular-cli
   

   1. Code Block
      language text theme FadeToGrey
      npm i -g @angular/cli

2. Cd to saga-server/src/main/resources/webapp/projects/saga-plugin/src/lib
   1. Cd to either the processors or the recognizers folder, denpending of the type of component you want to build
      1. Recognizers for tags
      2. Processors for pipelines
3. Create a component

   1. Code Block
      language text theme FadeToGrey
      ng generate component --style=scss --skipTests=true --skipImport=true

4. Cd to <component-name> folder
5. Create a component (this will be the configuration dialog)
   1. The name must contain config-dialog at the end of the name

   2. Code Block
      language text theme FadeToGrey
      ng generate component --style=scss --skipTests=true --skipImport=true

   3. Info
      For implementation of the config dialog check out this page

6. Next open the file <component-name>-config-dialog.component.ts  
7. Extend the component with ConfigDialogBase (the implementation is explain further in further explained in the document)

   1. Code Block
      language text theme FadeToGrey
      export class ComponentNameConfigDialogComponent extends ConfigDialogBase implements OnInit {

8. Next go up one level and open the file <component-name>.component.ts  
9. Extend the component with the right abstract class (each type implementation is specified further in the document)
   :
   
   1. PluginComponent - used for plugins not containing a dictionary of patterns, for example the "Number" recognizer.
   2. PatternComponent - used for plugins that need to store a dictionary of patterns, for example "Entity", "Regex" or "Advanced" recognizers.
   3. PluginComponent
   4. PatternComponent
10. Open to projects/saga-plugin/src/lib/plugin.module.ts
    1. Import the components

    2. Code Block
       language js theme Eclipse
       import {<component-name>Component} from './<processors or recognizers>/<component-name>/<component-name>.component'; import {<component-name>ConfigDialogComponent} from './<processors or recognizers>/<component-name>/<component-name>-config-dialog/<component-name>-config-dialog.component';

    3. Add the main component into the array called components 

    4. Code Block
       language js theme Eclipse
       const components = [ RegexComponent, . . . <component-name>Component ];

    5. Add the config dialog component into the array called entryComponents 

    6. Code Block
       language js theme Eclipse
       const entryComponents = [ PatternActionsDialogComponent, EntityActionsDialogComponent, . . . <component-name>ConfigDialogComponent ];

Related articles

...