How can I create a search engine in the main menu of the application?

Support
#1

I want to perform a search similar to the one in the image.

Imagen de WhatsApp 2023-10-25 a las 13.01.30_02450c0d

I have this in my drawerLayout, inside the main section.

            <div id="applicationTitlePlaceholder" classNames="jmix-main-view-title-holder"/>
            <textField id="searchField"
                       placeholder="msg://menu.search"
                       width="100%"
                       classNames="jmix-search-field"/>
            <nav id="navigation"
                 classNames="jmix-main-view-navigation"
                 ariaLabel="msg://navigation.ariaLabel">
                <listMenu id="menu"/>
            </nav>

This is my menu:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!--menu id="solicitudes" description="msg://com.lcsa.linceweb12/menu_config.solicitudes.description"
      title="msg://com.lcsa.linceweb12/menu_config.solicitudes.title">
</menu-->
<menu id="mantenimiento" description="msg://com.lcsa.linceweb12/menu_config.maintenance.description"
      title="msg://com.lcsa.linceweb12/menu_config.maintenance.title">
    <item view="lw_Tblempresas.list"
          title="msg://com.lcsa.linceweb12.view.tblempresas/tblempresasListView.title"/>
    <item view="lw_Tbllugares.list" title="msg://com.lcsa.linceweb12.view.tbllugares/tbllugaresListView.title"/>
    <item view="lw_Tblareas.list" title="msg://com.lcsa.linceweb12.view.tblareas/tblareasListView.title"/>
    <item view="lw_Tblsecciones.list"
          title="msg://com.lcsa.linceweb12.view.tblsecciones/tblseccionesListView.title"/>
    <item view="lw_Tblcentrocosto.list"
          title="msg://com.lcsa.linceweb12.view.tblcentrocosto/tblcentrocostoListView.title"/>
    <item view="lw_Tbljefaturas.list"
          title="msg://com.lcsa.linceweb12.view.tbljefaturas/tbljefaturasListView.title"/>
    <item view="lw_Tblconceptos.list"
          title="msg://com.lcsa.linceweb12.view.tblconceptos/tblconceptosListView.title"/>
    <item view="lw_Tblhorario.list" title="msg://com.lcsa.linceweb12.view.tblhorario/tblhorarioListView.title"/>
    <item view="lw_Tblgrupohorario.list"
          title="msg://com.lcsa.linceweb12.view.tblgrupohorario/tblgrupohorarioListView.title"/>
    <item view="lw_Tblpersonal.list"
          title="msg://com.lcsa.linceweb12.view.tblpersonal/tblpersonalListView.title"/>
    <!--    <item view="lw_Tbltiposempleado.list"
              title="msg://com.lcsa.linceweb12.view.tbltiposempleado/tbltiposempleadoListView.title"/>-->
    <item view="lw_Tblpersonalcontrato.list"
          title="msg://com.lcsa.linceweb12.view.tblpersonalcontrato/tblpersonalcontratoListView.title"/>
    <item view="lw_Tblpersonalsalida.list"
          title="msg://com.lcsa.linceweb12.view.tblpersonalsalida/tblpersonalsalidaListView.title"/>
</menu>

I am guided by the following repository on github: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/java/io/jmix/uisamples/view/sys/ main/MainView.java

But I have the following error
image

My code is the following i.e. the MainView.java:

My code is the same as the one found in the repository mentioned above. My MainView.Java is exactly the same, unlike the menu.xml. How could I complete the search engine or maybe there is another way to implement the search engine other than ?

#3

Hi!

The Jmix UI Samples application has a fully custom loading menu.

If you want to implement the same approach, you need to follow these steps:

  1. Define your custom menu scheme and implement it.
    Example: src/main/resources/io/jmix/uisamples/menu
  2. Implement the loader: io.jmix.uisamples.config.UiSamplesMenuConfig
  3. And after all, implement the search-field: io.jmix.uisamples.view.sys.main.MainView#initSideMenu

You can use standard flowui_MenuConfig as an example or extend it: io.jmix.flowui.menu.MenuConfig.
If you don’t want to extend the standard menu scheme and just want to embed a menu-search mechanism, you should implement menu loading in MainView based on the original MenuConfig.

The error you encountered is caused by the fact that the original MenuConfig returns root items of io.jmix.flowui.menu.MenuItem type.

Look at how the search works: io.jmix.uisamples.view.sys.main.MainView#search

  1. First, all menu items are removed.
  2. Then all possible menu items are loaded.
  3. Next are the menu items that match the search criteria (io.jmix.uisamples.view.sys.main.MainView#findItemsRecursively).
  4. For all found elements, the parent menu items are expanded.
  5. At the end, all unexpanded menu items are deleted: io.jmix.uisamples.view.sys.main.MainView#removeNotRequestedItems

I hope my answer will help you.

Regards,
Dmitriy

Search add-on in v 2.1
#4

We have a task to implement search in the main menu out-of-the-box:

There is a good chance it will appear in the Feb 2024 feature release.

1 Like