{"id":28896,"date":"2024-09-09T05:00:00","date_gmt":"2024-09-09T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=28896"},"modified":"2024-08-27T10:05:55","modified_gmt":"2024-08-27T08:05:55","slug":"adaptive-card-extension-wskazowki-i-porady-dla-programistow","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/adaptive-card-extension-wskazowki-i-porady-dla-programistow\/","title":{"rendered":"Adaptive Card Extension \u2013 wskaz\u00f3wki i porady dla programist\u00f3w"},"content":{"rendered":"\n

Je\u015bli jeste\u015b programist\u0105 i korzystasz z Viva Connections, by\u0107 mo\u017ce wiesz, \u017ce istnieje dedykowany typ komponent\u00f3w SPFx do tej platformy \u2013 Adaptive Card Extension, czyli ACE. ACE sprawdzi si\u0119 \u015bwietnie w wielu scenariuszach \u2013 od przedstawiania szczeg\u00f3\u0142\u00f3w lotu albo zam\u00f3wienia, po wy\u015bwietlanie galerii obraz\u00f3w. Na stronie Microsoft mo\u017cesz znale\u017a\u0107 podstawowy samouczek<\/a> dotycz\u0105cy ich tworzenia.<\/p>\n\n\n\n

Nawet je\u015bli jeste\u015b prawdziwym fanem Microsoft i krok po kroku prze\u015bledzisz jego tutorial, mo\u017cesz mie\u0107 pytania na temat ACE. W artykule rozwiejemy te w\u0105tpliwo\u015bci i stworzymy najlepsze rozszerzenie SPFx w \u017cyciu! Zaczynajmy \ud83d\ude09<\/p>\n\n\n\n

\"Przyk\u0142ad<\/a>
Ryc. 1 Przyk\u0142ad panelu Viva Connections<\/figcaption><\/figure>\n\n\n\n

Jak mog\u0119 stworzy\u0107 projekt Adaptive Card Extension? Nie widz\u0119 takiej opcji w moim Yeoman!<\/strong><\/h2>\n\n\n\n

Hej, zachowaj spok\u00f3j! Upewnij si\u0119, \u017ce Tw\u00f3j generator SharePoint w Yeoman jest zaktualizowany. Na chwil\u0119 obecn\u0105 najlepiej, aby Tw\u00f3j SPFx by\u0142 co najmniej w wersji 1.18. Je\u015bli nie wiesz, jak sprawdzi\u0107 swoj\u0105 wersj\u0119, mo\u017cesz skorzysta\u0107 z postu Waldka<\/a>.<\/p>\n\n\n\n

Przy okazji warto rzuci\u0107 okiem na tabel\u0119 kompatybilno\u015bci<\/a>, aby upewni\u0107 si\u0119, \u017ce Twoje pakiety Node.js, TypeScript i React r\u00f3wnie\u017c maj\u0105 odpowiedni\u0105 wersj\u0119. \u00a0<\/p>\n\n\n\n

Temat adaptive cards wydaje si\u0119 by\u0107 bardzo skomplikowany. Od czego mam zacz\u0105\u0107?<\/strong><\/h2>\n\n\n\n

Zainspiruj si\u0119 projektami Microsoft<\/a> lub sp\u00f3jrz na przyk\u0142ady dostarczone przez PnP<\/a>. Gdy znajdziesz co\u015b interesuj\u0105cego, dostosuj rozwi\u0105zanie w projektancie<\/a>.<\/p>\n\n\n\n

Pami\u0119taj \u2013 nie musisz kopiowa\u0107 swojego szablonu do projektanta za ka\u017cdym razem, gdy chcesz go zaktualizowa\u0107! Do niewielkich zmian i szybkiego podgl\u0105du \u015bwietnie sprawdzi si\u0119 rozszerzenie Microsoft \u201eAdaptive Card Previewer\u201d. Zainstaluj je w swoim Visual Studio Code.<\/p>\n\n\n\n

\"Rozszerzenie<\/a>
Ryc. 2 Rozszerzenie Adaptive Card Previewer w Visual Studio Code<\/figcaption><\/figure>\n\n\n\n

I pami\u0119taj \u2013 jak w przypadku wielu umiej\u0119tno\u015bci, trening czyni mistrza!<\/p>\n\n\n\n

Ikona rozszerzenia nie jest wy\u015bwietlana. Czy \u017ale co\u015b ustawiam?<\/strong><\/h2>\n\n\n\n

Po pierwsze, zajrzyj do poradnika Microsoft \u2013 znajdziesz tam informacj\u0119, \u017ce ikon\u0119 nale\u017cy ustawi\u0107 w manife\u015bcie rozwi\u0105zania. Sugeruj\u0119 skonfigurowanie dw\u00f3ch w\u0142a\u015bciwo\u015bci ikon:<\/p>\n\n\n\n