Viva Connections, part of Microsoft Viva, is your gateway to a modern employee experience. The Viva connections app incorporates a customizable dashboard, the feed, and relevant resources all in one experience in the Microsoft Teams desktop and mobile app.

This Public preview release includes the ability to:

1. Set a SharePoint home site from the SharePoint admin center
2. Create, author, and manage a dashboard from the home site
3. Use Video news links to communicate announcements
4. Use the new Dashboard and Feed web parts on the home site
5. Brand the Viva Connections app for the desktop and mobile experiences for Android and iOS

Note: The preview is off by default and requires admin configuration to enable.

This message is associated with Microsoft 365 Roadmap ID: 86542

When this will happen

The Viva Connections Public preview release will begin rolling out starting September 9th and is expected to be completely rollout by September 20th.

Note: Many customers will notice that certain Viva Connections features will become available in SharePoint before the Viva connections app can be enabled in Teams. It’s recommended that you prepare for Viva Connections now but plan to enable the full experience in the Teams admin center after September 20th.

How this will affect your organization

The Viva connections app in Microsoft Teams will be blocked by default. A Teams admin can enable and customize the Viva Connections app in the Teams admin center once a home site in SharePoint has been designated and the dashboard has been published.

Set up home site from the SharePoint admin center

A home site can now be set from the SharePoint admin center instead of using PowerShell. From this home site, a dashboard can be created and configured for use in the Viva Connections app. Learn more about setting up a home site from SharePoint admin center.

Set up the Viva Connections dashboard for the first time

Once you’ve set your home site, you can create the Viva Connections dashboard from the home site’s settings panel. Then, create custom dashboard cards that are targeted to help employees find relevant resources and complete essential tasks.

Microsoft also recommends use of the Viva Connections Extensibility for building even more engaging custom experiences for your dashboard.

Use Video news links to communicate with your organization

Videos are an engaging way to reach users in your organization. Videos hosted on SharePoint sites can be published as Video news links from any SharePoint organizational news site. Video news links will appear in the Viva Connections Feed. Learn more about Video news links.

Use the new Dashboard and Feed web parts on the home site

Once you’ve set up the dashboard, you can use the Dashboard web part on the home site to surface Viva Connections content in SharePoint. Use the Feed web part on the home site to display a personalized list of conversations and news across the organization.

Customize Viva Connections branding for the desktop and mobile experience

In the Teams admin center, upload the logo or icon your organization would like to use for the Viva Connections experience. This logo or icon will appear in the Teams app bar for both desktop and mobile. Clicking on that logo will launch the Viva connections experience.

What you need to do to prepare

Viva Connections is an optional application that brings news, resources, and tasks into one place. Microsoft recommend that you plan to build and deploy your Viva Connections app as a part of your organization’s employee experience.

Review the Viva Connections overview where you will learn how to prepare your tenant and find step-by-step guidance on how to deploy Viva Connections for your organization.

Kontrolka oceniania w Adaptive Cards była w planach. Dawno temu. Jednak żadne aktualizacje nie zostały opublikowane i nadal nie ma takiej kontrolki „z pudełka”. Mimo to nadal można ją zbudować, może nie idealną, ale na pewno działającą.

Być może kontrolka oceniania z użyciem gwiazdek, o której myślisz, wyświetla np. 5 ikon z rzędu i ma wypełnione gwiazdki od lewej strony, aż do tej, nad którą znajduje się kursor. A także zwraca dokładną wartość wybranej gwiazdki. Jak w przykładzie poniżej:

No cóż… To nie jest możliwe w Adaptive Cards W ramach rekompensaty mogę zaproponować Ci rozwiązanie, którego używam, wykorzystujące przyciski. Idź za mną krok po kroku, jak zawsze:

Krok 1 – zaprojektuj kartę

Najpierw zaprojektuj kartę i przeciągnij, i upuść element ActionSet w miejscu, w którym chcesz utworzyć kontrolkę oceny:

Następnie dodaj 5 akcji w Action.Submit:

