Barra de menú izquierda

🚧
Tu widget se inicializará en la barra de menú izquierda solo si creas una Integración pública.

Cuando construyes una integración, puedes añadir una nueva sección a la barra de menú izquierda o una subsección dentro de las secciones existentes de Estadísticas o Ajustes.

Para diferenciar tu integración de las secciones predeterminadas en el menú izquierdo, la sección que hayas añadido adoptará el diseño que se muestra en la pantalla.

Para añadir tu propia sección a la barra de menú izquierda, debes añadir el siguiente código al archivo manifest.json

{  
  ...

  "locations": [  
      "widget_page"  
  ],  
  "left_menu": {  
      "realty_widget_code": {  
          "title": "lang.code",  
          "icon": "images/home_page.svg",  
          "submenu": {  
              "sub_item_code_1": {  
                  "title": "lang.code", // código de idioma de la sección
                  "sort": 2  
              },  
              "sub_item_code_2": {  
                  "title": "lang.code",  
                  "sort": 1  
              }  
          }  
      }  
  },

  ...  
}

Como se muestra, necesitas añadir "widget_page" a la lista de ubicaciones del widget. Una vez hecho esto, aparecerá la propiedad "left_menu" junto con la clave "realty_widget_code", que es el código de la sección del menú izquierdo.

Por defecto, tu nueva sección se añadirá como el último ícono en el menú debajo de Ajustes, pero puedes cambiar su posición. En el ejemplo a continuación, se ha movido debajo de la sección Leads:

{
  ...
  "left_menu": {
       "realty_widget_code": {
            "title": "lang.code",
            "icon": "images/home_page.svg",
            "sort": {
                 "after": "leads"
            },
            "submenu": {
                "sub_item_code_1": {
                     "title": "lang.code"
                },
                "sub_item_code_2": {
                     "title": "lang.code"
                }
            }
       }
  }
  ...
}

Aquí tienes la lista de secciones que se pueden ingresar como valor de "after":

Panel
Leads
Tareas
Correo
Estadísticas
Ajustes

También puedes ocultar las secciones predeterminadas de la barra de menú del sistema, excepto Ajustes. Para hacerlo, utiliza este código en el manifest.json:

{
  ...
  "left_menu": {
      "stats": {
           "is_hidden": true
      },
      "mail": {
           "is_hidden": true
      }
  }
  ...
}

Lista de secciones de la barra de menú que se pueden ocultar:

Panel
Leads
Tareas
Correo
Estadísticas

Tu integración también puede colocarse como una subsección dentro de las secciones del sistema Estadísticas (Analítica) y Ajustes. Puedes gestionar el orden de las subsecciones utilizando la propiedad "sort". A continuación se muestra un ejemplo del código en manifest.json para añadir una nueva subsección a la sección de Estadísticas (Analítica):

{
  ...
  "left_menu": {
      "stats": {
           "submenu": {
               "custom_sub_item_1": {
                    "title": "lang.code"
               },
               "custom_sub_item_2": {
                    "title": "lang.code"
               }
           }
      }
   },
  ...
}

Para procesar los clics en las secciones de la barra de menú, se proporciona un callback especialinitMenuPage. Este callback recibe los siguientes tipos de objeto:

{
     "location": "widget_page", // "estadísticas" o "ajustes"
     "item_code": "custom_item_1", // solo en las secciones creadas en la barra de menú izquierda
     "subitem_code": "sub_item_1" // código de subsección
}

La propiedad "location" recibe el nombre de la entidad donde se encuentra la sección en la barra de menú. Como ya sabemos, la sección de la barra de menú también puede añadirse como una subsección a las secciones del sistema existentes.

Si el usuario entra en la subsección de la barra de menú, coloca el código de la sección del menú en "item_code" y el código de la subsección en "subitem_code".

Aquí tienes un ejemplo de la implementación del callback initMenuPage:

{ 
  this.callbacks = {
  /**
  * El método se activa cuando el usuario ingresa a la página del widget personalizado.
  * Tenemos que renderizar la página según su estado actual.
  *
  * @param {Object} params - Los parámetros del estado actual de la página:
  * @param {string} params.location - La ubicación actual (por ej.: 'widget-page', 'stats', 'settings')
  * @param {string} [params.item_code] - El código del elemento especificado en el manifest.json (por ej.: 'custom_item_1', solo para secciones personalizadas)
  * @param {string} [params.subitem_code] - El código del subelemento especificado en el manifest.json (por ej.: 'custom_sub_item_3', solo para subsecciones)
  */
  initMenuPage: _.bind(function (params) {
  switch (params.location) {
    case 'stats': // Para la sección 'stats', solo obtenemos el código del subelemento 
      switch (params.subitem_code) {
        case 'sub_item_1':
          self.getTemplate(
            'stats__sub_item_1',
            {},
            function (template) {
              $('#work-area-' + self.get_settings().widget_code).html('Analítica del elemento, subsección 1');
            });
          break;

        case 'sub_item_2':
          self.getTemplate(
            'stats__sub_item_2',
            {},
            function (template) {
              $('#work-area-' + self.get_settings().widget_code).html('Analítica del elemento, subsección 2');
            });
          break;
      }

      break;

    case 'settings': //Para la sección "ajustes", no se pasa ni item_code ni subitem_code
      // No se requiere un manejo específico para "ajustes"
      break;

    case 'widget_page': // Para las páginas de widgets personalizados, se utilizan tanto item_code como subitem_code
      switch (params.item_code) {
        case 'custom_item_3':
          switch (params.subitem_code) {
            case 'sub_item_1':
              self.getTemplate(
                'custom_item_3__sub_item_1',
                {},
                function (template) {
                  $('#work-area-' + self.get_settings().widget_code).html('Elemento 3, subsección 1');
                });
              break;

            //Gestionar otros subelementos para custom_item_3
          }

          break;

          // Gestionar otros elementos personalizados
      }

      break;
     }
    }, self),
  }
}