New Teams is being forced in March, yet integrations are still buggy and unpolished

[catmanjan]

https://learn.microsoft.com/en-us/microsoftteams/new-teams-automatic-upgrade-announced

So users will be forced to the new Teams in March, yet there are still big issues with integrations, sizes and styles of things just look wrong, e.g:

And similar examples can be found just about everywhere that an integration can occur...

[Prasad-MSFT]

@catmanjan - Thanks for raising this issue. Could you please share sample code snippet which you used? Is it only happening in New Teams and working in Teams Classic?

[catmanjan]

@Prasad-MSFT this isn't a snippet, this is our production software - it uses adaptive cards in search results - New Teams has the layout issues whereas Teams Classic does not

[Prasad-MSFT]

@catmanjan - We tried to repro this issue using our sample app and we are observing correct behaviour in both Teams Classic and New version. The search results are not getting cropped. New Teams:

[catmanjan]

@Prasad-MSFT here is a snippet from our card, try having cards with and without images, etc

                // the adapativeMetadataElements below are the ones that will be appear after selecting a search result
                var adaptiveMetadataElements = new List<AdaptiveElement>
                {
                    new AdaptiveTextBlock()
                    {
                        Text = !string.IsNullOrEmpty(result.Url.Raw) ? $"[{result.Title.Raw}]({result.Url.Raw})" : result.Title.Raw,
                        Size = AdaptiveTextSize.Medium,
                        Weight = AdaptiveTextWeight.Bolder,
                        Spacing = AdaptiveSpacing.None
                    },
                    new AdaptiveTextBlock()
                    {
                        Text = $"Modified: {result.Metadata.LastUpdated:d MMMM yyyy} · Creator: {result.CreatedBy.Raw}",
                        Size = AdaptiveTextSize.Small,
                        Weight = AdaptiveTextWeight.Lighter,
                        Spacing = AdaptiveSpacing.None,
                        Wrap = true
                    },
                    new AdaptiveTextBlock()
                    {
                        Text = $"{result.Breadcrumb.Raw?.Replace(@"\", @"\\")}{secureEmoji}",
                        Size = AdaptiveTextSize.Small,
                        Weight = AdaptiveTextWeight.Lighter,
                        Spacing = AdaptiveSpacing.None,
                        Wrap = true
                    }
                };

                // thumbnailCard is what appears in search results right after entering a query
                // thumbnailCard is identical to card, but Title is never a link, as links are not clickable in compose action search results
                var thumbnailCard = new ThumbnailCard
                {
                    Title = $"<div style=\"font-weight:600; word-break:break-word;\" title=\"Click here to view options\">{result.Title?.Raw}</div>",
                    Subtitle = $"<div style=\"word-break:break-word;\" title=\"Click here to view options\">{result.Body?.Snippet}</div>",
                    Text = $"<div style=\"word-break:break-word; white-space:nowrap; overflow:hidden;\" title=\"Click here to view options\">Modified: {result.Metadata!.LastUpdated:d MMMM yyyy} · Creator: {result.CreatedBy?.Raw}{relevancyPart}<br>{result.Breadcrumb?.Raw}{secureEmoji}</div>",
                    Images = new List<CardImage> { new CardImage { Url = $"{_hydraUrl}/icon/{imageType}" } }
                };

                var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3))
                {
                    Body = new List<AdaptiveElement>()
                    {
                        new AdaptiveColumnSet()
                        {
                            Columns = new List<AdaptiveColumn>()
                            {
                                // Icon Column
                                new AdaptiveColumn()
                                {
                                    Height = AdaptiveHeight.Auto,
                                    Width = AdaptiveColumnWidth.Auto,
                                    Items = new List<AdaptiveElement>()
                                    {
                                        new AdaptiveImage()
                                        {
                                            Url = new Uri($"{_hydraUrl}/icon/{imageType}"),
                                            Size = AdaptiveImageSize.Medium,
                                            Style = AdaptiveImageStyle.Default
                                        }
                                    }
                                },
                                // metadata column
                                new AdaptiveColumn()
                                {
                                    Height = AdaptiveHeight.Auto,
                                    Width = AdaptiveColumnWidth.Stretch,
                                    Items = adaptiveMetadataElements
                                }
                            }
                        },
                        new AdaptiveTextBlock()
                        {
                            Text = result.Body.Snippet?.Replace("<b>", "").Replace("</b>", ""),
                            Size = AdaptiveTextSize.Default,
                            Weight = AdaptiveTextWeight.Default,
                            Wrap = true
                        }
                    }
                };

                var actions = new List<AdaptiveAction>();

                if (!string.IsNullOrEmpty(result.Extension?.Raw))
                {
                    var protocol = result.Extension.Raw.ToOfficeProtocol();

                    if (!string.IsNullOrEmpty(result.EditUrl?.Raw) && !string.IsNullOrEmpty(protocol))
                    {
                        var editUrl = HttpUtility.UrlEncode($"{protocol}:ofe|u|{result.EditUrl.Raw}");

                        actions.Add(new AdaptiveOpenUrlAction()
                        {
                            Title = "Edit",
                            Url = new Uri($"{_teamsBotUrl}/launch.html?link={editUrl}")
                        });
                    }

                    // manage is only for items with a file and not in content manager
                    if (!result.Secure)
                    {
                        var downloadUrl = HttpUtility.UrlEncode(_hydraUrl + "/api/v1/file/download?ContentSourceId=" + result.Metadata?.ContentSourceId + "&Id=" + result.Metadata?.Id);
                        var callbackUrl = HttpUtility.UrlEncode($"{_hydraUrl}/api/v1/manage");
                        var manageUrl = HttpUtility.UrlEncode($"{_rmWorkspaceUrl}/external/record/IngressForm?Url={downloadUrl}&ContentSourceId={result.Metadata.ContentSourceId}&Id={result.Metadata.Id}&CallbackUrl={callbackUrl}");
                        var tokenUrl = $"{_hydraUrl}/api/v1/token/redirect?url={manageUrl}";

                        // only non CM records can be managed
                        actions.Add(new AdaptiveOpenUrlAction()
                        {
                            Title = "Protect Document",
                            Url = new Uri(tokenUrl)
                        });
                    }
                }

                if (result.Secure)
                {
                    // this is a CM document so we should show the properties form instead
                    var propertiesUrl = $"{_rmWorkspaceUrl}/external/record/IngressForm?Uri={result.Metadata.Id}";

                    // only CM records can show a properties
                    actions.Add(new AdaptiveOpenUrlAction()
                    {
                        Title = "Record Properties",
                        Url = new Uri(propertiesUrl)
                    });
                }

                // item is previewable.
                if (ExtensionHasPreview(result.Extension.Raw))
                {
                    /*
                     * To do a popup view we can make use of a deeplink which functions like the action below and we just set the url to be of the format:
                     * 
                     * https://teams.microsoft.com/l/task/{appid}?url={url}&height=700&width=1000&title={Some title which will appear under the app's name}
                     * 
                     * The height and width doesn't seem to be modifyable after the window is launched so we want to pick something sensible.
                     */

                    var previewUrl = $"{_hydraUrl}/api/v1/preview?ContentSourceId={result.Metadata.ContentSourceId}&DocumentId={result.Metadata.Id}";

                    // add "deeplink" preview
                    actions.Add(new AdaptiveOpenUrlAction()
                    {
                        Title = "Preview",
                        Url = new Uri($"https://teams.microsoft.com/l/task/{_microsoftAppId}?url={HttpUtility.UrlEncode(previewUrl)}&height=700&width=1000&title=Preview&inTeamsSSO=True")
                    });
                }

                // add actions to card
                adaptiveCard.Actions = actions;

                var attachment = new MessagingExtensionAttachment
                {
                    ContentType = AdaptiveCard.ContentType,
                    Content = adaptiveCard,
                    // this function correctly adds the content type for the preview
                    Preview = thumbnailCard.ToAttachment()
                };

                return attachment;
            });

[Prasad-MSFT]

Thanks @catmanjan for sharing this. We will check and will update you accordingly after testing from our side.

[Prasad-MSFT]

@catmanjan - We also tried to repro having cards with and without images and still it shows correctly.

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 3 days. It will be closed if no further activity occurs within 3 days of this comment.