Po wykonaniu tej czynności skonfiguruj je w następujący sposób: usuń wartości Title i zamiast tego wypełnij właściwość Icon URL linkiem do ulubionej ikony gwiazdki:

Co jest niezwykle ważne: wysyłając kartę do Microsoft Teams, zostanie zwrócony identyfikator klikniętego elementu, dlatego pamiętaj o wypełnieniu właściwości identyfikatora każdego przycisku. Wartości te muszą być unikalne!

Możesz później trochę pobawić się układem, jeśli potrzebujesz, ale w zasadzie ogólny pomysł jest gotowy! Kontrola oceny jest na miejscu:

Krok 2 – skopiuj kod JSON karty i wyślij do Teams

Następnym i zasadniczo ostatnim krokiem jest skopiowanie kodu JSON własnej karty i wklejenie go w akcji „Post adaptive card and wait for a response” w przepływie cloud flow, wraz z logiką obsługi wybranej gwiazdki i jej wartości:

Po uruchomieniu przepływu będziesz mógł znaleźć swoją kartę w wybranym kanale lub rozmowie:

Po naciśnięciu dowolnej gwiazdki zauważysz, że akcja w przepływie zostaje wznowiona i zwracany jest identyfikator wciśniętego przycisku.

Krok 3 – wzbogać user experience

Możesz później użyć akcji „Update an adaptive card in a chat or channel”, aby zastąpić istniejącą kartę czytelnym potwierdzeniem:

Aby użytkownik sam zobaczył wybraną ocenę:

I to wszystko! Mam nadzieję, że Ci się spodoba i post ten okaże się przydatny.

Artykuł Kontrolka oceniania w Adaptive Cards pochodzi z serwisu Tomasz Poszytek, Business Applications MVP.

W tym poście chciałbym podzielić się z Tobą moimi najnowszymi odkryciami na temat sposobów, w jakie można wzmiankować wszystko w Microsoft Teams wysyłając wiadomości z Power Automate, niezależnie od tego, czy jest to użytkownik, tag, kanał czy zespół.

Wbudowane wzmiankowanie

W Power Automate dostępne są dedykowane akcje, które pozwalają wzmiankować użytkownika lub tag.

Akcje „Get an @mention token for a user” oraz „Get an @mention token for a tag”. Te dwie akcje zwracają tokeny, które można użyć w dowolnej innej akcji, która wysyła wiadomość do Microsoft Teams, na przykład „Post adaptive card in a chat or channel” lub „Post message in a chat or channel”:

Ważne! Token @mention dla tagu może być używany tylko wtedy, gdy karta adaptacyjna lub wiadomość są publikowane przy użyciu kontekstu użytkownika. Wzmiankowanie tagu nie będzie działać w kontekście bota.

Musisz tylko dodać tokeny do swoich kart lub wiadomości:

Wzmiankowanie korzystając z property msteams w Adaptive Card JSON

Drugim podejściem, którego możesz użyć, jest skorzystanie z właściwości msteams, którą można dodać na końcu karty adaptacyjnej wysłanej do Microsoft Teams. Przy okazji – ta właściwość może pomóc w wielu innych scenariuszach (źródło: Text formatting in cards – Teams | Microsoft Docs).

Dlaczego miałbyś to robić w ten sposób nie poprzez akcje @mention, nie wiem, ale podkreślam, że w ten sposób nie udało mi się wspomnieć o tagach, kanałach i zespołach. Chociaż „link” do kanału był wyświetlany na wysłanej karcie, nie zachowywał się prawidłowo, ponieważ najechanie kursorem nie rozwijało szczegółów kanału.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "id": "MentionTextBlock",
            "text": "Fun with mentions!",
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "This is user mention. Hi: <at>USER NAME</at>!",
            "size": "Medium"
        }
        {
            "type": "TextBlock",
            "text": "And this mentions tag <at>TAG NAME</at>!",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "This is channel mention. Hello: <at>CHANNEL NAME</at>!",
            "size": "Medium"
        }
    ],
    "msteams": {
        "entities": [
            {
                "type": "mention",
                "text": "<at>USER NAME</at>",
                "mentioned": {
                    "id": "8:orgid:USER AAD ID",
                    "name": "USER NAME"
                }
            }
            {
                "type": "mention",
                "text": "<at>TAG NAME</at>",
                "mentioned": {
                    "id": "TAG ID",
                    "name": "TAG NAME"
                }
            },
            {
                "type": "mention",
                "text": "<at>CHANNEL NAME</at>",
                "mentioned": {
                    "id": "CHANNEL ID",
                    "displayName": "CHANNEL NAME",
                    "conversationIdentityType": "channel"
                }
            }
        ]
    }
}

