Plumsail Forms not working in Teams desktop app list view

Forms SharePoint Online
1

Hello everyone,

I use Plumsail to customize my lists in SharePoint online. I also want to provide these lists in the teams desktop app. For that I use the SharePoint-Teams-App to embeed the lists in a teams tab.

image
image1873×281 27.7 KB

But when i click on new or try to edit or open an item nothing happens. When i open teams in the browser or on a mobile device it works just fine.

In the console of the Teams desktop app dev tools, there are no errors shown. When I look at the location.href the list shown in Teams points to a Sharepoint-Filebrowser url which looks like this: https://my.sharepoint.com/sites/mySite/_layouts/15/FileBrowser.aspx?fileBrowser=...

When i open this url in the browser i can see the list exactly like in teams. But here i can click on new and it opens the plumsail form but in a new tab. When I open the list in SharePoint and click on new it opwens the plumsail form in the same tab. Is Teams mabey restricting it because clicking new, edit or view in the list tries to open a new tab?

I can even change the location.href (in the teams-desktop-devtools) to the direct Sharepoint list url and it opens the list inside teams as if i was in SharePoint.

image
image1937×313 37.3 KB

And now i can click on new, edit or view and it opens Plumsail inside teams just fine (Maby because this button doesn't try to open i a new tab and just redirects?).

Maby this has something to do with the new List App Microsoft is using?
Is there something i can do about it, or did I do something wrong?

Thanks in advaced for your help!
With best regards Felix

2 Likes
2

Hi @Felix_F,

Could you try setting the forms to open in a panel?

3

Hi @IliaLazarevskii ,

i already tried this. In SharePoint it opens fine in a panle to the side but in teams still nothing happens.
I debugged teams desktop with the dev tools and found the function which gets executed when the new item button is clicked.

e.prototype.navigateTo = function(e) {
            var t = this;
            if (p || this.beforeUnload.allowHashNav(function() {
                return t.navigateTo(e)
            })) {
                var n = "string" == typeof e ? {
                    url: e
                } : e
                  , a = n.url
                  , i = e.hasOwnProperty("viewParams") ? e.viewParams : void 0
                  , r = e.hasOwnProperty("directOpen") ? e.directOpen : void 0
                  , o = void 0
                  , s = void 0;
                if (i && "#" === i[0] ? (o = i.substr(1),
                s = a) : (o = "#" === a[0] ? a.substr(1) : void 0,
                s = void 0),
                void 0 === n.frameId && f.isPWA && "#" !== a && (n.frameId = "_blank"),
                void 0 !== o)
                    n.ignoreHistory ? this._replaceState(o, !1, s) : this._pushState(o, s);
                else {
                    var c = void 0
                      , d = !1;
                    if (n && n.frameId && "_self" !== n.frameId)
                        try {
                            (c = window.open(r ? a : "", n.frameId)) && "_blank" === n.frameId && (c.opener = null),
                            c && !r && (this._disableNavigationEventListeners && "#" === a ? this.updateViewParams("", {
                                ignoreHistory: n.ignoreHistory,
                                clearOtherParams: !0
                            }) : c.location.href = a),
                            d = !0
                        } catch (e) {}
                    if (!c && !d)
                        try {
                            n.ignoreHistory ? window.location.replace(a) : window.location.href = a
                        } catch (e) {}
                }
            }
        }

the parameter e is an object like this {url: 'https://my.sharepoint.com/sites/mysite…B824961D4E8EADD00DF2DD123456729795D4EA26663CE42FF47D4', frameId: '_blank'}
The important part in the code is this one

 if (n && n.frameId && "_self" !== n.frameId)
                        try {
                            (c = window.open(r ? a : "", n.frameId)) && "_blank" === n.frameId && (c.opener = null),
                            c && !r && (this._disableNavigationEventListeners && "#" === a ? this.updateViewParams("", {
                                ignoreHistory: n.ignoreHistory,
                                clearOtherParams: !0
                            }) : c.location.href = a),
                            d = !0
                        } catch (e) {}
                    if (!c && !d)
                        try {
                            n.ignoreHistory ? window.location.replace(a) : window.location.href = a
                        } catch (e) {}

bcause if window.open("", '_blank') fails (because i think popups are blocked in teams), then c is null and this

 c && !r && (this._disableNavigationEventListeners && "#" === a ? this.updateViewParams("", {
                                ignoreHistory: n.ignoreHistory,
                                clearOtherParams: !0
                            }) : c.location.href = a),

gets not executed but d=!0 gets still executed and d is set to true. Thats why the if below is not executed.

if (!c && !d)
                        try {
                            n.ignoreHistory ? window.location.replace(a) : window.location.href = a
                        } catch (e) {}

I think this if was maby ment as a fallback if popups are blocked but d is always set to true if frameId is '_blank'.
I can set d to false manually in the debugger or set frameId to '_self', then the plumsail form is opend just fine because the if gets executed.

if (!c && !d)
                        try {
                            n.ignoreHistory ? window.location.replace(a) : window.location.href = a
                        } catch (e) {}

Maby this is a Bug on microsofts side or i am missing something.
Let me know what you think aubout this.
Thanks

1 Like
4

Hi @Felix_F,

This is a bug on Microsoft's side that prevents our code from taking control over certain UI elements. Unfortunately, we can't do much about this, only wait for Microsoft to fix these issues:

Applying Field Customizer Leads to Empty Cells in Teams Files Tab
SPFx ApplicationCustomizer script not loading in MS Teams tabs (List or Library)

1 Like
5

Hi,
We are experiencing the same problem. Can't Plumsail open a case with MS to get this resolved quickly?
As temporary workaround we tell the end users to use the 'website' app but then you get always this annoying security banner.

Thanks,
Johan

6

Hi Johan,
as a workaround you can also create a small spfx webpart which implements an iframe which then points directly to your Sharepoint list. The webpart can be added as a teams tab.
With the webpart you "bypass" the microsoft lists app and adding and editing items works just fine.

This worked for me.
Hope it helps.