28
Views
5
Comments
Solved
How do I implement click event of Cytoscape.js with JS widget?
Application Type
Reactive

I just implemented a sample app with Cytoscape.js in my Outsystems.

https://tsubasa-yoshikawa.outsystemscloud.com/Cytoscape/diagram?_ts=637929135582616978


What I want to do is

When you put in a Node name in Input widget and click "Search",  it zooms in the Node.

Also this is my Demo page of Cytoscape. If you do what I said above on Demo, you can get what I mean.

https://basatsu.github.io/Cytoscape/cyto2.html?#


However, I can't implement this click function in javascript on Outsystems.


I tried this code in below JS widget (SearchFunction) but it doesn't work. I'm stuck here.


BTW, This is the code I uploaded in my Github. If you go into details, I'd like you to take a look.

https://github.com/basatsu/Cytoscape

https://github.com/basatsu/Cytoscape/blob/main/js/cyto2.js

Like my Javascript (cyto2.js), I embedded this Javascript code into SearcFunction JS widget.


Do you have any solutions to make this click function work?  

I was wondering if you could give me some advice.

Please see attached about my Cytoscape sample app of Outsystems.


Best,



Cytoscape.oml
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Tsubasa, 

I didn't encounter the observed exception, probably it might be because of the data. 

Can you try publishing the attached oml and check the same?


Kind regards,

Benjith Sam

Cytoscape.oml
2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Tsubasa,

In addition to the solution which we lastly discussed in this post: Cytoscape Diagram

Add the below JS on search button click:

var j = cy.$('#' + $parameters.SearchNode);

cy.animate({
    fit: {
        eles: j,
        padding: 20
    },
    zoom: 1.2
}, {
    duration: 2000,
});

Also keep the cy object global scoped.

See this demo screen:  Cytoscape Diagram

Refer to the attached oml.


I hope this helps you!


Kind regards,

Benjith Sam

Cytoscape.oml
UserImage.jpg
Tsubasa Yoshikawa

Thanks.

But, I downloaded your attached oml then uploaded it in my service studio.

The conflict happened so I selected "overwrite my version" then I opened in browser.

I got this error. it keeps happening.

Why does this happen? 


AAA2W02 should not exist in any entities.  I changed all data in ItemList,Item2List,Connect entity.



Does this look familiar?

Best,

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Tsubasa, 

I didn't encounter the observed exception, probably it might be because of the data. 

Can you try publishing the attached oml and check the same?


Kind regards,

Benjith Sam

Cytoscape.oml
UserImage.jpg
Tsubasa Yoshikawa

I looked into it. I wonder if there is a problem about the timing and GetItemListJson and OnRender action....

UserImage.jpg
Tsubasa Yoshikawa

Sorry, I made a mistake. 

I got what I wanted.


Appreciated!

I'll close this post.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.