Ważne! By wzmiankować użytkownika musisz dodać prefix 8:orgid: przed wartością Azure AAD ID.

Co ważne, z powyższej metody mogłem skorzystać jedynie przy wysyłaniu kart w kontekście bota. Podczas korzystania z kontekstu użytkownika, akcja cały czas kończyła się błędem: „Message mention text needs to be specified.”. Bez względu na to, jak formatowałem obiekty wzmianek, nie mogłem tego rozwiązać. Więc się poddałem. Jeśli wiesz, jak sprawić by to zadziałało, napisz w komentarzach

Wzmiankowanie korzystając z webhook kanału

Po pierwsze, aby utworzyć webhooka do kanału, musisz przejść do menu „Connectors” w obrębie kanału:

Następnie skonfiguruj webhooka i skopiuj jego adres URL. Gdy to zrobisz, możesz użyć i skonfigurować akcję HTTP:

Musi to być żądanie POST wysłane do webhooka kanału. A w kwestii zawartości:

{
    "type": "message",
    "attachments": [
      {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
          "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
          "type": "AdaptiveCard",
          "version": "1.4",
          "body": [
            {
              "type": "TextBlock",
              "id": "MentionTextBlock",
              "text": "Fun with mentions!",
              "weight": "Bolder",
              "size": "Medium"
            },
            {
              "type": "TextBlock",
              "text": "This is user mention. Hi: <at>USER NAME</at>!",
              "size": "Medium"
            },
            {
              "type": "TextBlock",
              "text": "And this mentions tag <at>TAG NAME</at>!",
              "size": "Medium"
            },
            {
              "type": "TextBlock",
              "text": "This is channel mention. Hello: <at>CHANNEL NAME</at>!",
              "size": "Medium"
            }
          ],
          "msteams": {
            "entities": [
              {
                "type": "mention",
                "text": "<at>USER NAME</at>",
                "mentioned": {
                  "id": "8:orgid:USER AAD ID",
                  "name": "USER NAME"
                }
              },
              {
                "type": "mention",
                "text": "<at>TAG NAME</at>",
                "mentioned": {
                  "id": "TAG ID",
                  "name": "TAG NAME"
                }
              },
              {
                "type": "mention",
                "text": "<at>CHANNEL NAME</at>",
                "mentioned": {
                  "id": "CHANNEL ID",
                  "displayName": "CHANNEL NAME",
                  "conversationIdentityType": "channel",
                  "conversationIdentityType@odata.type": "#Microsoft.Teams.GraphSvc.conversationIdentityType"
                }
              }
            ]
          }
        }
      }
    ]
  }

Tutaj znowu, jak widać, używana jest właściwość msteams. W tym podejściu generowane są wszystkie wzmianki.

Mimo to moim zdaniem nie działają. Ponieważ kiedy najeżdżam na któryś z nich, nie wyświetla żadnych szczegółów, a wiadomość nie jest podświetlana jako wzmianka o mnie. Jeśli to dla Ciebie działa, daj mi proszę znać.

Ważne! Karty adaptacyjne wysyłane przez webhook nie pozwalają na wykonywanie żadnych czynności związanych z przesyłaniem (submit). Jeśli więc planujesz dodać formularz do karty, który użytkownicy mogą wypełnić i wysłać, przy takim podejściu nie będziesz w stanie odebrać odpowiedzi.

Wzmiankowanie używając GraphAPI

