etendosoftware · valeg-etendo · Apr 1, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026
diff --git a/...sets/user-guide/newui/how-to-guides/color-system/overview-color-badges-grid.png b/...sets/user-guide/newui/how-to-guides/color-system/overview-color-badges-grid.png
diff --git a/docs/assets/user-guide/newui/how-to-guides/color-system/step2-color-field-form.png b/docs/assets/user-guide/newui/how-to-guides/color-system/step2-color-field-form.png
diff --git a/...assets/user-guide/newui/how-to-guides/color-system/step3-colored-badge-grid.png b/...assets/user-guide/newui/how-to-guides/color-system/step3-colored-badge-grid.png
diff --git a/docs/developer-guide/etendo-classic/how-to-guides/how-to-configure-color-system.md b/docs/developer-guide/etendo-classic/how-to-guides/how-to-configure-color-system.md
@@ -0,0 +1,88 @@
+---
+tags:
+  - How to
+  - Color System
+  - UI
+  - Extensibility
+
+status: beta
+---
+
+# How to Configure Color System Support in the UI
+
+## Overview
+
+The color system in Etendo allows assigning visual identifiers (color badges) to records within a grid or form in the Workspace UI, enhancing the user experience by highlighting key information. This feature uses Etendo's extensibility system and can be applied without modifying the core codebase of the graphical interface.
+
+A common use case is applying it to master tables such as **Product Category** (`M_Product_Category`) or **Business Partner Group** (`C_BP_Group`), as these are frequently referenced in main grids like Products or Customers.
+
+## How the Color System Works
+
+For a color to appear in the UI, the field in the main table must reference a master table via a Foreign Key (**TableDir** or **Table** reference). The Workspace UI and Etendo coordinate through an interaction between the metadata and the React frontend:
+
+1. **Metadata injection**: the backend checks whether the data dictionary has the column configured with the **Color** reference type. If so, it injects `colorFieldName` into the graphical metadata to indicate the property name.
+2. **Frontend request**: the data-fetching hooks (Datasource) in Next.js evaluate each defined column. If a column specifies `colorFieldName` metadata, the frontend adds the dependency as `_extraProperties` to the API request (e.g., `_extraProperties=M_Product_Category_ID$EM_SMF_Color`), which instructs the backend to perform the corresponding JOINs and return the color value in the JSON response.
+3. **Interface rendering**: when processing cells, the frontend checks for the linked color property and renders a **Tag** badge using the hex value, calculating a text color with adequate contrast.
+
+This architecture ensures efficiency without modifying the standard payload. Color values update in real time in the **Form View**, the **Main Grid View**, and during **Inline Editing**.
+
+## Step-by-Step: Configuring Color in Product Category
+
+The following procedure uses `M_Product_Category` as an example.
+
+### 1. Add the Color Column in the Data Dictionary
+
+1. Access the Etendo ERP Classic environment with the **System Administrator** role.
+2. Navigate to the **Tables and Columns** window.
+3. Search for the master table — in this case, `M_Product_Category` (Product Category). This is the table **being referenced** by the foreign key (e.g., the table that other tables point to via `M_Product_Category_ID`). The color column must be added here, not in the referencing table.
+4. In the **Columns** tab, create a new column using the module prefix (e.g., `EM_CRM_Color` or `EM_SMF_Color`).
+5. Assign the **Color** reference type to the new column. This is the key step that allows the system to recognize the column's purpose.
+6. Set the length to 7 or 10 characters — sufficient to store a hex code such as `#FF0000`.
+
+!!! note
+    Using the **Color** reference type allows the backend to detect the column's purpose independently of its name, integrating it transparently into the metadata read by the frontend.
+
+### 2. Apply Database Changes and Show the Column
+
+1. Apply the changes by compiling the system:
+
+    ```bash title="Terminal"
+    ./gradlew smartbuild
+    ```
+
+2. Navigate to the **Window, Tab and Field** window in Etendo Classic.
+3. Search for the **Product Category** window.
+4. In the **Field** tab, check if the new column already appears. If it does not, use the **Create Fields from Application Dictionary** process (available in the tab toolbar) to synchronize the window fields with the updated column definition. This step makes the field visible in the Classic ERP interface.
+
+### 3. Verify the Configuration
+
+1. Open the **Product Category** window in Etendo Classic.
+2. Select an existing record (e.g., the category *Standard*).
+3. Enter a hex color value in the new field (e.g., `#8E44AD`) and save.
+4. Open the Workspace UI and navigate to the **Products** window (`M_Product`).
+5. In the products grid, locate the **Product Category** column (`M_Product_Category_ID`).
+
+If the configuration is correct, the **Product Category** value will be rendered as a colored **Tag** badge instead of plain text, using the hex color you assigned in the previous step. The badge will automatically calculate a contrasting text color for readability.
+
+!!! info
+    This behavior is module-agnostic and variable-agnostic. Any master table with a column configured with the **Color** reference type is automatically supported across grids and forms without additional development.
+
+## Scope and Restrictions
+
+### Affected Fields
+
+Color badge rendering applies only to **Foreign Key fields (TableDir / Table)** that reference a master table with a color column configured. Examples:
+
+- `M_Product_Category_ID` in the Products table — the reference used throughout this guide.
+- Any other foreign key column pointing to a master table that has a column with the **Color** reference type configured.
+
+### Fields Not Affected
+
+This feature does not affect:
+
+- Plain text fields (Strings).
+- Numeric, date, or boolean fields.
+- Static list dropdowns (*List* reference type) defined in Reference domains.
+
+---
+This work is licensed under :material-creative-commons: :fontawesome-brands-creative-commons-by: :fontawesome-brands-creative-commons-sa: [ CC BY-SA 2.5 ES](https://creativecommons.org/licenses/by-sa/2.5/es/){target="_blank"} by [Futit Services S.L](https://etendo.software){target="_blank"}.
diff --git a/...s/developer-guide/etendo-classic/how-to-guides/how-to-configure-color-system.md b/...s/developer-guide/etendo-classic/how-to-guides/how-to-configure-color-system.md
@@ -0,0 +1,89 @@
+---
+tags:
+  - How to
+  - Color System
+  - UI
+  - Extensibility
+
+status: beta
+---
+
+# Cómo configurar el soporte del sistema de color en la UI
+
+## Visión general
+
+El sistema de color en Etendo permite asignar identificadores visuales (etiquetas de color) a registros dentro de una rejilla o formulario en la UI de Workspace, mejorando la experiencia de usuario al resaltar información clave. Esta funcionalidad utiliza el sistema de extensibilidad de Etendo y puede aplicarse sin modificar el código base de la interfaz gráfica.
+
+Un caso de uso común es aplicarlo a tablas maestras como **Categoría de producto** (`M_Product_Category`) o **Oferta grupo terceros** (`C_BP_Group`), ya que se referencian con frecuencia en rejillas principales como Productos o Clientes.
+
+## Cómo funciona el sistema de color
+
+Para que un color aparezca en la UI, el campo en la tabla principal debe referenciar una tabla maestra mediante una clave foránea (referencia **TableDir** o **Tabla**). La UI de Workspace y Etendo se coordinan mediante una interacción entre los metadatos y el frontend en React:
+
+1. **Inyección de metadatos**: el backend comprueba si el diccionario de datos tiene la columna configurada con el tipo de referencia **Color**. Si es así, inyecta `colorFieldName` en los metadatos gráficos para indicar el nombre de la propiedad.
+2. **Petición del frontend**: los hooks de obtención de datos (Datasource) en Next.js evalúan cada columna definida. Si una columna especifica metadatos `colorFieldName`, el frontend añade la dependencia como `_extraProperties` a la petición de la API (p. ej., `_extraProperties=M_Product_Category_ID$EM_SMF_Color`), lo que indica al backend que realice los JOIN correspondientes y devuelva el valor de color en la respuesta JSON.
+3. **Renderizado de la interfaz**: al procesar las celdas, el frontend comprueba la propiedad de color enlazada y renderiza una insignia **Tag** usando el valor hex, calculando un color de texto con contraste adecuado.
+
+Esta arquitectura garantiza eficiencia sin modificar el payload estándar. Los valores de color se actualizan en tiempo real en la **Vista de formulario**, la **Vista principal de rejilla** y durante la **edición en línea**.
+
+## Paso a paso: configurar Color en Categoría de producto
+
+El siguiente procedimiento usa `M_Product_Category` como ejemplo.
+
+### 1. Añadir la columna Color en el diccionario de datos
+
+1. Accede al entorno Etendo ERP Classic con el rol **Administrador del sistema**.
+2. Navega a la ventana **Tablas y columnas**.
+3. Busca la tabla maestra — en este caso, `M_Product_Category` (Categoría de producto). Esta es la tabla que está **siendo referenciada** por la clave foránea (p. ej., la tabla a la que otras tablas apuntan mediante `M_Product_Category_ID`). La columna de color debe añadirse aquí, no en la tabla que referencia.
+4. En la pestaña **Columnas**, crea una nueva columna usando el prefijo del módulo (p. ej., `EM_CRM_Color` o `EM_SMF_Color`).
+5. Asigna el tipo de referencia **Color** a la nueva columna. Este es el paso clave que permite al sistema reconocer el propósito de la columna.
+6. Establece la longitud en 7 o 10 caracteres — suficiente para almacenar un código hex como `#FF0000`.
+
+!!! note
+    Usar el tipo de referencia **Color** permite al backend detectar el propósito de la columna independientemente de su nombre, integrándola de forma transparente en los metadatos leídos por el frontend.
+
+### 2. Aplicar cambios en base de datos y mostrar la columna
+
+1. Aplica los cambios compilando el sistema:
+
+    ```bash title="Terminal"
+    ./gradlew smartbuild
+    ```
+
+2. Navega a la ventana **Ventana, pestaña y campo** en Etendo Classic.
+3. Busca la ventana **Categoría de producto**.
+4. En la pestaña **Campo**, comprueba si la nueva columna ya aparece. Si no aparece, usa el proceso **Crear campos desde el Diccionario de Aplicación** (disponible en la barra de herramientas de la pestaña) para sincronizar los campos de la ventana con la definición de columna actualizada. Este paso hace que el campo sea visible en la interfaz del ERP Classic.
+
+### 3. Verificar la configuración
+
+1. Abre la ventana **Categoría de producto** en Etendo Classic.
+2. Selecciona un registro existente (p. ej., la categoría *Standard*).
+3. Introduce un valor de color hex en el nuevo campo (p. ej., `#8E44AD`) y guarda.
+4. Abre la UI de Workspace y navega a la ventana **Productos** (`M_Product`).
+5. En la rejilla de productos, localiza la columna **Categoría de producto** (`M_Product_Category_ID`).
+
+Si la configuración es correcta, el valor de **Categoría de producto** se renderizará como una insignia **Tag** coloreada en lugar de texto plano, usando el color hex que asignaste en el paso anterior. La insignia calculará automáticamente un color de texto con contraste para mejorar la legibilidad.
+
+!!! info
+    Este comportamiento es agnóstico al módulo y agnóstico a la variable. Cualquier tabla maestra con una columna configurada con el tipo de referencia **Color** se soporta automáticamente en rejillas y formularios sin desarrollo adicional.
+
+## Alcance y restricciones
+
+### Campos afectados
+
+El renderizado de insignias de color se aplica solo a **campos de clave foránea (TableDir / Tabla)** que referencian una tabla maestra con una columna de color configurada. Ejemplos:
+
+- `M_Product_Category_ID` en la tabla Productos — la referencia usada a lo largo de esta guía.
+- Cualquier otra columna de clave foránea que apunte a una tabla maestra que tenga una columna configurada con el tipo de referencia **Color**.
+
+### Campos no afectados
+
+Esta funcionalidad no afecta a:
+
+- Campos de texto plano (Strings).
+- Campos numéricos, de fecha o booleanos.
+- Desplegables de lista estática (tipo de referencia *List*) definidos en dominios de referencia.
+
+---
+This work is licensed under :material-creative-commons: :fontawesome-brands-creative-commons-by: :fontawesome-brands-creative-commons-sa: [ CC BY-SA 2.5 ES](https://creativecommons.org/licenses/by-sa/2.5/es/){target="_blank"} by [Futit Services S.L](https://etendo.software){target="_blank"}.
+---
diff --git a/docs/es/user-guide/new-ui/how-to-guides/how-to-configure-color-system.md b/docs/es/user-guide/new-ui/how-to-guides/how-to-configure-color-system.md
@@ -0,0 +1,62 @@
+---
+tags:
+  - How to
+  - Color System
+  - UI
+
+status: new
+---
+
+# Cómo Usar el Sistema de Colores en Workspace UI
+
+## Visión General
+
+El sistema de colores permite asignar una pastilla de color visual a los registros en una ventana maestra. Una vez asignado un color, cada grilla en Workspace UI que referencie esa ventana mostrará automáticamente una etiqueta coloreada en lugar de texto plano, facilitando el escaneo e identificación de registros de un vistazo.
+
+![Visión general de pastillas de color en una grilla](../../../assets/user-guide/newui/how-to-guides/color-system/overview-color-badges-grid.png)
+
+!!! info "Prerequisite"
+    Un desarrollador debe configurar primero la columna **Color** en el diccionario de datos para la ventana maestra. Si el campo de color no es visible en el formulario, contacta con tu administrador del sistema o sigue la [developer guide](../../../developer-guide/etendo-classic/how-to-guides/how-to-configure-color-system.md).
+
+---
+
+## Step 1 — Open the Master Record
+
+1. Inicia sesión en **Etendo Classic** con un rol que tenga acceso a la ventana maestra.
+2. Navega a la ventana maestra configurada con una columna de color.
+3. Abre un registro existente o crea uno nuevo.
+
+---
+
+## Step 2 — Assign a Color
+
+1. Localiza el campo **Color** en el formulario. Acepta un código de color hexadecimal (por ejemplo, `#8E44AD`).
+2. Introduce directamente el valor hexadecimal deseado o utiliza el selector de color si está disponible.
+3. Haz clic en **Save**.
+
+![Campo Color en el formulario con un valor hexadecimal introducido](../../../assets/user-guide/newui/how-to-guides/color-system/step2-color-field-form.png)
+
+!!! tip
+    La UI calcula automáticamente un color de texto con contraste, pero elegir un color de rango medio (ni demasiado claro ni demasiado oscuro) ofrece el mejor resultado visual.
+
+---
+
+## Step 3 — Verify the Color Badge in Workspace UI
+
+1. Abre **Workspace UI** (el frontend de Next.js).
+2. Navega a la ventana que contiene una columna de clave foránea que referencia la ventana maestra.
+3. En la grilla, localiza la columna que apunta a la ventana maestra.
+
+El valor ahora aparece como una **pastilla de color** en lugar de texto plano, reflejando el color hexadecimal que asignaste.
+
+![Grilla mostrando una pastilla de color en la columna referenciada](../../../assets/user-guide/newui/how-to-guides/color-system/step3-colored-badge-grid.png)
+
+---
+
+## Changing or Removing a Color
+
+- Para **change** el color: abre el registro maestro, introduce un nuevo valor hexadecimal y guarda.
+- Para **remove** el color: limpia el campo de color y guarda. La columna volverá a mostrarse como texto plano en todas las grillas.
+
+---
+This work is licensed under :material-creative-commons: :fontawesome-brands-creative-commons-by: :fontawesome-brands-creative-commons-sa: [ CC BY-SA 2.5 ES](https://creativecommons.org/licenses/by-sa/2.5/es/){target="_blank"} by [Futit Services S.L](https://etendo.software){target="_blank"}.
diff --git a/docs/user-guide/new-ui/how-to-guides/how-to-configure-color-system.md b/docs/user-guide/new-ui/how-to-guides/how-to-configure-color-system.md
@@ -0,0 +1,63 @@
+---
+tags:
+  - How to
+  - Color System
+  - UI
+
+status: new
+---
+
+# How to Use the Color System in Workspace UI
+
+## Overview
+
+The color system lets you assign a visual color badge to records in a master window. Once a color is assigned, every grid in Workspace UI that references that window will automatically display a colored tag instead of plain text — making it easier to scan and identify records at a glance.
+
+![Overview of color badges in a grid](../../../assets/user-guide/newui/how-to-guides/color-system/overview-color-badges-grid.png)
+
+!!! info "Prerequisite"
+    A developer must first configure the **Color** column in the data dictionary for the master window. If the color field is not visible in the form, contact your system administrator or follow the [developer guide](../../../developer-guide/etendo-classic/how-to-guides/how-to-configure-color-system.md).
+
+---
+
+## Step 1 — Open the Master Record
+
+1. Log in to **Etendo Classic** with a role that has access to the master window.
+2. Navigate to the master window configured with a color column.
+3. Open an existing record or create a new one.
+
+
+---
+
+## Step 2 — Assign a Color
+
+1. Locate the **Color** field in the form. It accepts a hexadecimal color code (e.g., `#8E44AD`).
+2. Enter the desired hex color value directly, or use the color picker if available.
+3. Click **Save**.
+
+![Color field in the form with a hex value entered](../../../assets/user-guide/newui/how-to-guides/color-system/step2-color-field-form.png)
+
+!!! tip
+    The UI calculates a contrasting text color automatically, but choosing a mid-range color (not too light, not too dark) gives the best visual result.
+
+---
+
+## Step 3 — Verify the Color Badge in Workspace UI
+
+1. Open **Workspace UI** (the Next.js frontend).
+2. Navigate to the window that contains a foreign key column referencing the master window.
+3. In the grid, locate the column that points to the master window.
+
+The value now appears as a **colored badge** instead of plain text, reflecting the hex color you assigned.
+
+![Grid showing a colored badge in the referencing column](../../../assets/user-guide/newui/how-to-guides/color-system/step3-colored-badge-grid.png)
+
+---
+
+## Changing or Removing a Color
+
+- To **change** the color: open the master record, enter a new hex value, and save.
+- To **remove** the color: clear the color field and save. The column will revert to plain text in all grids.
+
+---
+This work is licensed under :material-creative-commons: :fontawesome-brands-creative-commons-by: :fontawesome-brands-creative-commons-sa: [ CC BY-SA 2.5 ES](https://creativecommons.org/licenses/by-sa/2.5/es/){target="_blank"} by [Futit Services S.L](https://etendo.software){target="_blank"}.