How to import bpmn file from a directory in the page html?

Developers
1

well, the idea is to click the button to trigger a native javascript function “file dialog” and pass the file path to importDiagram function and then render the diagram on the html page, displaying it to the user. The question here, is that i can’t to open a file .bpmn in the example of the page bpmn.io.I can not open a bpmn file in the examples provided by the site. I do not master very well the language js.

2

How is this related to the bpmn.io project? What did you try already to achieve this?

3

I can not open a bpmn file with the examples that the bpmn.io site provides.

4

Please be more specific about what you are trying to achieve. What example(s) are you referring to? Feel free to share some code of what you are working on. This will make it easier for us to help you.

5

How to insert button for save and import diagrams in the script this code?

image

6

the code of the example up (image) is this:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <!-- required modeler styles -->
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@1.3.2/dist/assets/diagram-js.css">
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@1.3.2/dist/assets/bpmn-font/css/bpmn.css">

    <!-- modeler distro -->
    <script src="https://unpkg.com/bpmn-js@1.3.2/dist/bpmn-modeler.development.js"></script>

    <!-- needed for this example only -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

    <!-- example styles -->
    <style>
      html, body, #canvas {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      .diagram-note {
        background-color: rgba(66, 180, 21, 0.7);
        color: White;
        border-radius: 5px;
        font-family: Arial;
        font-size: 12px;
        padding: 5px;
        min-height: 16px;
        width: 50px;
        text-align: center;
      }

      .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
        stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
      }

      #save-button {
        position: fixed;
        bottom: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>

    <button id="save-button">print to console</button>

    <script>

      var diagramUrl = 'https://cdn.rawgit.com/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

      // modeler instance
      var bpmnModeler = new BpmnJS({
        container: '#canvas',
        keyboard: {
          bindTo: window
        }
      });

      /**
       * Save diagram contents and print them to the console.
       */
      function exportDiagram() {

        bpmnModeler.saveXML({ format: true }, function(err, xml) {

          if (err) {
            return console.error('could not save BPMN 2.0 diagram', err);
          }

          alert('Diagram exported. Check the developer tools!');

          console.log('DIAGRAM', xml);
        });
      }

      /**
       * Open diagram in our modeler instance.
       *
       * @param {String} bpmnXML diagram to display
       */
      function openDiagram(bpmnXML) {

        // import diagram
        bpmnModeler.importXML(bpmnXML, function(err) {

          if (err) {
            return console.error('could not import BPMN 2.0 diagram', err);
          }

          // access modeler components
          var canvas = bpmnModeler.get('canvas');
          var overlays = bpmnModeler.get('overlays');


          // zoom to fit full viewport
          canvas.zoom('fit-viewport');

          // attach an overlay to a node
          overlays.add('SCAN_OK', 'note', {
            position: {
              bottom: 0,
              right: 0
            },
            html: '<div class="diagram-note">Mixed up the labels?</div>'
          });

          // add marker
          canvas.addMarker('SCAN_OK', 'needs-discussion');
        });
      }


      // load external diagram file via AJAX and open it
      $.get(diagramUrl, openDiagram, 'text');

      // wire save button
      $('#save-button').click(exportDiagram);
    </script>
    <!--
      Thanks for trying out our BPMN toolkit!

      This example uses the pre-built distribution of the bpmn-js modeler.
      Consider rolling your own distribution to have more flexibility
      regarding which features to include.

      Checkout our advanced examples section to learn more:
      * https://github.com/bpmn-io/bpmn-js-examples#advanced

      To get a bit broader overview over how bpmn-js works,
      follow our walkthrough:
      * https://bpmn.io/toolkit/bpmn-js/walkthrough/

      Related starters:
      * https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/starter/viewer.html
    -->
  </body>
</html>
7

Adding buttons to a web page is not in the scope of bpmn.io. Please note that bpmn-js only is a library for embedding BPMN diagrams into a web page. You can use the importXML and saveXML for importing and exporting.

8

i wanted to put the my example equal the example this link https://demo.bpmn.io/new, but do not understand very the code this link, i say the code js. I want to import a file from of the directory and not of the a url. Do you understand?

9

Hi.i was going through this thread and i also want a functionality where users can load and save their work saved in .bpmn file extension as shown in the example https://demo.bpmn.io/ but currently i am unable to find this functionality in the bpmn-js-examples.
i want to it to be in simple js as i can convert it to angular

10

This functionality cannot be found in an example since it is outside of the scope of bpmn-js itself.

Also: Please do not necrobump old topics. Instead link to this thread from new topic.

11