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

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
   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 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:
   
   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.
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

...