{"id":7569,"date":"2022-05-08T00:51:30","date_gmt":"2022-05-08T04:51:30","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=7569"},"modified":"2022-05-08T00:57:10","modified_gmt":"2022-05-08T04:57:10","slug":"using-microsoft-adaptive-cards-in-lwc","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-microsoft-adaptive-cards-in-lwc\/","title":{"rendered":"Using Microsoft Adaptive Cards in LWC"},"content":{"rendered":"\n

There could be a situation in your project where UI components in your application need to be defined at run time where Salesforce may or may not have control. We can solve this situation in LWC using CSS or template:if<\/a><\/em> directive.<\/p>\n\n\n\n

There is another alternative to the above problem statement, which can be an extremely lightweight framework from Microsoft – Adaptive cards<\/a>. <\/p>\n\n\n\n

In nutshell, Adaptive cards take a JSON input and convert it to HTML UI elements. In this blog post, I would be sharing simple source code to depict how it works.<\/p>\n\n\n\n\n\n\n\n

However, before I proceed, one issue I faced was – how to exchange data between LWC components & Adaptive cards components. we cant use this<\/strong> variable in the adaptive cards library. I tried multiple ways to get the context of LWC and eventually I ended up updating adaptive.js<\/a> file itself by adding the below lines of code. <\/p>\n\n\n\n