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
Info |
---|
See how to connect to the npm repository by checking this link |
Adding the Angular Library Step-by-step guide
- Install angular-cli
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm i -g @angular/cli |
- Cd to saga-server/src/main/resources/webapp/projects/saga-plugin/src/lib
- Cd to either the processors or the recognizers folder, denpending of the type of component you want to build
- Recognizers for tags
- Processors for pipelines
- Create a component
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
ng generate component --style=scss --skipTests=true --skipImport=true |
- Cd to <component-name> folder
- Create a component
- The name must contain config-dialog at the end of the name
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
ng generate component --style=scss --skipTests=true --skipImport=true |
Info |
---|
For implementation of the config dialog check out this page |
- Next open the file <component-name>-config-dialog.component.ts
- Extend the component with ConfigDialogBase (the implementation is further explained in the document)
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
export class ComponentNameConfigDialogComponent extends ConfigDialogBase implements OnInit { |
- Next go up one level and open the file <component-name>.component.ts
- Extend the component with the right abstract class (each type implementation is specified further in the document)
:
- PluginComponent - used for plugins not containing a dictionary of patterns, for example the "Number" recognizer.
- PatternComponent - used for plugins that need to store a dictionary of patterns, for example "Entity", "Regex" or "Advanced" recognizers.
- PluginComponent
- PatternComponent
- Open to projects/saga-plugin/src/lib/plugin.module.ts
- Import the components
Code Block |
---|
|
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'; |
- Add the main component into the array called components
Code Block |
---|
|
const components = [
RegexComponent,
.
.
.
<component-name>Component
]; |
- Add the config dialog component into the array called entryComponents
Code Block |
---|
|
const entryComponents = [
PatternActionsDialogComponent,
EntityActionsDialogComponent,
.
.
.
<component-name>ConfigDialogComponent
]; |
Related articles
Content by Label |
---|
showLabels | false |
---|
max | 5 |
---|
spaces | saga131 |
---|
showSpace | false |
---|
sort | modified |
---|
reverse | true |
---|
type | page |
---|
cql | label = "kb-how-to-article" and type = "page" and space = "saga131" |
---|
labels | kb-how-to-article |
---|
|
...