jsPlumb Tutorial: Add Diagramming Features to your Javascript Projects (Build a Workflow Editor)

Поділитися
Вставка
  • Опубліковано 15 вер 2024

КОМЕНТАРІ • 59

  • @TjSpoonManJacques
    @TjSpoonManJacques 3 роки тому +4

    Thank you for breaking this down to my level!!! much love from New Orleans!!!

  • @BlurryBit
    @BlurryBit 3 роки тому +5

    Very helpful. Keep up the good works. :)

  • @maxaquilino7264
    @maxaquilino7264 2 роки тому +2

    Excellent tutorial, well done!

  • @orhanraufakdemir900
    @orhanraufakdemir900 Рік тому +1

    thanks for the great video chief!

  • @montassar_akrmi
    @montassar_akrmi 3 роки тому +1

    you are a good guy 👌😊.

  • @tjtate9614
    @tjtate9614 Рік тому +1

    would love to see the future video of the simple workflow engine. does that exist? this is most helpful thanks

  • @lostdreamer3308
    @lostdreamer3308 3 роки тому +1

    Thank you so much

  • @wesleyd88
    @wesleyd88 2 роки тому +1

    Thank you so much. It helped a lot. You got a subscriber.
    I'm researching something about EditableFlowchart. I've been there for days, but the documentation still seems obscure to me. Any suggestion?
    2.xx Community

  • @aldolopez8483
    @aldolopez8483 2 роки тому +2

    Hi, thanks for the video. I tried to use the community version in vue js but couldn't integrate it. Can you give me a suggestion please?

  • @suleymanemiryavuzaslanoglu
    @suleymanemiryavuzaslanoglu 2 роки тому +1

    Thank you very much. It's very helpful video but i have a question. How do i smooth the corners in the diagram with a button?

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  2 роки тому +1

      Thanks!. The "control" is a HTML div so you can toggle the border-radius CSS attribute to turn rounded corners on and off.

  • @vineethakammarachedu4469
    @vineethakammarachedu4469 Рік тому +1

    i have used the same code given in the description, but i am not able to drag elements and connect them. can you help me why it is giving an error

  • @coffeecuppepsi
    @coffeecuppepsi Рік тому +1

    this is exactly what i needed. how easy is it to retrieve connections afterwards? i.e. click a button and have a report generated indicating where each connection is made...

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  Рік тому

      Hello, if you’re referring to JSON export, I think that’s a feature of the commercial edition.
      Have a look at my video on ANTV X6 for a similar library that has this feature built in.

    • @coffeecuppepsi
      @coffeecuppepsi Рік тому +1

      Thank you for reply. I'll check it out ☺️

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  Рік тому

      Let me know if that isn’t what you were looking for

  • @rahulnellepalli8406
    @rahulnellepalli8406 Рік тому +1

    dd.html:121 Uncaught ReferenceError: jsPlumb is not defined
    at dd.html:121:3
    im getting jsplumb not defined error while running your source code can u please help

  • @ibrahimqassem2254
    @ibrahimqassem2254 2 роки тому

    This is helpful , Thank you.

  • @anchalavinash66
    @anchalavinash66 2 роки тому +1

    Hi,
    I am using JSPlumb version 5 and trying to do:
    instance.addEndpoint(control1,
    {
    endpoint: 'Dot',
    containement: true,
    }
    )
    But it is not working. How to restrct node in that container for version 5?

  • @Omcsesz
    @Omcsesz 2 роки тому +1

    Can you please update the gist with the latest version of the code you created in the video?

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  2 роки тому +1

      I didn't realize it was different. Let me see whether I still have the version from the video.

  • @JohnSnow-gi7iv
    @JohnSnow-gi7iv 3 роки тому +1

    does it support integration with angular 11? i have updated my project from angular 6 to angular 11, now jsplumb is not working. jsplumb version 2.9.0

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  3 роки тому +1

      Hello, thanks for your question. I don't have enough background knowledge on angular to answer this.

  • @this.namanjain
    @this.namanjain 3 роки тому +1

    sir how to use jsplumb with angular12 ?
    as the jsplumb community version is under production mode for typescript as beta version so i am not able to understand the connectivity
    I am making SPA which use node connectivity which is similar to yours , so can you please help in this.
    thank you

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  3 роки тому +1

      Hello, thanks for the question. I think the simplest approach would be to write the functions that use jsPlumb in Javascript and then invoke them from Typescript.

    • @this.namanjain
      @this.namanjain 3 роки тому

      @@ProductivityforProgrammers thank you sir 👍

  • @monmon6356
    @monmon6356 2 роки тому +2

    Hi,can I know how to get the data that each node and the connection sequence data?

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  2 роки тому +1

      Hello, I don't think the community edition supports this out of the box. For nodes you can loop through all the node objects using jQuery and for connections you can use instance.getConnections()

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  Рік тому

      I just released another video on a similar library - ua-cam.com/video/EMtcA5z1fAg/v-deo.html
      This particular library supports JSON import/export out of the box.

  • @muhamadtaufan6901
    @muhamadtaufan6901 Рік тому +1

    What of the convert to PDf ? Please give me tutorial .. ;)

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  Рік тому

      Thanks for the question. Try exporting to svg and then using svg2pdf on the server. Let me know if that works for you.

  • @micaelagordillo4475
    @micaelagordillo4475 2 роки тому +1

    Is it possible to set the value of the conection?

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  2 роки тому

      If you mean "labels" look into using overlays:
      docs.jsplumbtoolkit.com/community-2.x/current/articles/overlays.html

  • @satrughnasethisattuk
    @satrughnasethisattuk 2 роки тому +1

    Are there any more videos for jsPlumb?

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  2 роки тому

      Not that I know of. Any topics that you would like covered?

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  Рік тому

      I just released another video on a similar library - ua-cam.com/video/EMtcA5z1fAg/v-deo.html

    • @satrughnasethisattuk
      @satrughnasethisattuk Рік тому

      @@ProductivityforProgrammers Could you please make some tutorials that show how to use templates, node factory, add/update connector labels... Thank you.

    • @satrughnasethisattuk
      @satrughnasethisattuk Рік тому

      @@ProductivityforProgrammers Could you please make a video for how to use undo/redo for nodes and connections

    • @ProductivityforProgrammers
      @ProductivityforProgrammers  Рік тому

      ​@@satrughnasethisattuk
      I haven't used that feature as it is part of the commercial edition.
      Are you already invested in using jsPlumb? If not, you might want to look at ANTV X6.
      ua-cam.com/video/EMtcA5z1fAg/v-deo.html
      The undo/redo functionality is described here:
      x6.antv.vision/en/docs/tutorial/basic/history

  • @harshavardhan-ry1he
    @harshavardhan-ry1he 3 роки тому +1

    How to learn jsplumb with react integration