I need to provide auto complete search functionality for parts in BPMN palette
As shown below when user types in this field the parts text matching the criteria should be visible and remaining parts should be filtered out.
Also once user done with typing and click on any time shown in dropdown it should highlight the corresponding part in the palette.
Is this feature available with gojs?If not any pointers on implementing this will help.
I think the only piece of that which is GoJS specific is how you deal with the Palette (or any Diagram, really).
First, initializing the list of choices:
Chance are that you only have Nodes in your Palette. (That would include Groups.) So you can find all of the nodes in your palette with: myPalette.nodes. You then need to extract the information (probably just a string) from each of those nodes. That piece of the task is completely app-specific.
Second filtering out all of the palette nodes that don’t meet some criteria:
This is a matter of setting visible on each node to true or false depending on whether they meet the selection criteria so far. Something like:
myPalette.startTransaction();
myPalette.nodes.each(function(n) { n.visible = meetsSearchCriteria(n); });
myPalette.commitTransaction("filtered");
You’d call this on each change to the textbox.
Thank you.
Is it possible to auto scroll to specific node in Palette. I tried node.scrollIntoView(true); but it didn’t work.
You’re thinking of Element.scrollIntoView() - Web APIs | MDN, but GraphObject does not inherit from [HTML]Element.
Call Diagram.scrollToRect or Diagram.centerRect. Or better yet, call CommandHandler.scrollToPart, CommandHandler | GoJS API, which does so with animation.