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 |
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
Code Block |
---|
language | text |
---|
title | .npmrc |
---|
collapse | true |
---|
|
registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual
_auth=<USERNAME:PASSWORD in base 64>
always-auth=true
email=<EMAIL>
@angular:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true
@angular-devkit:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true
@clr:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true
@material-extended:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true
@ng-select:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true
@ngx-translate:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true
@types:registry=https://repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:_password=<PASSWORD_BASE64>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:username=<USERNAME>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:email=<EMAIL>
//repository.searchtechnologies.com/artifactory/api/npm/npm-virtual/:always-auth=true |
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 (this will be the configuration dialog)
- 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 explain further in 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 | saga12new |
---|
showSpace | false |
---|
sort | modified |
---|
reverse | true |
---|
type | page |
---|
cql | label = "kb-how-to-article" and type = "page" and space = "saga12new" |
---|
labels | kb-how-to-article |
---|
|
...