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 directive.
There is another alternative to the above problem statement, which can be an extremely lightweight framework from Microsoft – Adaptive cards.
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.
However, before I proceed, one issue I faced was – how to exchange data between LWC components & Adaptive cards components. we cant use this variable in the adaptive cards library. I tried multiple ways to get the context of LWC and eventually I ended up updating adaptive.js file itself by adding the below lines of code.
This is the final output of how it would look & you can find the complete source code here in my git repository.
In the above screenshot, one text box is in LWC & everything else is rendered by the adaptive card. On the button click of the adaptive cards component (Learn more button), I’m displaying a toast message with the value from LWC demonstrating two-way communication between LWC & adaptive cards.
You can run this demo code within 5 minutes by following the instructions mentioned here.
In the below code, magic happens by payload declared in variable card at line 53 of javascript.
You can play with adaptive cards here to decide what the JSON payload structure would look like.
Feel free to let me know your thoughts or feedback about using adaptive cards with LWC.
References :
Leave a Reply