Library not working as standalone about elsa-designer HOT 9 CLOSED

Hi @tlayton , just so I understand what you're trying to do: are you trying to create a new project and use the designer component library from that project? If so, what kind of project is this? E.g. is it a StencilJS application, or HTML + vanilla JS, or ReactJS, etc.

Regardless, I agree additional documentation is necessary. We should add setup guides for at least using the library in vanilla JS apps, React & Angular apps and Stencil apps.

from elsa-designer.

Hi @sfmskywalker, thanks for responding! I have been trying to do it in a Stencil app, I followed the instructions on Stencil's page (have never used it before) but getting errors like "'stencil' is not recognized as an internal or external command" when trying to run directly and other dependency errors when trying to add the repo code to a stencil project created through the stencil npm. Really just looking for a very simple step by step list of instructions on how to install the entire environment on a fresh PC please?

from elsa-designer.

OK. So are you having issues setting up a StencilJS project, even before adding the Elsa Designer component library? Or after adding Elsa to packages.json?

from elsa-designer.

@sfmskywalker No the default Stencil app runs fine, it's only once I add the Elsa code. I have been copy/pasting the code in though, like I said I'm a complete Stencil beginner. If there is a specific config I am supposed to be setting in the packages.json it would be awesome to know what that looks like!

from elsa-designer.

OK. I just went through the process myself, and me too am having troubles making it work with a new stencil app, so this is something I need to investigate further.

However, one option that will work is doing the following:

1. In your own StencilJS app, open index.html and add the following styles and scripts in the section (before the script tag referencing "/build/app.esm.js"):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
        integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous"/>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"></script>
  <script src='https://unpkg.com/@elsa-workflows/[email protected]/dist/elsa-workflow-designer.js'></script>

2. Update both app-root.tsx and app-home.tsx by setting their shadow component properties to false - this will allow the included Bootstrap styles to be applied to the workflow designer component you will add next:

3. Update app-home.tsx by replacing the component markup with the following:

render() {
  return (
    <div class='app-home'>

      <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":137,"left":1171,"type":"TimerEvent","state":{}, "executed":true},{"id":"send-email","top":641,"left":993,"type":"SendEmail","state":{}, "blocking":true},{"id":"if-else","top":378,"left":1139,"type":"IfElse","state":{}},{"id":"log","top":644,"left":1438,"type":"Log","state":{}, "faulted":true, "message":{"title":"Faulted","content":"This didnt 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>
    </div>
  );
}

When you now run the project (npm run start), you should see something like this:

Here's a working example:
stencil-elsa-demo.zip

After unzipping the package, make sure to first run npm install from the root directory so that Stencil and its dependencies are restored. After that, do npm run start.

Just to be clear, this is not the worklow I intend for developers to use the workflow designer when using it in their own Stencil apps, so I will look into this further.

from elsa-designer.

@sfmskywalker That works! Thanks man, you're a legend! I will keep an eye out for the next version :)

from elsa-designer.

Great! :)

from elsa-designer.

I got this to work with an empty project using the head tags you specified above.
looks great.
the documentation mentioned 0.0.10, and no additional scripts/css.
where do I ask questions :) ?

from elsa-designer.

@gabi-lee feel free to ask questions here on GitHub by creating new issues, or on gitter.

from elsa-designer.