How to import bpmn file in the struct of the directory in the page html?

Developers
1

I are trying to render a modelo in the page html, but not can show it in the page.

bpmn2bpmn1

the script of the page:

  <script>
    var viewer = new BpmnJS({
      container: $('#js-canvas'),
      height: 600
    });

    function log(str) {
      var console = $('#js-console');
      console.val(console.val() + str + '\n');
    }

    function openFromUrl(url) {

      log('attempting to open <' + url + '>');

      $.ajax(url, { dataType : 'text' }).done(function(xml) {

        viewer.importXML(xml, function(err) {

          if (err) {
            log('error: ' + err.message);
            console.error(err);
          } else {
            viewer.get('canvas').zoom('fit-viewport');
            log('success');
          }
        });
      });
    }

    $('#js-open').click(function() {
      var url = $('#js-url').val();
      openFromUrl(url);
    });


    ///// auto open ?url=diagram-url ///////////////////////

    (function() {
      var str = window.location.search;
      var match = /(?:\&|\?)url=([^&]+)/.exec(str);

      if (match) {
        var url = decodeURIComponent(match[1]);
        $('#js-url').val(url);
        openFromUrl(url);
      }
    })();
  </script>

the html:

<div class="header">
    <h3>Open BPMN 2.0 diagram from URL</h3>
    <p>
      <input type="text" id="js-url" placeholder="path to diagram" /><button id="js-open">Open</button>
    </p>
    <p>
      <strong>Hint:</strong> try <code>https://cdn.rawgit.com/bpmn-io/bpmn-js-examples/dfceecba/url-viewer/resources/pizza-collaboration.bpmn</code></strong>
    </p>
  </div>

  <div class="canvas">
    <div id="js-canvas"></div>
  </div>

  <div class="console">
    <h3>Console</h3>
    <textarea id="js-console"></textarea>
  </div>
2

I assume you’re referring to the url viewer example which you can try in the browser. What is the error message (open console)?

3

it looks like it is giving some error to open the file being accessed by the url. Well, the message that appears to me is “attempting to open <>”.

4

What browser are you using? What changes did you make to the code?

5

i am using chrome, i want to import the diagram from a directory specific

6

Did you make any changes to the code? Otherwise this example is supposed to work.

7

i changed the code for try to open a file .bpmn of the a directory, but this example did not work.

8

I cannot reproduce this issue. Please try to debug the example and figure out what it is.