SymbolPalette Search

[Tobias Koller]

hi,

I've added a textfield above the palette to search for items.

It should hide all items where ne name doesn't contain the text from the textfield.

I got it work but I used document.getElementById to archive this goal.

Is there a way to use the sdk instead of using the _container-id of the palette directly?

There is a visible-property on the node but how can I use it?

 function onPaletteSearchChanged(value:string|undefined){

      var searchValue = value?.toUpperCase() ?? "";

     

      var p = symbolPaletteRef.current.palettes[0];

      p.symbols?.map((s)=>{

        var name = (s.addInfo as IPaletteItem).functionName?.toUpperCase()??"";

        s.visible =  (name.indexOf(searchValue)!==-1);

        document.getElementById(`${s.id}_container`)!.style.display = s.visible? "block" : "none";

      })

     

    }

Best Regards

Tobias

[Aravind Ravi]

Hi Tobias, 

We have created a sample to search symbols in the symbol palette. By using the enableSearch property we can able to search symbols in the symbol palette. Set the enableSearch as true, so that text box gets rendered above symbol palette. In that text box you can search the symbols using their id. Please refer to the below code snippet and sample 

<SymbolPaletteComponent 

                id="symbolpalette" 

                expandMode="Multiple" 

                enableSearch={true} 

                palettes={[ 

                  { 

                    id: 'flow', 

                    expanded: true, 

                    symbols: flowshapes, 

                    iconCss: 'e-diagram-icons1 e-diagram-flow', 

                    title: 'Flow Shapes', 

                  }, 

                  { 

                    id: 'connectors', 

                    expanded: true, 

                    symbols: connectorSymbols, 

                    iconCss: 'e-diagram-icons1 e-diagram-connector', 

                    title: 'Connectors', 

                  }, 

                ]} 

                width={'100%'} 

                height={'700px'} 

                symbolHeight={60} 

                symbolWidth={60} 

                symbolMargin={{ left: 15, right: 15, top: 15, bottom: 15 }} 

                getSymbolInfo={(symbol) => { 

                  return { fit: true }; 

                }} 

              /> 

 

Sample: https://stackblitz.com/edit/react-3f9fun 

Regards 

Aravind Ravi 

[Tobias Koller]

hi Aravind,

thank you for your answer.

1. why is it searching by id?

the search should be customizable because most of the time you want to search by the text which is displayed to the user.

In one case it should search by annotation-text.

In my case I have my own model and would have to search by one of its properties.

2. when searching it opens a new result-section. It would be better if it would hide the items directly if the text doesn't match the search-value.

Here is a short example how I would like to search if i hav annotation text (text is not displayed in the nodes, don't know why).

But if you search for test, it will show you 2 items because both have this text as annotation-content.

update (correct link):

https://stackblitz.com/edit/react-3f9fun-xjaqut

Best Regards

[Aravind Ravi]

Hi Tobias, 

Please find the response for queries in the below table 

why is it searching by id?

By default, in the symbol palette, the enableSearch method is used to search the symbols by ID. Instead of using the annotation’s content, you can use the node’s addInfo property. By using the addInfo property of the node we can able to store the custom information in the node. So you can add your additional information in this addInfo property. By using the ‘FilterSymbols’ call back method you can search the symbols in a symbol palette. When you start to search in the symbol palette search box, this “FilterSymbols” call back function calls. In that method, by using a palette instance you can get the symbol you want to filter. By using that symbol properties e.g. if the searched word is “flowshape1” and then you want to display the “Terminator”  symbol means then in palette symbols, search the Symbol that has addInfo as “flowshape1” and return that symbol. So that the Terminator symbol gets displayed in the searched result. Please find the below code snippet for how to use filterSymbols method.  function filterSymbols():) {      let filterSymbols = [];      let text= (document.getElementById(        'textEnter'      ) .value;      if (text === 'flowshape1') {        for (let i = 0; i < this.symbolPalette.palettes.length; i++) {          for (            let j = 0;            j < this.symbolPalette.palettes[i].symbols.length;            j++          ) {            if (              this.symbolPalette.palettes[i].symbols[j].addInfo === 'flowshape1'            ) {              filterSymbols.push(this.symbolPalette.palettes[i].symbols[j]);            }          }        }      }      return filterSymbols;    }

when searching it opens a new result-section. It would be better if it would hide the items directly if the text doesn't match the search-value.

When we search any symbols in search box, it opens a new-result section. This is default behavior of symbol palette. We cannot able to hide the symbols inside symbol palette using visible property. After we drag the node in the diagram, we can able to hide it. But we cannot able to hide the symbols in symbol palette. If you want to hide the particular symbol means, you can get that element from DOM and set the style property as hidden.

Regards 

Aravind Ravi