Help with custom code

Ask us anything
1

Hey there!

I am trying to reproduce this: vis.js Network (Graph) - JSFiddle - Code Playground

For that, I am adding this to the my app’s custom code:

image
image1098×871 78.4 KB 

<script src="
https://cdn.jsdelivr.net/npm/vis-network@9.1.5/peer/umd/vis-network.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/vis-network@9.1.5/styles/vis-network.min.css
" rel="stylesheet">

<style>
#mynetwork {
    width: 500px;
    height: 350px;
    border: 1px solid lightgray;
}
</style>

<script>
// create an array with nodes
var nodes = new vis.DataSet([{
    id: 1,
    label: 'Node 1'
}, {
    id: 2,
    label: 'Node 2'
}, {
    id: 3,
    label: 'Node 3'
}, {
    id: 4,
    label: 'Node 4'
}, {
    id: 5,
    label: 'Node 5'
}]);

// create an array with edges
var edges = new vis.DataSet([{
    from: 1,
    to: 3
}, {
    from: 1,
    to: 2
}, {
    from: 2,
    to: 4
}, {
    from: 2,
    to: 5
}]);

// create a network
var container = wwLib.getFrontDocument().querySelector('#mynetwork')
// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};

var options = {
    layout: {
        randomSeed: undefined,
        improvedLayout: true,
        hierarchical: {
            enabled: true,
            levelSeparation: 180,
            direction: 'UD', // UD, DU, LR, RL
            sortMethod: 'directed' // hubsize, directed
        }
    }
}

// initialize your network!
var network = new vis.Network(container, data, options);
var nodeNo = 6;

wwLib.getFrontDocument().querySelector('#addnode').click(function () {
    nodes.add({
        id: nodeNo,
        label: "Node " + nodeNo
    });
    edges.add({
        id: nodeNo,
        from: 1,
        to: nodeNo
    });
    nodeNo++;
});
</script>

In the JS Fiddle they are using JQuery so I tried to account for that.
Using wwLib.getFrontDocument().querySelector('#mynetwork') doesn’t work, and in this case using document.getElementById('mynetwork') as well does not work.

Anyone know how I can make this work? Many thanks in advance!

2

It’s because when you execute the script the element does not exist in the page. Any script in the head that tries to access anything in the body right away will throw errors.
You need to wait for the element to exist.
It can be done in different way.
You can use a mutationObserver, this post has an example for a similar problem.

Another option is to execute the code in response to a user action, when you are sure the corresponding element is oresent in the page.

The best option is to use a custom component to integrate this logic.

On a side note, element.click() is different from the click method in jquery. The former is used to fire a click event, the latter is used to bind a event handler.

3

Thanks @dorilama ! By an initial flawed logic of mine though, placing my script into the body of WeWeb’s custom code area doesn’t do anything… I will investigate further. Cheers

4

it’s still the same problem, you can check the console and see the error.
The solutions are still the same I pointed out in the previous post (do notice that moving the script in the body is not in the list of solutions).

5

Got it to work, thanks a lot!
I used a workflow bound to a button to run the script.

runjs_capture

Very very cool - I won’t necessarily need to make custom components now! At least, for prototyping, this is very useful. Many thanks.

2 Likes
6

custom elements are about cleaner code and better developer experience. If you find yourself repeating the same hack many times a custom element can also save you time.

1 Like