Embedding workflow definition in angular app

[lemac1]

Is there any efficient way to embed workflow definition on angular app using Elsa 3.0-RC, for example similar to designer-host used in Elsa 2.0 (like presented here in well known sample: https://codesandbox.io/s/angular-elsa-designer-dkb4t?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.html ) or it is better to use lower-level component of elsa 3.0? It would be awesome if it would possible to embed workflow definition or instance in read-only mode out of the box.

[Gupta-Krishnaa]

Also, the top bar that shows Add Activity, Export, Import, New Workflow is not visible. Anyone looking into that ?

[sfmskywalker]

It should be possible, but I haven't spent any effort on this scenario yet, so it's possible there are some limitations in its current shape.

[Gupta-Krishnaa]

I did try to create an Angular 16 application using the code below as template for a component WorkflowDesignerComponent

  <wf-designer-host id="designerHost" canvas-height="300vh"
    plugins="PrimitiveActivities ControlFlowActivities EmailActivities HttpActivities ConsoleActivities MassTransitActivities TimerActivities"
    data-activity-definitions='[{"type": "Custom", "displayName": "Custom", "description": "Custom Activity", "category": "Custom", "designer": { "outcomes": ["Done"] }}]'
    data-workflow='{"activities":[{"id":"timer","top":108,"left":101,"type":"TimerEvent","state":{},"executed":true},{"id":"send-email","top":343,"left":591,"type":"SendEmail","state":{},"blocking":true},{"id":"if-else","top":92,"left":572,"type":"IfElse","state":{}},{"id":"log","top":169,"left":1020,"type":"Log","state":{},"faulted":true,"message":{"title":"Faulted","content":"This did work."}}],"connections":[{"sourceActivityId":"timer","destinationActivityId":"if-else","outcome":"Done"},{"sourceActivityId":"if-else","destinationActivityId":"send-email","outcome":"True"},{"sourceActivityId":"if-else","destinationActivityId":"log","outcome":"False"}]}'
    readonly="false">
  </wf-designer-host>

index.html:

    <script
      type="module"
      src="https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.61/dist/elsa-workflow-designer/elsa-workflow-designer.esm.js"
    ></script>
    <script
      nomodule=""
      src="https://unpkg.com/@elsa-workflows/elsa-workflow-designer@0.0.61/dist/elsa-workflow-designer/elsa-workflow-designer.js"
    ></script>

After that it loads as shown below (I dragged few activities):

Now, if you observe, I did not see the header shown like the screenshot here:

Am I missing anything here ? Also, can you please mention the how can we listen to events like activity-picked or edit-activity or export-workflow or import-workflow ? Can you please clarify ?

cc: @sfmskywalker @petedavis @lemac1 @noxe

[lemac1]

@Gupta-Krishnaa to be honest I'm trying to achive the same result but with elsa 3.0. I couldn't find component similiar to the wf-designer-host from previous versions, I was trying to achive this with elsa-workflow-definition-editor, populated with workflow-definition from endpoint but without success

      <elsa-workflow-definition-editor
      monaco-lib-path="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min"
      [workflow-definition]="workflowModel"
      (onWorkflowUpdated)="upd($event)"
      ></elsa-workflow-definition-editor>

cc: @sfmskywalker

[sfmskywalker]

I'm currently working on making the Elsa 3 designer re-hostable so that you can use it HTML, React, Angular, Vue, etc.

You can find an early example here: https://github.com/elsa-workflows/elsa-studio/tree/main/src/samples/react/workflow-definition-editor-sample/workflow-definition-editor-app