Remove jQuery from add-ins

src/System Application/App/ControlAddIns/Resources/BusinessChart/js/BusinessChartAddIn.js

@@ -17,16 +17,20 @@ var BEFORE_CHART_FORMAT_TEMPLATE =
 // Initialization of the control add-in.
 // Note: This function is called by the manifest after loading the control add-in.
 function Initialize() {
-  $(window).resize(function () {
-    var width = $(this).width();
-    var height = $(this).height();
+  window.addEventListener('resize', function () {
+    var width = window.document.documentElement.getBoundingClientRect().width;
+    var height = window.document.documentElement.getBoundingClientRect().height;
 
     onChartSizeChanged(width, height);
   });
 
   raiseAddInReady();
 }
 
+function controlAddIn() {
+  return document.getElementById('controlAddIn');
+}
+
 // Update the chart with the supplied chart data.
 // Note: This function is called from the application code.
 function Update(chartData) {
@@ -96,7 +100,7 @@ function createUI(chartData) {
   }
 
   // Remove any existing content
-  $("#controlAddIn").empty();
+  controlAddIn().innerHTML = '';
 
   if (validateChartData(chartData)) {
     initializeChartLanguage(chartData);
@@ -152,9 +156,13 @@ function validateYAxisRange(chartData) {
 
 // Create a DIV containing the specified message text.
 function createMessage(text) {
-  $("#controlAddIn").append(
-    '<div class="' + getMessageClassName() + '"><span>' + text + "</span></div>"
-  );
+  var element = document.createElement("div");
+  element.className = getMessageClassName();
+  var spanElement = document.createElement("span");
+  spanElement.innerText = text;
+  element.appendChild(spanElement);
+
+  controlAddIn().appendChild(element);
 }
 
 // Initialize the month, short month, and weekday names of the chart.
@@ -403,10 +411,12 @@ function createChart(chartData) {
   );
 
   // Make chart non-focusable
-  $(chart.container).find("svg").attr("focusable", "false");
+  chart.container.querySelectorAll("svg").forEach(svg => {
+    svg.setAttribute("focusable", "false")
+  });
 
-  var width = $(chart.container).width();
-  var height = $(chart.container).height();
+  var width = chart.container.getBoundingClientRect().width;
+  var height = chart.container.getBoundingClientRect().height;
 
   // Update the size-dependent properties
   if (width > 0 && height > 0) {

src/System Application/App/ControlAddIns/Resources/RoleCenterSelector/js/RoleCenterSelector.js

@@ -45,7 +45,7 @@ function DrawPage() {
 }
 
 function ReplaceFeaturesContent() {
-    $("#featuretable").remove();
+    document.getElementById("featuretable")?.remove();
     InsertFeaturesContent();
 }
 

src/System Application/App/ControlAddIns/Resources/WelcomeWizard/js/WelcomeWizard.js

@@ -212,17 +212,18 @@ function DrawLayout(titletxt, subtitletxt, explanationtxt, intro, introDescripti
 
     canvas.appendChild(container);
 
-    $('#welcomeContainer').attr('role', 'dialog');
-    $('#welcomeContainer').attr('aria-describedby', 'welcomeDivTag');
-    $('#welcomePic').attr('role', 'presentation');
-    $('#tile1Button').attr('aria-labelledby', 'tileDescription1 tileSubDescription1');
-    $('#tile2Button').attr('aria-labelledby', 'tileDescription2 tileSubDescription2');
-    $('#tile3Button').attr('aria-labelledby', 'tileDescription3 tileSubDescription3');
-    $('#legalDescriptionDiv').attr('aria-labelledby', 'legalDiv'); 
-
-    $("#tile1Button").click(function(){ThumbnailClick(1);});
-    $("#tile2Button").click(function(){ThumbnailClick(2);});
-    $("#tile3Button").click(function(){ThumbnailClick(3);});
+    const welcomeContainer = document.getElementById("welcomeContainer");
+    welcomeContainer?.setAttribute('role', 'dialog');
+    welcomeContainer?.setAttribute('aria-describedby', 'welcomeDivTag');
+    document.getElementById('welcomePic')?.setAttribute('role', 'presentation');
+    document.getElementById('tile1Button')?.setAttribute('aria-labelledby', 'tileDescription1 tileSubDescription1');
+    document.getElementById('tile2Button')?.setAttribute('aria-labelledby', 'tileDescription2 tileSubDescription2');
+    document.getElementById('tile3Button')?.setAttribute('aria-labelledby', 'tileDescription3 tileSubDescription3');
+    document.getElementById('legalDescriptionDiv')?.setAttribute('aria-labelledby', 'legalDiv');
+
+    document.getElementById('tile1Button')?.addEventListener("click", () => ThumbnailClick(1));
+    document.getElementById('tile2Button')?.addEventListener("click", () => ThumbnailClick(2));
+    document.getElementById('tile3Button')?.addEventListener("click", () => ThumbnailClick(3));
 }
 
 function ThumbnailClick(id)

src/System Application/App/ControlAddIns/src/BusinessChart.ControlAddin.al

@@ -17,7 +17,6 @@ controladdin BusinessChart
     HorizontalShrink = true;
 
     Scripts = 'Resources\BusinessChart\js\BusinessChartAddIn.js',
-              'https://bc-cdn.dynamics.com/common/js/jquery-3.5.1.min.js',
               'https://bc-cdn.dynamics.com/common/js/highcharts-9.1.1.js',
               'https://bc-cdn.dynamics.com/common/js/highcharts-more-9.1.1.js',
               'https://bc-cdn.dynamics.com/common/js/accessibility-9.1.1.js',

src/System Application/App/ControlAddIns/src/MicrosoftDynamicsNavClientBusinessChart.ControlAddin.al

@@ -20,7 +20,6 @@ controladdin "Microsoft.Dynamics.Nav.Client.BusinessChart"
     HorizontalShrink = true;
 
     Scripts = 'Resources\BusinessChart\js\BusinessChartAddIn.js',
-              'https://bc-cdn.dynamics.com/common/js/jquery-3.5.1.min.js',
               'https://bc-cdn.dynamics.com/common/js/highcharts-9.1.1.js',
               'https://bc-cdn.dynamics.com/common/js/highcharts-more-9.1.1.js',
               'https://bc-cdn.dynamics.com/common/js/accessibility-9.1.1.js',

src/System Application/App/ControlAddIns/src/MicrosoftDynamicsNavClientRoleCenterSelector.ControlAddin.al

@@ -15,8 +15,7 @@ controladdin "Microsoft.Dynamics.Nav.Client.RoleCenterSelector"
     VerticalStretch = true;
     HorizontalStretch = true;
 
-    Scripts = 'https://bc-cdn.dynamics.com/common/js/jquery-3.5.1.min.js',
-              'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
+    Scripts = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
               'Resources\RoleCenterSelector\js\RoleCenterSelector.js';
     StartupScript = 'Resources\RoleCenterSelector\js\Startup.js';
     RefreshScript = 'Resources\RoleCenterSelector\js\Refresh.js';

src/System Application/App/ControlAddIns/src/MicrosoftDynamicsNavClientWelcomeWizard.ControlAddin.al

@@ -19,8 +19,7 @@ controladdin "Microsoft.Dynamics.Nav.Client.WelcomeWizard"
     HorizontalStretch = true;
     HorizontalShrink = true;
 
-    Scripts = 'https://bc-cdn.dynamics.com/common/js/jquery-3.5.1.min.js',
-              'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
+    Scripts = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
               'Resources\WelcomeWizard\js\WelcomeWizard.js';
     StartupScript = 'Resources\WelcomeWizard\js\Startup.js';
     RefreshScript = 'Resources\WelcomeWizard\js\Refresh.js';

src/System Application/App/ControlAddIns/src/RoleCenterSelector.ControlAddin.al

@@ -12,8 +12,7 @@ controladdin RoleCenterSelector
     VerticalStretch = true;
     HorizontalStretch = true;
 
-    Scripts = 'https://bc-cdn.dynamics.com/common/js/jquery-3.5.1.min.js',
-              'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
+    Scripts = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
               'Resources\RoleCenterSelector\js\RoleCenterSelector.js';
     StartupScript = 'Resources\RoleCenterSelector\js\Startup.js';
     RefreshScript = 'Resources\RoleCenterSelector\js\Refresh.js';

src/System Application/App/ControlAddIns/src/WelcomeWizard.ControlAddin.al

@@ -16,8 +16,7 @@ controladdin WelcomeWizard
     HorizontalStretch = true;
     HorizontalShrink = true;
 
-    Scripts = 'https://bc-cdn.dynamics.com/common/js/jquery-3.5.1.min.js',
-              'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
+    Scripts = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js',
               'Resources\WelcomeWizard\js\WelcomeWizard.js';
     StartupScript = 'Resources\WelcomeWizard\js\Startup.js';
     RefreshScript = 'Resources\WelcomeWizard\js\Refresh.js';

src/System Application/App/Resources/BusinessChart/js/BusinessChartAddIn.js

@@ -17,16 +17,20 @@ var BEFORE_CHART_FORMAT_TEMPLATE =
 // Initialization of the control add-in.
 // Note: This function is called by the manifest after loading the control add-in.
 function Initialize() {
-  $(window).resize(function () {
-    var width = $(this).width();
-    var height = $(this).height();
+  window.addEventListener('resize', function () {
+    var width = window.document.documentElement.getBoundingClientRect().width;
+    var height = window.document.documentElement.getBoundingClientRect().height;
 
     onChartSizeChanged(width, height);
   });
 
   raiseAddInReady();
 }
 
+function controlAddIn() {
+  return document.getElementById('controlAddIn');
+}
+
 // Update the chart with the supplied chart data.
 // Note: This function is called from the application code.
 function Update(chartData) {
@@ -96,7 +100,7 @@ function createUI(chartData) {
   }
 
   // Remove any existing content
-  $("#controlAddIn").empty();
+  controlAddIn().innerHTML = '';
 
   if (validateChartData(chartData)) {
     initializeChartLanguage(chartData);
@@ -152,9 +156,13 @@ function validateYAxisRange(chartData) {
 
 // Create a DIV containing the specified message text.
 function createMessage(text) {
-  $("#controlAddIn").append(
-    '<div class="' + getMessageClassName() + '"><span>' + text + "</span></div>"
-  );
+  var element = document.createElement("div");
+  element.className = getMessageClassName();
+  var spanElement = document.createElement("span");
+  spanElement.innerText = text;
+  element.appendChild(spanElement);
+
+  controlAddIn().appendChild(element);
 }
 
 // Initialize the month, short month, and weekday names of the chart.
@@ -403,10 +411,12 @@ function createChart(chartData) {
   );
 
   // Make chart non-focusable
-  $(chart.container).find("svg").attr("focusable", "false");
+  chart.container.querySelectorAll("svg").forEach(svg => {
+    svg.setAttribute("focusable", "false")
+  });
 
-  var width = $(chart.container).width();
-  var height = $(chart.container).height();
+  var width = chart.container.getBoundingClientRect().width;
+  var height = chart.container.getBoundingClientRect().height;
 
   // Update the size-dependent properties
   if (width > 0 && height > 0) {

src/System Application/App/Resources/RoleCenterSelector/js/RoleCenterSelector.js

@@ -45,7 +45,7 @@ function DrawPage() {
 }
 
 function ReplaceFeaturesContent() {
-    $("#featuretable").remove();
+    document.getElementById("featuretable")?.remove();
     InsertFeaturesContent();
 }
 

src/System Application/App/Resources/WelcomeWizard/js/WelcomeWizard.js

@@ -212,17 +212,18 @@ function DrawLayout(titletxt, subtitletxt, explanationtxt, intro, introDescripti
 
     canvas.appendChild(container);
 
-    $('#welcomeContainer').attr('role', 'dialog');
-    $('#welcomeContainer').attr('aria-describedby', 'welcomeDivTag');
-    $('#welcomePic').attr('role', 'presentation');
-    $('#tile1Button').attr('aria-labelledby', 'tileDescription1 tileSubDescription1');
-    $('#tile2Button').attr('aria-labelledby', 'tileDescription2 tileSubDescription2');
-    $('#tile3Button').attr('aria-labelledby', 'tileDescription3 tileSubDescription3');
-    $('#legalDescriptionDiv').attr('aria-labelledby', 'legalDiv'); 
-
-    $("#tile1Button").click(function(){ThumbnailClick(1);});
-    $("#tile2Button").click(function(){ThumbnailClick(2);});
-    $("#tile3Button").click(function(){ThumbnailClick(3);});
+    const welcomeContainer = document.getElementById("welcomeContainer");
+    welcomeContainer?.setAttribute('role', 'dialog');
+    welcomeContainer?.setAttribute('aria-describedby', 'welcomeDivTag');
+    document.getElementById('welcomePic')?.setAttribute('role', 'presentation');
+    document.getElementById('tile1Button')?.setAttribute('aria-labelledby', 'tileDescription1 tileSubDescription1');
+    document.getElementById('tile2Button')?.setAttribute('aria-labelledby', 'tileDescription2 tileSubDescription2');
+    document.getElementById('tile3Button')?.setAttribute('aria-labelledby', 'tileDescription3 tileSubDescription3');
+    document.getElementById('legalDescriptionDiv')?.setAttribute('aria-labelledby', 'legalDiv');
+
+    document.getElementById('tile1Button')?.addEventListener("click", () => ThumbnailClick(1));
+    document.getElementById('tile2Button')?.addEventListener("click", () => ThumbnailClick(2));
+    document.getElementById('tile3Button')?.addEventListener("click", () => ThumbnailClick(3));
 }
 
 function ThumbnailClick(id)