W tym podejściu wysyłasz Adaptive Card do endpointa GraphAPI: /beta/teams/team-id/channels/channel-id/messages. Wiecej szczegółów na temat tego podejścia znajdziesz tutaj: Send chatMessage in a channel or a chat – Microsoft Graph beta | Microsoft Docs.

Robię to za pomocą akcji o nazwie „Send an HTTP request” z grupy akcji „Office 365 Groups”. Czemu? Ponieważ jest to czynność standardowa, więc nie wymaga dodatkowej licencji. Możesz osiągnąć to samo, używając akcji „Invoke an HTTP Request” z grupy „HTTP with Azure AD”. Jednak ta jest akcją premium.

Kod, który należy wysłać, składa się z następujących sekcji:

1. Body – zawiera strukturę HTML, w tym miejsce na załącznik, którym w tym przypadku będzie karta adaptacyjna.
2. Attachments – ta właściwość zawiera wyescapeowany kod JSON karty Adaptive Card.
3. Mentions – ta właściwość zawiera obiekty wzmianek, dla każdego identyfikatora wzmianki obecnego w treści karty adaptacyjnej lub we właściwości Body -> Content.

{
    "subject": "Adaptive Cards test",
    "body": {
        "contentType": "html",
        "content": "<attachment id=\"AttachmentID\"></attachment>"
    },
    "attachments": [
        {
            "id": "AttachmentID",
            "contentType": "application/vnd.microsoft.card.adaptive",
            "contentUrl": null,
            "content": "{\r\n  \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\r\n  \"type\": \"AdaptiveCard\",\r\n  \"version\": \"1.4\",\r\n  \"body\": [\r\n    {\r\n      \"type\": \"TextBlock\",\r\n      \"id\": \"MentionTextBlock\",\r\n      \"text\": \"Fun with mentions!\",\r\n      \"weight\": \"Bolder\",\r\n      \"size\": \"Medium\"\r\n    },\r\n    {\r\n      \"type\": \"TextBlock\",\r\n      \"text\": \"This is user mention. Hi: <at id=\\\"0\\\">USER NAME</at>!\",\r\n      \"size\": \"Medium\"\r\n    },\r\n    {\r\n      \"type\": \"TextBlock\",\r\n      \"text\": \"This is channel mention. Hello: <at id=\\\"1\\\">CHANNEL NAME</at>!\",\r\n      \"size\": \"Medium\"\r\n    },\r\n    {\r\n      \"type\": \"TextBlock\",\r\n      \"text\": \"This is team mention. Hello: <at id=\\\"2\\\">TEAM NAME</at>!\",\r\n      \"size\": \"Medium\"\r\n    },\r\n    {\r\n      \"type\": \"TextBlock\",\r\n      \"text\": \"This mentions tag <at id=\\\"3\\\">TAG NAME</at>!\",\r\n      \"size\": \"Medium\"\r\n    }\r\n  ]\r\n}",
            "name": null,
            "thumbnailUrl": null
        }
    ],
    "mentions": [
        {
            "id": 0,
            "mentionText": "USER NAME",
            "mentioned": {
                "user": {
                    "id": "USER AAD ID",
                    "displayName": "USER NAME",
                    "userIdentityType": "aadUser"
                }
            }
        },
        {
            "id": 1,
            "mentionText": "CHANNEL NAME",
            "mentioned": {
                "conversation": {
                    "id": "CHANNEL ID",
                    "displayName": "CHANNEL NAME",
                    "conversationIdentityType": "channel"
                }
            }
        },
        {
            "id": 2,
            "mentionText": "TEAM NAME",
            "mentioned": {
                "conversation": {
                    "id": "TEAM ID",
                    "displayName": "TEAM NAME",
                    "conversationIdentityType": "team"
                }
            }
        },
        {
            "id": 3,
            "mentionText": "TAG NAME",
            "mentioned": {
                "tag": {
                    "id": "TAG ID",
                    "displayName": "TAG NAME"
                }
            }
        }
    ]
}

