Unable to get dynamic data binding in card payload editor and no data visible in sample data editor

[Charan96766]

Problem Description

Iam trying to render adaptive card designer using npm package of adaptive card designer package
but iam getting error of bundle.js:87961 Uncaught TypeError: $ is not a function
please resolve my issue for it.
And the issue iam able to get from adaptive card expression package .
the error file is in adaptive-expressions/lib/browser.js
could you please guide me how to resolve my issue

Card JSON

iam not rendering the card for now
iam not able to display any editor in my ui

Screenshot

recent:///502f85b383e3bab697c96c47678e25d3

[Meghana-MSFT]

@Charan96766 - Could you please let us know if you are developing any Teams application. If yes, could you please share repro steps/documentation followed to repro above issue.

[Charan96766]

Thanks for response @Meghana-MSFT -
Iam not developing any Teams application but trying to put adaptive cards designer into my website
i just followed the documentation given in https://www.npmjs.com/package/adaptivecards-designer
and i tried both the options using cdn links and also using packages to install via webpack, but getting many issues such as shared.ts:11 Uncaught TypeError: Cannot read properties of undefined (reading 'Versions')
ACDesigner is not defined
Uncaught TypeError: $ is not a function
could you please guide me how to integrate adaptive cards designer into my application
please guide me both the options which is using cdn links and also using node.js + webpack.
It would be great help to me if you guide me to get adaptive cards desginer into my application.
Guide me using newer versions
Thank you

i have provided my both codes of my code and my output
currently iam usingf CDN links
iam not able to get the latest adaptive card designer with card payload editor used for getting dynamic json template.
please guide me accordingly.
help me out how to get dynamic data template in card payload editor.
please guide me with that
currently iam getting static data and also in sample data editor iam not able to see any data.

[Charan96766]

could you please respond to my query
iam able to get the adaptive card designer UI in my application.
But iam not able to get the dynamic data binding into the card payload editor and not data is displaying in sample data editor.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/adaptivecards.min.js"></script> <script src="https://unpkg.com/[email protected]/lib/adaptive-expressions.min.js"></script> <script src="https://unpkg.com/adaptivecards-templating@latest/dist/adaptivecards-templating.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script> <script src="https://unpkg.com/adaptivecards-designer@latest/dist/adaptivecards-designer.min.js"></script> <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script> <script type="text/javascript"> window.onload = function () { ACDesigner.GlobalSettings.enableDataBindingSupport = true; ACDesigner.GlobalSettings.showVersionPicker = true; ACDesigner.GlobalSettings.showDataStructureToolbox = false; ACDesigner.GlobalSettings.showSampleDataEditorToolbox = true; ACDesigner.GlobalSettings.showSampleHostDataEditorToolbox = true; ACDesigner.GlobalSettings.selectedHostContainerControlsTargetVersion = true; // Controls whether a warning message should be displayed when the selected target version is greater than the version supported by the selected host application. This warning is meant to inform the user that not all features they're designing their card with will work in the target host. ACDesigner.GlobalSettings.showTargetVersionMismatchWarning = true; // Configure toolbox titles // ACDesigner.Strings.toolboxes.cardEditor.title = "Custom card editor title"; // ACDesigner.Strings.toolboxes.cardStructure.title = "Custom card structure title"; // ACDesigner.Strings.toolboxes.dataStructure.title = "Custom data structure title"; // ACDesigner.Strings.toolboxes.propertySheet.title = "Custom property sheet title"; // ACDesigner.Strings.toolboxes.sampleDataEditor.title = "Custom sample data editor title"; // ACDesigner.Strings.toolboxes.sampleHostDataEditor.title = "Custom sample host data editor title"; // ACDesigner.Strings.toolboxes.toolPalette.title = "Custom tool palette title"; // Initialize the designer let hostContainers = ACDesigner.defaultMicrosoftHosts; // hostContainers.push(new ACDesigner.WebChatContainer("Bot Framework WebChat", "containers/webchat-container.css")); // hostContainers.push(new ACDesigner.DarkTeamsContainer("Microsoft Teams - Dark", "containers/teams-container-dark.css")); // hostContainers.push(new ACDesigner.LightTeamsContainer("Microsoft Teams - Light", "containers/teams-container-light.css")); let designer = new ACDesigner.CardDesigner(hostContainers); // Set asset path designer.assetPath = "https://unpkg.com/adaptivecards-designer@latest/dist"; // Enable the Sample Data Editor designer.sampleDataEditor = true; // Initialize Monaco editor require.config({ paths: { vs: "https://unpkg.com/[email protected]/min/vs" }, }); require(["vs/editor/editor.main"], function () { designer.monacoModuleLoaded(); }); // Attach designer to the DOM designer.attachTo(document.getElementById("designerRootHost")); designer.setCard( { type: "AdaptiveCard", version: "1.0", body: [ { type: "TextBlock", text: "Hello world" } ] } ); /* Set sample data (AFTER calling attachTo) */ designer.sampleData = { name: "John Doe", phone: "123-123-1234" }; }; </script>

