Como crear un ControlAddin wrapper para jQuery en Business Central

En este desarrollo he montado una extension llamada Jquery In BC que actua como base para reutilizar jQuery dentro de Business Central. La idea es tener un ControlAddin wrapper que ya trae scripts, HTML, CSS e imagenes, y poder usar este bloque como dependencia funcional en otros addins.

¡Vamos manos a la obra! 🧩

Estructura base del proyecto

El desarrollo esta en .Desarrollos/AL/JqueryBC/ y los archivos clave son:

• app.json
• src/controladdin/Jquery/Jquery.ControlAddin.al
• src/controladdin/Jquery/js/Scripts.js
• src/page/MyPageJquery.Page.al

La app queda identificada con su propio id, publisher y rango de objetos para poder publicarla como extension independiente:

{
    "id": "24d62b2a-0af6-4057-adbb-266c9bade868",
    "publisher": "Esteve Sanpons",
    "name": "Jquery In BC",
    "brief": "Jquery In BC",
    "description": "Jquery In BC",
    "version": "1.0.0.1",
    "platform": "20.0.0.0",
    "idRanges": [
        {
            "from": 60000,
            "to": 70000
        }
    ],
    "runtime": "9.0"
}

El wrapper: Jquery.ControlAddin.al

Este objeto es el nucleo del wrapper. Declara los scripts, estilos, startup script, recursos y dimensiones del addin:

//https://jquery.com/

controladdin "Jquery"
{
    Scripts =
    'src/controladdin/Jquery/js/Scripts.js',
       'src/controladdin/Jquery/js/ScriptsJqueryUI.js',
        'src/controladdin/Jquery/js/jquery-3.6.0.min.js';

    StyleSheets = 'src/controladdin/Jquery/css/Style.css';

    StartupScript =
        'src/controladdin/Jquery/js/Startup.js';

    Images = 'src/controladdin/Jquery/images/ajax-loader.gif',
            'src/controladdin/Jquery/images/corazon.jpg',
            'src\controladdin\Jquery\html\HtmlJquery.html',
            'src\controladdin\Jquery\html\HtmlJqueryUI.html';

    RequestedHeight = 1200;
    RequestedWidth = 1200;
}

Aqui ya queda encapsulada toda la infraestructura de jQuery para reutilizarla: scripts de comportamiento, HTML externo cargado como recurso y estilos propios.

Logica jQuery en Scripts.js

La funcion principal carga HTML externo y monta dinamicamente contenido, botones, eventos e imagenes usando jQuery:

var controlAddIn;

function CrearTodoElHtmlInicial() {
    var texto = 'texto inicial insertado';
    var Html;

    var getHtml = $.get(Microsoft.Dynamics.NAV.GetImageResource("src/controladdin/Jquery/html/HtmlJquery.html"), function (htmlExterno) {
        Html = htmlExterno;
    });

    getHtml.fail(function () {
        alert("error");
    });

    getHtml.done(function () {
        controlAddIn.empty();
        controlAddIn.html(Html);

        var div1 = $("#div1");
        div1.text(texto);

        var div2 = $("#div2");
        var parDiv2 = $("<p />", { id: "pd2" });
        parDiv2.text('text par div 2');
        div2.append(parDiv2);

        var parDiv3 = $("<p />", { id: "pd3" });
        parDiv3.text('text par div 3');
        div2.append(parDiv3);

        var br = $("<br />");
        controlAddIn.append(br);

        var par = $("<p />", { id: "p1" });
        par.html("nueva línea");
        controlAddIn.append(par);

        var par2 = $("<p />", { id: "p2" });
        par2.html("nueva línea2");
        controlAddIn.append(par2);

        var img = $("<img />", { id: "imgCorazon", src: Microsoft.Dynamics.NAV.GetImageResource("src/controladdin/Jquery/images/corazon.jpg") });
        $("#imagenes").append(img);

        controlAddIn.append(br);
        controlAddIn.append(br);
        controlAddIn.append(br);

        var bt7 = $("<input />", { type: "button", id: "button7", value: "Cargando y creando de nuevo" });
        controlAddIn.append(bt7);

        controlAddIn.append(br);

        var bt8 = $("<button />", { id: "button8", text: "Quitar TODO y añadir HTML jQuery UI" });
        controlAddIn.append(bt8);

        //esto equivaldria al $(document).ready
        var NuevoTexto = "Nuevo Hola";

        $("#button1").click({ value: NuevoTexto }, notify);
        $("#button2").click(toggle);
        $("#button3").click(FadeIn);
        $("#button4").hover(HoverAndSlide);
        $("#button5").click(CssJquery);
        $("#button6").click(removeImage);
        $("#button7").click(cargando);
        $("#button8").click(RemoveAndAddJqueryUI);
    });
}

Ademas de esta inicializacion, el archivo incluye funciones como notify, toggle, FadeIn, HoverAndSlide, CssJquery, removeImage y cargando, que demuestran llamadas jQuery clasicas dentro del iframe del ControlAddin.

Uso desde una pagina AL

La pagina que consume el wrapper es minima: simplemente declara el usercontrol y delega en el addin toda la capa web.

page 60000 "MyPageJquery"
{
    PageType = Card;
    ApplicationArea = All;
    UsageCategory = Administration;

    layout
    {
        area(Content)
        {
            usercontrol("Jquery"; Jquery)
            {
            }

        }
    }
}

Conclusión

Este desarrollo deja una base reusable para proyectos que necesiten jQuery en Business Central: un ControlAddin ya empaquetado, con recursos internos y una pagina de prueba para validar funcionamiento. A partir de aqui, puedes extender la logica JavaScript o replicar el patron para construir addins mas especificos sobre la misma base.

Si quieres ver el código completo, está en GitHub.