0

I am using cards to display diagrams. When page is load or reload diagram is displayed well, but when I use Faceted Search cards region is refreshed(without reload) and diagram doesn't fit in card.

Screenshots:

https://i.stack.imgur.com/1hO5A.png

enter image description here

Cards region query

select 
    ID,
    TITLE as CARD_TITLE,
    DIAGRAM,
    apex_page.get_url (
        p_page => 21,
        p_items => 'P21_ID', 
        p_values => "ID") as CARD_LINK,
    null as CARD_INITIALS,
    null as CARD_SUBTITLE,
    null as CARD_SUBTEXT,
    '<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <!-- viewer -->
            <script src="https://unpkg.com/bpmn-js@7.5.0/dist/bpmn-viewer.development.js"></script>
            <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
            <style>
                html, body{
                height: auto;
                padding: 0;
                margin: 0;
                }

                #canvas'|| id ||' {
                    height: auto;
                    padding: 0;
                    margin: 0;
                }
            </style>
        </head>
        <body>
            <div id="canvas'|| id ||'"></div>
            <script>
                var bpmnViewer = new BpmnJS({
                    container: "#canvas'|| id ||'"
                });
                async function openDiagram() {
                    try {
                        await bpmnViewer.importXML(`' || diagram || '`);
                        var canvas = bpmnViewer.get("canvas");
                        canvas.zoom("fit-viewport");
                    } catch (err) {
                        console.error("could not import BPMN 2.0 diagram", err);
                    }
                }
                openDiagram();
            </script>
        </body>
    </html>' as CARD_TEXT
  from DIAGRAM_TABLE

How can I display diagrams correctly in cards after region refresh?

Thanks in advance!

Jeffrey Kemp
  • 59,135
  • 14
  • 106
  • 158
Pav4
  • 1
  • 2
  • I don't think you can embed a whole HTML page like that within a card region and expect it to work perfectly. It's possible the web browser is trying to handle it as best it can but after a refresh I'm not surprised it gets mangled. – Jeffrey Kemp Apr 26 '21 at 02:59
  • You might get away with adding a separate call to `canvas.zoom("fit-viewport")` after region refresh but you'd need to work out how to grab the canvas object for each card. Alternatively, it might be feasible using an iframe but you'd have to test it to know - but to use an iframe you'd need to provide a source for the iframe (e.g. using a separate page process, or a webservice call, e.g. via ORDS). – Jeffrey Kemp Apr 26 '21 at 02:59
  • Thanks for response @JeffreyKemp. Is there another way except cards to display diagrams as small images? – Pav4 Apr 28 '21 at 17:11
  • You can show small images in any div that has width and/or height constraints, including cards and many other region types. In your case, however, your problem is that you're trying to embed a whole web page inside a div, and that won't work without an iframe. – Jeffrey Kemp Apr 28 '21 at 23:07
  • I tried with iframe like: `` but I got whole page in card. – Pav4 Apr 29 '21 at 05:47
  • the source of an iframe is loaded in a separate request, you can't just put the body content in like that. – Jeffrey Kemp Apr 29 '21 at 10:34

0 Answers0