W ten sposób można naprawdę wzmiankować wszystko i działa to dla wszystkich typów wzmianek. A to dlatego, że akcja działa w kontekście użytkownika. Jeśli chcesz wysłać ją w kontekście aplikacji, musisz użyć akcji HTTP i podać szczegóły aplikacji usługi Azure AD, aby uwierzytelnić wywołanie.

Ważne! Wysłane w ten sposób karty adaptacyjne nie pozwolą na wykonanie akcji przesyłania (submit). Jeśli planujesz umożliwić użytkownikom przesyłanie formularzy wysłanych w Adaptive Cards, musisz wybrać inne podejście.

I to wszystko! Ufam, że uznasz to za przydatne.

Materiały

Kilka przydatnych linków, które pomogły mi lepiej zrozumieć jak wzmiankować w Microsoft Teams:

• Send chatMessage in a channel or a chat – Microsoft Graph beta | Microsoft Docs
• Text formatting in cards – Teams | Microsoft Docs
• Channel/Teams mention in Adaptive Cards – Power Platform Community (microsoft.com)
• Solved: Ms Teams @ Mentions in adaptive cards – Power Platform Community (microsoft.com)
• Mention a channel with Flow – Expiscornovus

Artykuł Jak wzmianiować użytkowników, tagi, kanały i zespoły używając Power Automate pochodzi z serwisu Tomasz Poszytek, Business Applications MVP.

Ten post został zainspirowany wiadomością, którą Sergi Dominquez wysłał mi na Twitterze. Okazuje się, że gdy żądanie z Actionable Message w Outlooku jest wysyłane do serwera, Outlook czeka tylko określoną ilość czasu na odpowiedź.

1/2 Hey @TomaszPoszytek some days ago I opened a issue in the Adaptive Card github related to issue while trying to refresh the UI. Finally they inform that there are some Timeouts: Http Action – 15 Secs and Auto-invoke Http Action – 6 Secs, this is not already documented.

— Sergi Dominguez (@sergibarca) April 5, 2022

The timeouts are described in no official documentation. The only reason Sergi found out that is actually a case was an answer under his question posted on GitHub. Muthurathinam from Microsoft answered, that there are timeouts indeed:

Przekroczenia limitów czasu nie są opisane w żadnej oficjalnej dokumentacji. Jedynym powodem, dla którego Sergi dowiedział się, że tak naprawdę istniej, była odpowiedź na jego pytanie zamieszczone na GitHub. Muthurathinam z firmy Microsoft odpowiedział, że rzeczywiście istnieją takie ograniczenia:

• Http Action – 15 sekund
• Auto-invoke Http Action – 6 sekund (aczkolwiek podczas moich testów żądanie było kończone już po 4 sekundach)

Http Action

Ta akcja jest używana w Actionable Messages, aby umożliwić użytkownikom wysyłanie danych z karty na serwer. Ta akcja jest wywoływana przez użytkownika po kliknięciu przycisku. Jak w poniższym przykładzie:

Akcja może służyć do wywołania zarówno żądania POST jak i GET.

Więcej na jej temat możesz znaleźć w oficjalnej dokumentacji: Design actionable message cards using Adaptive Card format – Outlook Developer | Microsoft Docs.

Auto-invoke Http Action

Ta akcja nie jest tak powszechnie znana. Jej celem jest umożliwienie wykonania akcji, gdy karta jest wyświetlana. Na przykład, aby odświeżyć kartę najnowszymi danymi do zatwierdzenia. Można ją dodać do kodu Actionable Message jako osobną właściwość (tak jak dodajesz Actions – pamiętaj o nagłówkach):

Ta akcja obsługuje wyłącznie żądania POST.

Więcej o niej znajdziesz w dokumentacji: Refresh an actionable message on open – Outlook Developer | Microsoft Docs.

Timeouty w Actionable Messages

I tak, wykonałem swoje testy. Niestety, Muthurathinam miał rację. Dodałem „Delay” w przepływie, aby zatrzymać natychmiastowe wysyłanie odpowiedzi. Następnie wysłałem sobie Actionable Message, która zawierała zarówno akcję Auto-invoke, jak i zwykłą akcję HTTP.

W przypadku Auto-invoke, żądanie było kończone już po upływie zaledwie 4 sekund:

