@mtolent/elsa-workflows-designer-angular-wrapper
v3.0.1
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
Downloads
10
Readme
elsa-workflows-designer-angular-wrapper
This library was generated with Angular CLI version 15.1.0.
This package is a wrapper of the @elsa-workflows/elsa-workflows-designer
v3. It allows you to embbed the designer in an Angular app and keep benefit of all the Angular features.
Usage
Import Package
use npm install @elsa-workflows/elsa-workflows-designer-angular-wrapper
to install the package.
you will also need @elsa-workflows/elsa-workflows-designer
as a depencency.
import module
first in your app.module.ts add the following line :
import { ComponentLibraryModule } from '@elsa-workflows/elsa-workflows-designer-angular-wrapper';
and import the module in your NgModule
:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ComponentLibraryModule
],
providers: [],
bootstrap: [AppComponent]
})
Use the component
If you want to display only the provider, you only need the elsa studio component with 2 properties :
server
: uri of the apimonaco-lib-path
: link to your monaco package (here we use the cdnjs url)
<elsa-studio server="https://localhost:7228/elsa/api"
monaco-lib-path="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min">
</elsa-studio>
due to some coupled part between components, for now (elsa designer 3.0.2-preview.64), we need to use some Dependency Injection and configure some other properties to be sure that all designer services works correctly.
So in your App Init
or Component Init
, you should declare some code :
Import the necessary services from the designer library
import { Container } from '@elsa-workflows/elsa-workflows-designer';
Configure the server settings :
let serverSettings = Container.get(ServerSettings);
serverSettings.baseAddress = "https://localhost:7228/elsa/api";
If you don't want to use the Login Page, you've to log yourself (or if your use your specific jwt token or security) :
To log in :
let loginApi = Container.get(LoginApi);
let loginResponse = await loginApi.login("admin","password");
to get the token response :
const accessToken = loginResponse.accessToken;
const refreshToken = loginResponse.refreshToken;
to signin (this kept information in browser session and emit signin event for other components) :
await authContext.signin(accessToken, refreshToken, true);
to be sure that every http call is using your authentication token :
const provider = Container.get(ElsaClientProvider);
const http = await provider.getHttpClient();
//Add Interceptor
http.interceptors.request.use(request=>{
const authContext = Container.get(AuthContext);
const token = authContext.getAccessToken();
if (!!token)
request.headers = {...request.headers, Authorization: `Bearer ${token}`};
return request;
})
Then you can load the available activities :
//refresh availables activities
let activityDescriptorManager = Container.get(ActivityDescriptorManager);
activityDescriptorManager.refresh();
and finally you can get the available workflow and load a workflow :
///get list
let workflowList = await (await this.worflowApi.list({versionOptions:{isLatest:true}})).items;
...
//get workflow definition using his Id :
let workflowApi = Container.get(WorkflowDefinitionsApi);
let workflow = await this.worflowApi.get({
definitionId : definitionId
});
//load workflow in the studio
let workflowDefinitionsPlugin = Container.get(WorkflowDefinitionsPlugin);
workflowDefinitionsPlugin.showWorkflowDefinitionEditor(workflow);