Elsa workflow designer + elsa workflow designer react wrapper integration with react base application/dashboard

[aabhi1989]

hello friends,
I am trying to integrate elsa-workflow-desigener into one of my react application, which will utilize the workflow environment of Elsa like creating activities and generating flow on elsa dashboard.

By default elsa has different frontend for designer screen(UI).
And I want that frontend to be shown into react based.
I don't know .Net but taking help of my colleague but not getting any helping documentation regarding this integration.

Please help with the link and suggestions.

[sfmskywalker]

@jdevillard did something for Angular (https://github.com/jdevillard/ElsaWorkflowDashboard-Angular) - I imagine a similar approach could be taken for react.

[jdevillard]

Hello ,

You also have a sample of React Application that use the React Wrapper for the designer.

https://github.com/elsa-workflows/elsa-core/tree/v3/src/designer/designer_packages/react-workspace

This wrapper is available for the v3 only, but regarding the code you should be able to do the same for v2 if needed.

[aabhi1989]

Hi,
Yes I am targeting v3 only, and tried integrate elsa-workflow-designer through installing these packages :
"dependencies": {
"@elsa-workflows/elsa-workflows-designer": "^3.0.3-preview.126",
"@elsa-workflows/elsa-workflows-designer-react-wrapper": "^3.0.3-preview.126",

from registry : @elsa-workflows:registry=https://f.feedz.io/elsa-workflows/elsa-3/npm/

**But I am getting some issue while creating new workflow, on replicating elsa-logo or replacing it.**
I am creating a component in which I am using elsa - shell like below 

const MyWorkflowDashboard = () => {
return (
<ElsaShell>
<ElsaWorkflowToolbar logo={myLogo}></ElsaWorkflowToolbar>
<div className="absolute inset-0" style={{ top: "64px" }}>
<ElsaStudio
serverUrl="https://elsaworkflow.politemeadow-4bb9da1c.westeurope.azurecontainerapps.io/elsa/api"
monacoLibPath="../monaco-editor/min"
/>
<elsa-custom-activities-manager></elsa-custom-activities-manager>
<ElsaNotificationsManager></ElsaNotificationsManager>
</div>
</ElsaShell>
);
};
export default MyWorkflowDashboard;

@sfmskywalker @jdevillard
Am I missing any package to install ? can you please suggest anything ?