Żądanie nie było jednak anulowane ani nic w tym rodzaju. Z drugiej strony, w tym scenariuszu nasłuch na odpowiedź został faktycznie zakończony, ponieważ cloud flow nie mógł wysłać żadnych danych z powrotem do klienta:

W przypadku Http Action, logi sieciowe pokazują, że Outlook faktycznie czekał aż 15 sekund, zanim anulował żądanie:

Jednak, co jest dziwne, cloud flow który miał wysłać odpowiedź, mógł to zrobić nawet po upłynięciu tego czasu. Co istotne jednak, karta mimo to nie została odświeżona. Zamiast tego, po 15 sekundach karta wyświetliła po prostu błąd:

Podsumowanie

Mogę w tym miejscu napisać tylko jedną rzecz. Upewnij się, że logika, która jest wykonywana przez akcje w Actionable Messages działa naprawdę szybko. Nikt nie lubi długo czekać na wynik wykonanej przez siebie akcji. Karty również Powodzenia!

Artykuł Timeouty w Actionable Messages pochodzi z serwisu Tomasz Poszytek, Business Applications MVP.

W kartach adaptacyjnych istnieje wiele sposobów pokazywania i ukrywania treści w zależności od innych treści lub warunków, a nawet interakcji użytkownika. Ale mimo iż większość z nich jest dostępna już od wersji 1.2 (a więc dość wczesnej) potrzeba jest trochę wiedzy, jak je faktycznie zaimplementować.

Istnieją trzy główne sposoby na pokazywanie i ukrywanie zawartości w Adaptive Cards:

1. Action.ShowCard
2. Action.ToggleVisibility
3. Warunki zdefiniowane poprzez właściwość „Only show when”

Przyjrzyjmy się teraz każdej z powyższych metod.

Action.ShowCard

Aby z niego skorzystać należy najpierw dodać element „ActionSet” do kanwy projektanta, a następnie wybrać Action.ShowCard z listy dostępnych opcji:

Gdy to zrobisz, zdefiniuj właściwości przycisku w oknie „Element properties”, takie jak Title i Id.

Wskazówka! Aby wyświetlić drugą kartę, która pojawi się po kliknięciu w dodany przycisk, kliknij ów przycisk dwukrotnie! Spowoduje to pojawienie się ukrytej karty, dzięki czemu możesz łatwo przygotować jej zawartość.

Następnie kliknij dwukrotnie przycisk, aby wyświetlić ukrytą kartę i przygotować jej zawartość:

Następnie przejdź do „Trybu podglądu” (Preview mode), aby zobaczyć, jak karta jest pokazywana i ukrywana po kliknięciu przycisku:

Ważne! Jeśli dodasz „Action.Submit” do ukrytej karty, wyśle ona dane ze wszystkich pól obecnych na tej karcie i „w górę” – a więc od wszystkich rodziców tej ukrytej karty. Przycisk „Action.Submit” na najwyższej karcie spowoduje wysłanie danych tylko z tej najwyższej karty.

Dane z kart są wysyłane od poziomu „rodzica” do „potomków”.

Action.ToggleVisibility

Aby z tej metody skorzystać należy najpierw dodać element „ActionSet” do kanwy projektanta, a następnie wybrać Action.ToggleVisibility z listy dostępnych opcji:

Następnie, podobnie jak w scenariuszu ShowCard, zdefiniuj właściwości dodawanego przycisku.

Ważne! W przeciwieństwie do ShowCard, ToggleVisibility wymaga wykonania pewnej pracy bezpośrednio w wygenerowanym JSON payload karty. Nie istnieje interfejs użytkownika, aby skonfigurować to w inny sposób.

Teraz dodaj do karty elementy, które chcesz pokazać i ukryć po kliknięciu przycisku. Następnie zdefiniuj ich właściwości:

