¡Saludos a todos los apasionados del desarrollo y la programación!

Si eres un entusiasta de Business Central, estás a punto de descubrir un mundo de posibilidades emocionantes. En este artículo, nos sumergiremos en la fascinante creación de «ControlAddIns» y cómo pueden convertir tus desarrollos en auténticas maravillas visuales y funcionales.

ControlAddIns: Abriendo Nuevas Fronteras en Business Central

Antes de adentrarnos en los detalles, es crucial entender qué es exactamente un «ControlAddIn» en el contexto de Microsoft Business Central. Un ControlAddIn es una herramienta poderosa que te permite integrar componentes web en tus aplicaciones Business Central.

¿Qué significa eso? Puedes combinar la potencia de JavaScript, CSS y HTML para construir experiencias personalizadas y enriquecedoras directamente dentro de tu entorno de desarrollo.

Esta integración es como un lienzo en blanco que te permite fusionar lo mejor del desarrollo web con la funcionalidad empresarial de Business Central. Imagina la capacidad de crear interfaces de usuario modernas y dinámicas, incorporar visualizaciones de datos interactivas, todo desde una única plataforma.

Si deseas explorar más sobre ControlAddIns y cómo revolucionan el desarrollo en Business Central, te invito a visitar la documentación oficial de Microsoft para obtener una visión completa de sus posibilidades y beneficios.

¡Hola, Mundo!: Creando tu Primer ControlAddIn

Ahora que entendemos la potencia de los ControlAddIns, ¡vamos a crear uno desde cero! Para este ejemplo, vamos a sumergirnos en algo tan fundamental como el icónico «¡Hola, Mundo!».

controladdin "HelloWorldAddIn"
{
    RequestedHeight = 300;
    MinimumHeight = 300;
    MaximumHeight = 300;
    RequestedWidth = 700;
    MinimumWidth = 700;
    MaximumWidth = 700;
    VerticalStretch = true;
    VerticalShrink = true;
    HorizontalStretch = true;
    HorizontalShrink = true;
    StartupScript = 'src\controladdin\HelloWorldAddIn\js\InitScript.js';
    StyleSheets = 'src\controladdin\HelloWorldAddIn\css\StyleSheets.css';
    Scripts = 'src\controladdin\HelloWorldAddIn\js\Scripts.js';

    event CallBack();
    procedure HelloWorld(text: Text);
}

Un vistazo rápido al código y verás cómo configuramos la apariencia y el comportamiento de nuestro ControlAddIn. Las propiedades como RequestedHeight y RequestedWidth dan forma a su tamaño, mientras que StartupScript y StyleSheets indican los archivos de inicio y estilos. Además, eventos como CallBack() nos permiten saber cuando se inicia el ControlAddin.

Pero espera, hay algo nuevo aquí… ¿Sabías que incluso puedes crear controles personalizados y conectarlos con las funcionalidades de JavaScript? Esta es una forma poderosa de ampliar la interacción con los usuarios.

Demos vida a nuestros scripts. El script de inicio se ejecutará al cargar el control:

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("CallBack", "");

Y el mensaje «¡Hola, Mundo!» ahora se transforma en una función interactiva:

function HelloWorld(text) {
    alert("Hello world en " + text);
}

Con todo esto dicho, ahora solo nos falta llevar todo esto a una página para ver cómo se ejecuta nuestro mensaje.

En el diseño, añadiremos un «usercontrol» que enlace con nuestro ControlAddin.

Vamos a llamar al evento «CallBack» y, aquí, invocaremos la función «HelloWorld» que creamos en JavaScript.

Para rematar, como prueba de que incluso desde un botón podemos acceder al código de nuestro ControlAddin, crearemos un botón y le asociaremos la función

page 60061 "TestPageAddIn"
{
    Caption = 'Test Page AddIn';

    PageType = List;
    Editable = false;
    UsageCategory = Lists;
    ApplicationArea = All;
    layout
    {
        area(Content)
        {
            usercontrol(HelloWorldAddIn; HelloWorldAddIn)
            {
                ApplicationArea = All;

                trigger Callback()
                begin
                    CurrPage.HelloWorldAddIn.HelloWorld('El Inicio');
                end;
            }
        }
    }

    actions
    {
        area(Creation)
        {
            action(LlamarFuncion)
            {
                ApplicationArea = All;
                Image = "1099Form";
                ToolTip = ' ';

                trigger OnAction();
                begin
                    CurrPage.HelloWorldAddIn.HelloWorld('Action');
                end;
            }
        }
    }
}

Ya estamos. Compilamos todo y damos rienda suelta a la ejecución. Si mostramos la página que hemos configurado, veremos nuestro primer mensaje. Y si lo lanzamos desde el botón, ¡aparecerá el segundo mensaje!

De «¡Hola, Mundo!» a «¡Hola, Universo!»

Ahora que dominamos los conceptos básicos, es hora de elevarlo a un nivel superior. Vamos a añadir más detalles y características a nuestro ejemplo.