please check my full code for it

[Charan96766]

There is another issue iam facing right now which is iam not able to get either card payload editor or sample data editor
when i try to open any one of it iam not finding the other editor button to open.
But when i close the editor which i have opened iam able to get the both editor options to open.
please review it also

please resolve my issue by guding me how to change my code
i will paste my code below for your reference

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/adaptivecards.min.js"></script> <script src="https://unpkg.com/[email protected]/lib/adaptive-expressions.min.js"></script> <script src="https://unpkg.com/adaptivecards-templating@latest/dist/adaptivecards-templating.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script> <script src="https://unpkg.com/adaptivecards-designer@latest/dist/adaptivecards-designer.min.js"></script> <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script> <script type="text/javascript"> window.onload = function () { ACDesigner.GlobalSettings.enableDataBindingSupport = true; ACDesigner.GlobalSettings.showVersionPicker = true; ACDesigner.GlobalSettings.showDataStructureToolbox = false; ACDesigner.GlobalSettings.showSampleDataEditorToolbox = true; ACDesigner.GlobalSettings.showSampleHostDataEditorToolbox = true; ACDesigner.GlobalSettings.selectedHostContainerControlsTargetVersion = true; // Controls whether a warning message should be displayed when the selected target version is greater than the version supported by the selected host application. This warning is meant to inform the user that not all features they're designing their card with will work in the target host. ACDesigner.GlobalSettings.showTargetVersionMismatchWarning = true; // Configure toolbox titles // ACDesigner.Strings.toolboxes.cardEditor.title = "Custom card editor title"; // ACDesigner.Strings.toolboxes.cardStructure.title = "Custom card structure title"; // ACDesigner.Strings.toolboxes.dataStructure.title = "Custom data structure title"; // ACDesigner.Strings.toolboxes.propertySheet.title = "Custom property sheet title"; // ACDesigner.Strings.toolboxes.sampleDataEditor.title = "Custom sample data editor title"; // ACDesigner.Strings.toolboxes.sampleHostDataEditor.title = "Custom sample host data editor title"; // ACDesigner.Strings.toolboxes.toolPalette.title = "Custom tool palette title"; // Initialize the designer let hostContainers = ACDesigner.defaultMicrosoftHosts; // hostContainers.push(new ACDesigner.WebChatContainer("Bot Framework WebChat", "containers/webchat-container.css")); // hostContainers.push(new ACDesigner.DarkTeamsContainer("Microsoft Teams - Dark", "containers/teams-container-dark.css")); // hostContainers.push(new ACDesigner.LightTeamsContainer("Microsoft Teams - Light", "containers/teams-container-light.css")); let designer = new ACDesigner.CardDesigner(hostContainers); // Set asset path designer.assetPath = "https://unpkg.com/adaptivecards-designer@latest/dist"; // Enable the Sample Data Editor designer.sampleDataEditor = true; // Initialize Monaco editor require.config({ paths: { vs: "https://unpkg.com/[email protected]/min/vs" }, }); require(["vs/editor/editor.main"], function () { designer.monacoModuleLoaded(); }); // Attach designer to the DOM designer.attachTo(document.getElementById("designerRootHost")); designer.setCard( { type: "AdaptiveCard", version: "1.0", body: [ { type: "TextBlock", text: "Hello world" } ] } ); /* Set sample data (AFTER calling attachTo) */ designer.sampleData = { name: "John Doe", phone: "123-123-1234" }; }; </script>