Skip to content

Commit

Permalink
Remove jQuery from add-ins (#2584)
Browse files Browse the repository at this point in the history 
<!-- Thank you for submitting a Pull Request. If you're new to
contributing to BCApps please read our pull request guideline below
* https://github.com/microsoft/BCApps/Contributing.md
-->
#### Summary <!-- Provide a general summary of your changes -->
jQuery is being removed from the client and this PR migrates from jQuery
to native javascript code in the highchart add-in.

#### Work Item(s) <!-- Add the issue number here after the #. The issue
needs to be open and approved. Submitting PRs with no linked issues or
unapproved issues is highly discouraged. -->
Fixes
[AB#560172](https://dynamicssmb2.visualstudio.com/1fcb79e7-ab07-432a-a3c6-6cf5a88ba4a5/_workitems/edit/560172)

---------

Co-authored-by: Eddy Lynch <[email protected]>
  • Loading branch information
@edwardUL99 @eddylynch
edwardUL99 and eddylynch authored Jan 17, 2025
1 parent 71abb7b commit 71fcaeb
Show file tree
Hide file tree
Showing 12 changed files with 70 additions and 54 deletions.
30 changes: 20 additions & 10 deletions src/System Application/App/ControlAddIns/Resources/BusinessChart/js/BusinessChartAddIn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -96,7 +100,7 @@ function createUI(chartData) {
}

// Remove any existing content
$("#controlAddIn").empty();
controlAddIn().innerHTML = '';

if (validateChartData(chartData)) {
initializeChartLanguage(chartData);
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion ...ystem Application/App/ControlAddIns/Resources/RoleCenterSelector/js/RoleCenterSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function DrawPage() {
}

function ReplaceFeaturesContent() {
$("#featuretable").remove();
document.getElementById("featuretable")?.remove();
InsertFeaturesContent();
}

Expand Down
23 changes: 12 additions & 11 deletions src/System Application/App/ControlAddIns/Resources/WelcomeWizard/js/WelcomeWizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 0 additions & 1 deletion src/System Application/App/ControlAddIns/src/BusinessChart.ControlAddin.al
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 0 additions & 1 deletion ...Application/App/ControlAddIns/src/MicrosoftDynamicsNavClientBusinessChart.ControlAddin.al
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 1 addition & 2 deletions ...cation/App/ControlAddIns/src/MicrosoftDynamicsNavClientRoleCenterSelector.ControlAddin.al
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions ...Application/App/ControlAddIns/src/MicrosoftDynamicsNavClientWelcomeWizard.ControlAddin.al
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions src/System Application/App/ControlAddIns/src/RoleCenterSelector.ControlAddin.al
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions src/System Application/App/ControlAddIns/src/WelcomeWizard.ControlAddin.al
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
30 changes: 20 additions & 10 deletions src/System Application/App/Resources/BusinessChart/js/BusinessChartAddIn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -96,7 +100,7 @@ function createUI(chartData) {
}

// Remove any existing content
$("#controlAddIn").empty();
controlAddIn().innerHTML = '';

if (validateChartData(chartData)) {
initializeChartLanguage(chartData);
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/System Application/App/Resources/RoleCenterSelector/js/RoleCenterSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function DrawPage() {
}

function ReplaceFeaturesContent() {
$("#featuretable").remove();
document.getElementById("featuretable")?.remove();
InsertFeaturesContent();
}

Expand Down
23 changes: 12 additions & 11 deletions src/System Application/App/Resources/WelcomeWizard/js/WelcomeWizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 71fcaeb

Please sign in to comment.