Comencemos por personalizar el archivo “InitScript.js”, incorporamos la función «init()»:

init();
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("CallBack", "");

Y en “Scripts.js”, creamos «init()», que agrega elementos HTML.

En esta sección, examinamos de cerca un fragmento de código que desempeña un papel clave en la creación de elementos visuales en Business Central. Explicamos cómo este código interactúa con elementos HTML y cómo se utiliza para personalizar la apariencia de tu aplicación. Aquí está el desglose del código:

• Se establece una conexión con un elemento del ControlAddin utilizando su atributo id.
• Se utiliza la propiedad innerHTML para modificar el contenido HTML del elemento seleccionado.
• Se añaden elementos
  y para crear una estructura visual. Los elementos anidados permiten crear contenedores y segmentos de texto.
• Se aplican clases CSS, como «contenedor», «orange» y «ref», para dar estilo a los elementos y controlar su apariencia.
• Se proporciona una descripción detallada de cada paso del código y su función.

function init() {
    var div = document.getElementById("controlAddIn");

    div.innerHTML += '<div class="contenedor">' + '    <div id="IDcontenedor"></div>' + "</div>";

    div.innerHTML +=
        '<span class="orange">' + "Esta es una línea, y a continuación insertamos un salto de línea.<br/>" + "</span>";

    div.innerHTML += '<span class="ref">Un texto donde necesito alguna cosa</span>';
}

El ultimo archivo que tocaremos hoy es el de los estilos

.contenedor {
    float: left;
    width: 40px;
    height: 40px;
    background-color: blue;
}

.ref {
    font-weight: negrita;
    color: navy;
    content: "Reference: ";
}
.orange {
    width: 33.333%;
    vertical-align: middle;
    text-align: center;
    color: rgb(234, 109, 0);
}

En este archivo añadiremos las configuraciones y los estilos de cada uno de los controles que antes hemos creado.

Como podéis ver se llaman igual que los que hemos añadido en el archivo “Scripts.js” dentro del código de HTML.

El resultado es digno de ver.

Una caja azul con dos textos uno naranja y otro azul.

Expandiendo los Horizontes con HTML Externo

Vamos un paso más allá y exploremos cómo incorporar HTML desde un archivo externo. Esto agrega aún más flexibilidad y modularidad a nuestro desarrollo.

Copiamos el contenido del archivo HTML en el archivo externo de la siguiente manera:

<div class="contenedor">
    <div id="IDcontenedor"></div>
</div>

<span class="orange"> Esta es una línea, y a continuación insertamos un salto de línea. </span>
<br />

<span class="ref">Un texto donde necesito alguna cosa</span>

También necesitamos ajustar nuestro «ControlAddIn»:

controladdin "HelloWorldExternalHTML"
{
    RequestedHeight = 300;
    MinimumHeight = 300;
    MaximumHeight = 300;
    RequestedWidth = 700;
    MinimumWidth = 700;
    MaximumWidth = 700;
    VerticalStretch = true;
    VerticalShrink = true;
    HorizontalStretch = true;
    HorizontalShrink = true;
    StartupScript = 'src\controladdin\HelloWorldExternalHTML\js\InitScript.js';
    StyleSheets = 'src\controladdin\HelloWorldExternalHTML\css\StyleSheets.css';
    Scripts = 'https://code.jquery.com/jquery-3.6.0.min.js',
            'src\controladdin\HelloWorldExternalHTML\js\Scripts.js';
    Images = 'src\controladdin\HelloWorldExternalHTML\html\main.html';

    event CallBack();
    procedure HelloWorld(text: Text);

}

En el archivo «Scripts.js», realizamos un cambio emocionante para cargar el archivo HTML externo:

function init() {
    $("#controlAddIn").load(
        Microsoft.Dynamics.NAV.GetImageResource("src/controladdin/HelloWorldExternalHTML/html/main.html")
    );
}

function HelloWorld(text) {
    alert("Hello world en " + text);
}

Lo que estamos haciendo es cargar el archivo HTML externo que configuramos en el ControlAddIn. El fragmento $(«#cosmicContainer») utiliza la librería jQuery para seleccionar un elemento HTML en la página, en este caso, con el identificador «#cosmicContainer». La función .load() de jQuery se emplea para cargar contenido desde un archivo externo y añadirlo al elemento seleccionado. Además, Microsoft.Dynamics.NAV.GetImageResource() nos permite acceder a recursos dentro del entorno de desarrollo.

Estas línea de código carga el contenido del archivo HTML externo y lo integra de manera flexible en la interfaz de usuario de Business Central. Una vez más, los ControlAddIns se revelan como una herramienta asombrosa para personalizar y elevar la experiencia del usuario.

Y si deseas profundizar aún más, te invito a explorar el ejemplo completo en mi GitHub. Allí encontrarás más ejemplos, trucos y descubrimientos que te inspirarán en tu viaje.