1. Id – bezwzględnie wymagane jest zdefiniowanie unikalnych identyfikatorów dodawanych elementów. Identyfikatory służą do identyfikacji elementów i przełączania ich widoczności.
2. Initially visible – określ, czy elementy powinny być widoczne, gdy karta jest renderowana, czy ukryte. Przełączanie będzie albo je wówczas ukrywać lub pokazywać. Po odznaczeniu pola wyboru na element zostanie nałożony na szary wzór.

Teraz przejdź do kodu JSON i znajdź definicję przycisku ToggleVisibility. Dodaj tam następujący kod:

"targetElements": [ "colon delimited list of elements' Ids to toggle" ]

Ważne! Jedynym „minusem” tego podejścia jest, że w przypadku dodania zawsze widocznego przycisku „Submit”, wyśle on dane ze wszystkich pól, nawet jeśli są ukryte.

Ostatnim krokiem jest przetestowanie tego. Przełącz się w tryb „Podgląd” i sprawdź zachowanie swojej karty:

Only show when

Podejście to wykorzystuje „język szablonów kart adaptacyjnych”. Aby móc skorzystać tej metody należy najpierw zdefiniować Dane (Data), które będą powiązane z kartą. Kiedy już masz dane, możesz stworzyć warunek, który określi, kiedy element powinien być widoczny:

Możesz używać różnych typów porównań, zarówno do typów danych całkowitych, dat, logicznych, jak i stringów.

Ważne! W przeciwieństwie do „Toggle”, pokazywanie i ukrywanie elementów w oparciu o warunki ma miejsce podczas renderowania karty. Na dzień dzisiejszy dane, z których korzysta karta, są tylko statyczne, więc nie można ich zmienić po wyświetleniu karty. Oznacza to, że jeśli pole ma warunek uniemożliwiający jego wyświetlenie, nawet jeśli ma ustawioną wartość domyślną, jego wartość nie zostanie przesłana z karty, dopóki pole nie jest widoczne.

Na koniec wejdź w tryb „Podgląd”, aby zobaczyć, jak zachowuje się Twoja karta:

I to wszystko! Mam nadzieję, że ten tutorial okaże się przydatny. Jeśli masz jakieś uwagi, zapisz je poniżej. Dzięki!

Artykuł Pokazywanie i ukrywanie zawartości w Adaptive Cards pochodzi z serwisu Tomasz Poszytek, Business Applications MVP.

Obrazy zawsze wzbogacają projekty Adaptive Cards. Jednak w Microsoft Teams max. payload (rozmiar) wiadomości to tylko 25KB i obejmuje on również rozmiar JSON samej karty. Dlatego bardzo często nie jest możliwe wyświetlenie nawet najmniejszego obrazu w trybie inline. Jakie zatem są inne opcje?

Obrazki w Adaptive Cards

Zasadniczo obrazy są wyświetlane na kartach adaptacyjnych przy użyciu elementu „Image”. W jego właściwościach musisz wpisać adres URL do obrazu:

Ważne! Adres URL obrazu musi zaczynać się od https i być bezpośrednim linkiem do samego pliku (kończyć się na jpg, png, tiff itp.).

Ok, więc jakie są opcje wyświetlania obrazu

1. Poprzez bezwzględne hiperłącze do samego pliku
2. Poprzez data uri – zakodowana do formatu base64 zawartość pliku

Pierwsze podejście wyjaśniłem już powyżej. Jest bardzo proste. Drugie wymaga pobrania zawartości pliku i zakodowania jej za do stringu base64. Można to zrobić samodzielnie, korzystając z usług online, np. Base64 Image Encoder. Lub używając wyrażenia dataUri(zawartość pliku) w Power Automate:

To, co jest zwracane, wygląda jak następujący ciąg: data:image/jpeg;base64,/9j/4AAJRgABAQ….QP//Z. Im dłuższy jest ten ciąg, tym większy jest plik. Na koniec ten ciąg (lub wyrażenie w Power Automate) należy umieścić jako wartość we właściwości Url elementu Image w projekcie karty adaptacyjnej.

