Teams Webclient vs Teams Desktop Client

[RussatCBDigital]

We are currently implementing the OneDriveFilePicker v8 in a custom Teams tab application that integrates with a partner 3rd party e signature platform. When using from the web client the picker behaves as expected. However, when same code is tested in the desktop client it seems that the picker app is blocked from loading. Can the developers please verify that the opening of the OneDriveFilePicker is possible in the desktop client (similar to "Attach cloud files" from chat) and if so can someone point to a sample configuration that might point us in a direction to resolve this issue?

[patrick-rodgers]

Can you share your config file (obfuscating any private details)?

[RussatCBDigital]

Here is my picker config. Thanks

{
    sdk: "8.0",
    entry: {
        oneDrive: {
        },
    },
    authentication: {},
    messaging: {
        origin: "<app url>",
        channelId: "27"
    },   
    typesAndSources: {
        mode: "files",
        pivots: {
            sharedLibraries: true, 
            recent: true,
            oneDrive: true,
        },
    },
}

[patrick-rodgers]

I am currently not able to duplicate. Are you sending the authentication token in the intitial POST request to the form as shown in the example? If you don't the picker won't load in an iframe.

[RussatCBDigital]

Just to clarify: I am using the @pnp/picker-api sdk in the following fashion: async function createWindow(e: { preventDefault: () => void; }) {

    e.preventDefault();

    // setup the picker with the desired behaviors
    const picker = Picker(window.open("", "Picker", "width=800,height=600")!).using(
        Popup(),           
        MSALAuthenticate(msalParams),    

    );

    // optionally log notifications to the console
    picker.on.notification(function (this: IPicker, message) {
        console.log("notification: " + JSON.stringify(message));
    });    

    // activate the picker with our baseUrl and options object
    try{const results = await picker.activate({
        baseUrl,
        options,
    });
    if (results){
        console.log("Picker Result: ", results);

        setsharepointFileUrl(results.items[0].webUrl)
        setsharepointFileName(results.items[0].name)
        setfileChosen(true);
        setfileChosen(false);
        //document.getElementById("pickedFiles")!.innerHTML = `<pre>${JSON.stringify(results, null, 2)}</pre>`;
    }

    }
    catch (error) {
        console.log(error);
    }

}

This works as expected in the Teams web client, however in the Teams desktop client no action or error is provided.

If you are saying that in order to make this work in the Teams desktop client I need to use in an iframe I can revist the sample you pointed me too. But I am currently trying to use the sdk to accomplish this.

[patrick-rodgers]

That SDK is meant as an example, not necessarily for use directly in production code as-is and not something we are publishing/supporting independently from the picker.

If the authentication is set correctly and you aren't seeing the error "Could not gain auth token in form setup." then that part should be OK. Have you tried without the SDK, more inline with the basic example?

What kind of thing did you create? Teams App, SPFx? Are you able to share your solution, right now I am not even sure what you've built. Where is the picker being used? Does the thing you built support popups within the desktop client or are they possibly being blocked?

[patrick-rodgers]

Closing as resolved through the new Teams Picker sample.