Fixed error when you set two controls in the same form by changing do…

…cument with this.container
victorsolaya · Feb 2, 2021 · a392386 · a392386
1 parent bb02ca9
commit a392386
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/progresscontrol/index.ts b/progresscontrol/index.ts
@@ -10,6 +10,7 @@ export class progresscontrol implements ComponentFramework.StandardControl<IInpu
 	cssPath: string | null;
 	setMaximumValue: string;
 	setMaximumValueBool: boolean;
+	fieldid: string | undefined;
 
 	/**
 	 * Empty constructor.
@@ -30,18 +31,20 @@ export class progresscontrol implements ComponentFramework.StandardControl<IInpu
 	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
 	{
 		// Add control initialization code
+		this.fieldid = context.parameters.field.attributes?.LogicalName;
 		this.setMaximumValue = context.parameters.is100MaximumValue.raw || "True";
 		this.setMaximumValueBool = this.setMaximumValue.toLowerCase() == "true" ? true : false;
+		this.container = container;
+
 		this.notifyOutputChanged = notifyOutputChanged;
 		this.cssPath = null//context.parameters.configCSSPath.raw || null;
 		if(this.cssPath != null) {
-			const cssProgressControlLink = document.querySelector("link[href*='css/progresscontrol']")
+			const cssProgressControlLink = this.container.querySelector("link[href*='css/progresscontrol']")
 			cssProgressControlLink?.setAttribute("href", this.cssPath)
 		}
 		let timeout: any = 0;
-		this.container = container;
 		this.initializeHTML();
-		const numb = (document.querySelector('.numb') as HTMLDivElement)
+		const numb = (this.container.querySelector('.numb') as HTMLDivElement)
 		numb.addEventListener("input", (eventTarget: any) => {
 			clearTimeout(timeout);
 			timeout = setTimeout(() => {
@@ -53,8 +56,8 @@ export class progresscontrol implements ComponentFramework.StandardControl<IInpu
 				}
 				const prevValue = this.number;
 				this.number = parseInt(value as string);
-				const calculations = returnCalculations(this.number);
-				setCalculations(calculations);
+				const calculations = returnCalculations(this.container, this.number);
+				setCalculations(this.container, calculations);
 				if(prevValue !== value) {
 					this.notifyOutputChanged();
 				}
@@ -73,8 +76,8 @@ export class progresscontrol implements ComponentFramework.StandardControl<IInpu
 	{
 		this.isControlDisabled = context.mode.isControlDisabled;
 		this.isControlVisible = context.mode.isVisible;
-		const circularContainer = document.querySelector('.containerCircularVSPCF') as HTMLDivElement;
-		const numb = document.querySelector('.numb') as HTMLDivElement;
+		const circularContainer = this.container.querySelector('.containerCircularVSPCF') as HTMLDivElement;
+		const numb = this.container.querySelector('.numb') as HTMLDivElement;
 		if(this.isControlVisible == false) {
 			circularContainer.style.display = "none";
 		} 
@@ -97,8 +100,8 @@ export class progresscontrol implements ComponentFramework.StandardControl<IInpu
 					this.notifyOutputChanged();
 				}
 			}
-			const calculations = returnCalculations(this.number);
-			setCalculations(calculations);
+			const calculations = returnCalculations(this.container, this.number);
+			setCalculations(this.container, calculations);
 		}
 	}
 

diff --git a/progresscontrol/utilities/calculations.ts b/progresscontrol/utilities/calculations.ts
@@ -3,8 +3,8 @@ export interface Calculations {
 	calculationRight: number
 }
 
-export function returnCalculations(number: number) : Calculations {
-    const numb = (document.querySelector('.numb') as HTMLDivElement)
+export function returnCalculations(container: HTMLDivElement, number: number) : Calculations {
+    const numb = (container.querySelector('.numb') as HTMLDivElement)
     const percentageStringify: string = number != null ? number?.toString() : "0";
     numb.innerHTML = `${percentageStringify}<span>%</span>`;
     const calculations: Calculations = doCalculations(number);
@@ -31,9 +31,9 @@ export function doCalculations(int: number) : Calculations {
     return calculations;
 }
 
-export function setCalculations(calculations: Calculations): void {
-    const progressElementLeft = document.querySelector('.circle .left .progress') as HTMLDivElement;
-    const progressElementRight = document.querySelector('.circle .right .progress') as HTMLDivElement;
+export function setCalculations(container: HTMLDivElement, calculations: Calculations): void {
+    const progressElementLeft = container.querySelector('.circle .left .progress') as HTMLDivElement;
+    const progressElementRight = container.querySelector('.circle .right .progress') as HTMLDivElement;
     progressElementLeft.style.transform = `rotate(${calculations.calculationLeft}deg)`;
     progressElementRight.style.transform = `rotate(${calculations.calculationRight}deg)`;
 }