![\"Example](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/pic1.png\")
<\/a>Wait, what? How do I even create an Adaptive Card Extension?! I don’t see this option in my Yeoman!<\/strong><\/h2>\n\n\n\nHey, don’t panic! Make sure your SharePoint generator is updated. Currently, it’s best if you have SPFx v1.18 installed. If you’re not sure how to check your SPFx version, you can follow Waldek’s<\/a>. <\/p>\n\n\n\nWhile at it, you may want to look at this compatibility table<\/a> to ensure that your Node.js, TypeScript, and React are also properly versioned.<\/p>\n\n\n\nThe adaptive cards seem really complicated. How do I even start designing one?<\/strong><\/h2>\n\n\n\nBrowse Microsoft samples<\/a> for some inspiration or take a look at examples provided by PnP<\/a>. \u00a0When you find something interesting, customize it in the designer<\/a>.<\/p>\n\n\n\nBut don’t worry \u2013 you don’t have to copy your template to the designer whenever you want to update it! Install Microsoft’s “Adaptive Card Previewer” extension to make small changes in your Visual Studio Code.<\/p>\n\n\n\n![\"Adaptive](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/pic2.png\")
<\/a>Fig. 2 Adaptive Card Previewer extension in Visual Studio Code<\/figcaption><\/figure>\n\n\n\nAnd remember \u2013 as with many skills, practice makes perfect!<\/p>\n\n\n\n
The extension’s icon doesn’t display. Am I setting it wrong?<\/strong><\/h2>\n\n\n\nFirstly, take a look at the Microsoft tutorial, which explains that the icon needs to be set in the solution’s manifest. Actually, I suggest configuring two properties for your icons:<\/p>\n\n\n\n
\n- “officeFabricIconFontName\u201d \u2013 so your solution has a nice icon in the editor’s Toolbox,<\/li>\n\n\n\n
- “iconProperty\u201d (as suggested by Microsoft) \u2013 for the card bar’s icon.<\/li>\n<\/ul>\n\n\n\n
Secondly, use correct iconography. As always, you can use Fluent UI icons for the first property. For the card bar’s icon, take a look at a list of supported values<\/a>.<\/p>\n\n\n\nCan you imagine a user saying that my ACE is hard to read and the images have weird backgrounds?! It looks great on my app!<\/strong><\/h2>\n\n\n\nFirst of all, the audacity of some people. Second of all, remember that users have the option of changing themes on their apps. As a result, your beautiful adaptive card may look different to different users.<\/p>\n\n\n\n
You can check the user’s theme in your adaptive card’s onInit function:<\/p>\n\n\n
\nthis.context.sdks?.microsoftTeams?.teamsJs.app.getContext().then((context) => {\n this.setState({\n theme: context.app.appInfo.theme\n });\n });\n<\/pre><\/div>\n\n\nImportant!<\/strong> Make sure you’re using at least SPFx v1.18, or you may be missing the sdks property in the context. <\/p>\n\n\n\nNow, you can render your card according to the current theme! You can read more about it here: Making Quick View compatible with dark mode in mobile devices<\/a>. \u00a0\u00a0\u00a0\u00a0<\/p>\n\n\n\n![\"An](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/08\/pic3-1024x646.jpg\")
<\/a>Fig. 3 An example of a card reacting to different themes<\/a><\/figcaption><\/figure>\n\n\n\nI want to show some dynamic content on my card. How can I display SharePoint list items in quick view? Is there a way to pass them to the template?<\/strong><\/h2>\n\n\n\nYes, of course! Firstly, reference your data in the quick view \u2013 for example, pass the values from the card’s state:<\/p>\n\n\n
\npublic get data(): IQuickViewData {\n return {\n items: this.state.items\n };\n}\n<\/pre><\/div>\n\n\nWith that in place, you can refer to your items in the template. Remember that a parent container should have a “$data” property set:<\/p>\n\n\n
\n{\n "type": "AdaptiveCard",\n "$schema": "http:\/\/adaptivecards.io\/schemas\/adaptive-card.json",\n "version": "1.5",\n "body": [\n {\n "type": "Container",\n "$data": "${items}",\n "items": [\n {\n "type": "TextBlock",\n "text": "${title}",\n },\n \u2026\n ]\n }\n}\n<\/pre><\/div>\n\n\nAnd just like that, the card will display all your list items! As with the data property, the item properties are identified by the dollar character, for example, “${title}”.<\/p>\n\n\n\n
It seems that adaptive cards don’t allow icons in their schema. I really want to use a Fluent UI icon on my card. What should I do?<\/strong><\/h2>\n\n\n\nUse an image instead! Either reference the pic’s URL:<\/p>\n\n\n
\n{\n "type": "Image",\n "url": "https:\/\/adaptivecards.io\/content\/cats\/1.png",\n "altText": "Cat"\n }\n<\/pre><\/div>\n\n\nAlternatively, convert your icon to base64 format:<\/p>\n\n\n
\n{\n "type": "Image",\n "url": "data:image\/png;base64,iVBORw0KGgoAAAA\u2026",\n "altText": "Cat"\n }\n<\/pre><\/div>\n\n\nYou can look online for image converters or try this clever CodePen solution<\/a>.<\/p>\n\n\n\nSummary<\/h2>\n\n\n\n
I hope I’ve answered the most common questions that arise and will help you find your way around the world of Adaptive Card Extension. I’d love to hear what your tips and observations are about working with this tool \ud83d\ude0a<\/p>\n\n\n
While at it, you may want to look at this compatibility table<\/a> to ensure that your Node.js, TypeScript, and React are also properly versioned.<\/p>\n\n\n\n Browse Microsoft samples<\/a> for some inspiration or take a look at examples provided by PnP<\/a>. \u00a0When you find something interesting, customize it in the designer<\/a>.<\/p>\n\n\n\n But don’t worry \u2013 you don’t have to copy your template to the designer whenever you want to update it! Install Microsoft’s “Adaptive Card Previewer” extension to make small changes in your Visual Studio Code.<\/p>\n\n\n\n And remember \u2013 as with many skills, practice makes perfect!<\/p>\n\n\n\n Firstly, take a look at the Microsoft tutorial, which explains that the icon needs to be set in the solution’s manifest. Actually, I suggest configuring two properties for your icons:<\/p>\n\n\n\n Secondly, use correct iconography. As always, you can use Fluent UI icons for the first property. For the card bar’s icon, take a look at a list of supported values<\/a>.<\/p>\n\n\n\n First of all, the audacity of some people. Second of all, remember that users have the option of changing themes on their apps. As a result, your beautiful adaptive card may look different to different users.<\/p>\n\n\n\n You can check the user’s theme in your adaptive card’s onInit function:<\/p>\n\n\n Important!<\/strong> Make sure you’re using at least SPFx v1.18, or you may be missing the sdks property in the context. <\/p>\n\n\n\n Now, you can render your card according to the current theme! You can read more about it here: Making Quick View compatible with dark mode in mobile devices<\/a>. \u00a0\u00a0\u00a0\u00a0<\/p>\n\n\n\n Yes, of course! Firstly, reference your data in the quick view \u2013 for example, pass the values from the card’s state:<\/p>\n\n\n With that in place, you can refer to your items in the template. Remember that a parent container should have a “$data” property set:<\/p>\n\n\n And just like that, the card will display all your list items! As with the data property, the item properties are identified by the dollar character, for example, “${title}”.<\/p>\n\n\n\n Use an image instead! Either reference the pic’s URL:<\/p>\n\n\n Alternatively, convert your icon to base64 format:<\/p>\n\n\n You can look online for image converters or try this clever CodePen solution<\/a>.<\/p>\n\n\n\n I hope I’ve answered the most common questions that arise and will help you find your way around the world of Adaptive Card Extension. I’d love to hear what your tips and observations are about working with this tool \ud83d\ude0a<\/p>\n\n\nThe adaptive cards seem really complicated. How do I even start designing one?<\/strong><\/h2>\n\n\n\n
<\/a>The extension’s icon doesn’t display. Am I setting it wrong?<\/strong><\/h2>\n\n\n\n
\n
Can you imagine a user saying that my ACE is hard to read and the images have weird backgrounds?! It looks great on my app!<\/strong><\/h2>\n\n\n\n
\nthis.context.sdks?.microsoftTeams?.teamsJs.app.getContext().then((context) => {\n this.setState({\n theme: context.app.appInfo.theme\n });\n });\n<\/pre><\/div>\n\n\n<\/a>I want to show some dynamic content on my card. How can I display SharePoint list items in quick view? Is there a way to pass them to the template?<\/strong><\/h2>\n\n\n\n
\npublic get data(): IQuickViewData {\n return {\n items: this.state.items\n };\n}\n<\/pre><\/div>\n\n\n\n{\n "type": "AdaptiveCard",\n "$schema": "http:\/\/adaptivecards.io\/schemas\/adaptive-card.json",\n "version": "1.5",\n "body": [\n {\n "type": "Container",\n "$data": "${items}",\n "items": [\n {\n "type": "TextBlock",\n "text": "${title}",\n },\n \u2026\n ]\n }\n}\n<\/pre><\/div>\n\n\nIt seems that adaptive cards don’t allow icons in their schema. I really want to use a Fluent UI icon on my card. What should I do?<\/strong><\/h2>\n\n\n\n
\n{\n "type": "Image",\n "url": "https:\/\/adaptivecards.io\/content\/cats\/1.png",\n "altText": "Cat"\n }\n<\/pre><\/div>\n\n\n\n{\n "type": "Image",\n "url": "data:image\/png;base64,iVBORw0KGgoAAAA\u2026",\n "altText": "Cat"\n }\n<\/pre><\/div>\n\n\nSummary<\/h2>\n\n\n\n