Ważne! Rozmiar wiadomości Microsoft Teams może mieć rozmiar max. 25 KB na dzień dzisiejszy – wliczając w to JSON. Więc jeśli zakodujesz obraz w base64, łatwo zorientujesz się, że posiadanie tak wielu znaków spowoduje, że rozmiar z łatwością przekroczy ten limit. 25 KB to 25 000 bajtów, a jeden znak jest kodowany jako od 1 do 4 bajtów. Na przykład $ potrzebuje jednego bajtu, podczas gdy € potrzebuje 3 bajtów.

Gdzie przechowywać obrazy?

Zasadniczo obraz, który ma być wyświetlany, musi być dostępny anonimowo. Dzieje się tak, ponieważ karta Adaptive Card w MS Teams jest wyświetlana przez bota Teams, a nie konto uwierzytelnionego użytkownika. W związku z tym nie ma ono takich samych uprawnień dostępu jak użytkownik, który wyświetla kartę i najpewniej nie ma dostępu do pliku.

Wiedząc o tym, nie jest możliwe przechowywanie i wyświetlanie obrazów z SharePoint przy użyciu ścieżki bezwzględnej. Możesz spróbować, najpierw przekonwertować obrazy na data uri, jednak pamiętaj o rozmiarze wiadomości

Jakie inne sposoby są zatem możliwe?

1. Anonimowy serwer FTP
2. Usługi online do przechowywania obrazów, np.: Imgur
3. WordPress
4. Azure Blob Storage
5. i inne, pozwalające na udostępnianie plików nie wymagajace uwierzytelnienia

OneDrive nie może służyć jako magazyn do przechowywania obrazów, ponieważ nawet jeśli zdecydujemy się udostępnić obraz komukolwiek:

Wygenerowany link nadal nie jest prawidłowym, bezwzględnym linkiem do samego pliku, ale do strony, która wyświetla obraz, więc gdy umieścisz go jako wartość Url, obraz nie zostanie wyświetlony:

Jak bezpiecznie przechowywać obrazy, ale nadal wyświetlać je w Adaptive Cards?

W takim przypadku należy poszukać usług, które pozwalają zabezpieczyć zawartość za pomocą connection string/ SAS (shared access signature), które można dodać do bezwzględnego adresu URL jako parametry url. Moim ulubionym jest Azure Blob Storage. Pokażę ci teraz jak.

1. Zaloguj się do portalu Azure i utwórz Storage account:

2. Gdy konto jest utworzone, przejdź do niego i:
   1. Kliknij na Containers
   2. Kliknij link do stworzenia nowego kontenera
   3. Wpisz jego nazwę i ustaw poziom dostępu na Private

3. Teraz prześlij obraz, który chcesz wyświetlić w Adaptive Card:
   1. Kliknij link Upload
   2. Wybierz plik, który chcesz przesłać i określ wszystkie właściwości zgodnie z własnymi potrzebami
   3. Wreszcie po przesłaniu przejdź do strony Shared access tokens

4. Na koniec wygeneruj token SAS, który możesz dołączyć do linku bezwzględnego do obrazu, aby udostępnić go do wyświetlenia.
   1. Zdefiniuj poziom uprawnień – w tym scenariuszu wystarczy tylko Read
   2. Zdefiniuj daty wygaśnięcia – kiedy token wygaśnie, a zasób ponownie stanie się niedostępny
   3. Wybierz tylko HTTPS, ponieważ tylko taki protokół obsługują karty Adaptive Card
   4. Kliknij, aby wygenerować token SAS i URL
   5. Skopiuj token SAS

Teraz możesz wrócić do zawartości kontenera, otworzyć szczegóły pliku, skopiować jego ścieżkę i dołączyć token SAS:

Następnie wklej taki adres URL z powrotem do właściwości Url elementu Image w Adaptive Card i voilla! Obraz zostanie prawidłowo wyświetlony:

Mam nadzieję, że ten krótki poradnik okaże się przydatny. Napisz w komentarzach, jakich innych dostawców używasz do bezpiecznego przechowywania obrazów i uzyskiwania do nich dostępu za pomocą SAS/ tokenów dostępu.

Artykuł Wyświetlanie obrazków w Adaptive Cards pochodzi z serwisu Tomasz Poszytek, Business Applications MVP.