From d75ede85a7cccee62ee913c99f8d068a97084cd9 Mon Sep 17 00:00:00 2001 From: Rhett Arave Date: Thu, 19 Jan 2023 14:33:11 -0700 Subject: [PATCH 1/4] Add Sample Data --- src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx b/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx index 83a020069..c6041ae38 100644 --- a/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx +++ b/src/controls/adaptiveCardDesignerHost/AdaptiveCardDesigner.tsx @@ -186,6 +186,7 @@ export const AdaptiveCardDesigner = (props: IAdaptiveCardDesignerHostProps): JSX props.context); convertNullToEmptyString(dataObject); + cardDesigner.sampleData = dataObject?.$root || {}; cardDesigner.dataStructure = FieldDefinition.deriveFrom(dataObject.$root); }, [isMonacoLoaded, props.addDefaultAdaptiveCardHostContainer, From 0705c47a8d9cb3517a3e892b9e14de36eb2389c6 Mon Sep 17 00:00:00 2001 From: Rhett Arave Date: Thu, 19 Jan 2023 14:34:05 -0700 Subject: [PATCH 2/4] Remove Console.log --- src/controls/adaptiveCardHost/AdaptiveCardHost.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx index ca17899f4..68f18a07f 100644 --- a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx +++ b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx @@ -157,7 +157,7 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element => currentRenderElement.appendChild(renderedElement); // just for debugging pourpouse - console.log(evaluationContext); + // console.log(evaluationContext); // ***** } catch (cardRenderError) { if (props.onError) { From b35f5b6f1119e7426e77d8c40af2b6bc82ae6a1e Mon Sep 17 00:00:00 2001 From: Rhett Arave Date: Thu, 19 Jan 2023 15:23:15 -0700 Subject: [PATCH 3/4] remove console.log --- src/controls/adaptiveCardHost/AdaptiveCardHost.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx index 68f18a07f..3fb1012ca 100644 --- a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx +++ b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx @@ -156,9 +156,6 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element => currentRenderElement.innerHTML = ""; currentRenderElement.appendChild(renderedElement); - // just for debugging pourpouse - // console.log(evaluationContext); - // ***** } catch (cardRenderError) { if (props.onError) { props.onError(cardRenderError); From 7d033e51fff0fd5be2e5bd030a07a514ce7efe23 Mon Sep 17 00:00:00 2001 From: Rhett Arave Date: Thu, 19 Jan 2023 17:13:03 -0700 Subject: [PATCH 4/4] Add logic to prevent re-renders (flicker) --- src/controls/adaptiveCardHost/AdaptiveCardHost.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx index 3fb1012ca..235a3532d 100644 --- a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx +++ b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx @@ -153,9 +153,11 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element => currentAdaptiveCard.parse(cardPayload, serializationContextInstanceRef.current); const renderedElement = currentAdaptiveCard.render(); - currentRenderElement.innerHTML = ""; - currentRenderElement.appendChild(renderedElement); - + // If this isn't acceptable, we should compare the old template with the new template + if (renderedElement.outerHTML !== currentRenderElement.innerHTML) { + currentRenderElement.innerHTML = ""; + currentRenderElement.appendChild(renderedElement); + } } catch (cardRenderError) { if (props.onError) { props.onError(cardRenderError);