Ixxerja l-feedback tiegħek:
Nixtiequ l-feedback tiegħek dwar id-docs tal-iżviluppaturi tal-Microsoft Teams. Jekk jogħġbok wieġeb l-istħarriġ qasir tagħna bi tliet mistoqsijiet.Ħu Stħarriġ
Dan il-brawżer m'għadux appoġġjat.
Aġġorna għal Microsoft Edge biex tieħu vantaġġ mill-aħħar karatteristiċi, aġġornamenti tas-sigurtà, u appoġġ tekniku.
This app is intended to be used in the context of Microsoft Teams, with all Fluid-related imports, initialization, and functions together. This provides an enhanced experience and makes it easier to use in the future. You can add the following code to the import statements:
ts
// TODO 1: Define the parameter key(s).// TODO 2: Define container schema.// TODO 3: Define connectionConfig (AzureClientProps).// TODO 4: Create Azure client.// TODO 5: Define create container function.// TODO 6: Define get container function.
Nota
The comments define all the functions and constants needed to interact with the Fluid service and container.
The constant is being exported as it appends to the contentUrl in the Microsoft Teams settings, and later for parsing the container ID in the content page. It's a common pattern to store important query parameter keys as constants, rather than typing the raw string each time.
Before the client can create any containers, it needs a containerSchema that defines the shared objects used in this application. This example uses a SharedMap as the initialObjects, but any shared object can be used.
Nota
The map is the ID of the SharedMap object and it must be unique within the container as any other DDSes.
Before the client can be used, it needs an AzureClientProps that defines the type of connection the client uses. The connectionConfig property is required to connect to the service. Local mode of Azure Client is used. To enable collaboration across all clients, replace it with Fluid Relay Service credentials. For more information, see how to set up the Azure Fluid Relay service.
As you create the container in the configuration page and append it to the contentUrl in Teams setting, you must return the container ID after attaching the container.
When you fetch the Fluid container, you need to return the container as your application must interact with the container and the DDSes inside it, in the content page.
Create Fluid container in the configuration page
Open the file src/client/<your tab name>/<your tab name>Config.tsx in your code editor.
The standard Teams tab application flow goes from the configuration to the content page. To enable collaboration, persisting the container while loading into the content page is crucial. The best solution to persist the container is to append the container ID onto the contentUrl and websiteUrl, the URLs of the content page, as a query parameter. Save button in the Teams configuration page is the gateway between the configuration page and the content page. It's a place to create the container and append the container ID in the settings.
Replace the onSaveHandler method with the following code. The only lines added here are calling the create container method defined earlier in Utils.ts and then appending the returned container ID to the contentUrl and websiteUrl as a query parameter.
Ensure you replace <your tab name> with the tab name from your project.
Twissija
As the content page URL is used to store the container ID, this record gets removed if the Teams tab is deleted.
Additionally, every content page can only support one container ID.
Refactor content page to reflect Fluid application
Open the file src/client/<your tab name>/<your tab name>.tsx in your code editor. A typical Fluid-powered application consists of a view and a Fluid data structure. Focus on getting/loading the Fluid container and leave all the Fluid related interactions in a React component.
Add the following import statements in the content page:
Remove all the code below the import statements in the content page and replace it with the following:
ts
exportconst <your tab name> = () => {
// TODO 1: Initialize Microsoft Teams.// TODO 2: Initialize inTeams boolean.// TODO 3: Define container as a React state.// TODO 4: Define a method that gets the Fluid container// TODO 5: Get Fluid container on content page startup.// TODO 6: Pass the container to the React component as argument.
}
Ensure you replace <your tab name> with the tab name that you define for your project.
As the Teams application is just an IFrame injection of a webpage, you need to initialize the inTeams Boolean constant in order to know if the application is inside Teams or not, and if the Teams resources, such as the contentUrl, are available.
Use a React state for the container as it provides the ability to dynamically update the container and the data objects in it.
Replace TODO 4 with the following code:
ts
const getFluidContainer = async (url : URLSearchParams) => {
const containerId = url.get(containerIdQueryParamKey);
if (!containerId) {
throwError("containerId not found in the URL");
}
const container = await getContainer(containerId);
setFluidContainer(container);
};
Analyze the URL to get the query parameter string, defined by containerIdQueryParamKey, and retrieve the container ID. With the container ID, you can load the container. Once you have the container, set the fluidContainer React state, see previous step.
After you've defined how to get the Fluid container, you need to tell React to call getFluidContainer on load, and then store the result in state based on if the application is inside Teams.
React's useState hook provides the required storage, and useEffect allows you to call getFluidContainer on render, passing the returned value into setFluidContainer.
By adding inTeams in the dependency array at the end of the useEffect, the app ensures that this function only gets called on content page load.
Replace TODO 6 with the following code:
ts
if (inTeams === false) {
return (
<div>This application only works in the context of Microsoft Teams</div>
);
}
if (fluidContainer !== undefined) {
return (
<FluidComponent fluidContainer={fluidContainer} />
);
}
return (
<div>Loading FluidComponent...</div>
);
Nota
It's important to ensure that the content page is loaded inside Teams and that the Fluid container is defined before passing it into the React component (defined as FluidComponent, see below).
Create React component for Fluid view and data
You've integrated the basic creation flow of Teams and Fluid. You can now create your own React component that handles the interactions between the application view and Fluid data. From now, the logic and flow behaves just like other Fluid-powered application. With the basic structure set up, you can create any of the Fluid examples as a Teams application by changing the ContainerSchema and the application view's interaction with the DDSes/data objects in the content page.
Start the Fluid server and run the application
If you're running your Teams application locally with Azure Client local mode, ensure you run the following command in the Command Prompt to start the Fluid service:
HostNames with ngrok's free tunnels are not preserved. Each run generates a different URL. When a new ngrok tunnel is created, the older container will no longer be accessible. For production scenarios, see use AzureClient with Azure Fluid Relay.
Nota
Install an additional dependency to make this demo compatible with Webpack 5. If you receive a compilation error related to a "buffer" package, run npm install -D buffer and try again. This will be resolved in a future release of Fluid Framework.
Next steps
Use AzureClient with Azure Fluid Relay
As this is a Teams tab application, collaboration and interaction are the main focus. Replace the local mode AzureClientProps provided earlier with non-local credentials from your Azure service instance, so that others can join in and interact with you in the application. See how to provision your Azure Fluid Relay service.
Importanti
It's important to hide the credentials that you are passing into AzureClientProps from being accidentally committed to source control. The Teams project comes with a .env file where you can store your credentials as environment variables and the file itself is already included in the .gitignore. To use the environment variables in Teams, see Set and get environment variable.
Twissija
InsecureTokenProvider is a convenient way to test the application locally. It's your responsibility to handle any user authentication and use a secure token for any production environment.
Set and get environment variable
To set an environment variable and retrieve it in Teams, you can take advantage of the built-in .env file. The following code is used to set the environment variable in .env:
# .env
TENANT_KEY=foobar
To pass the contents of the .env file to our client-side app, you need to configure them into webpack.config.js so that webpack provides access to them at runtime. Use the following code to add the environment variable from .env:
You can access the environment variable in Util.ts
ts
// Util.ts
tokenProvider: new InsecureTokenProvider(JSON.parse(process.env.REACT_APP_TENANT_KEY!), { id: "user" }),
Suġġeriment
When you make changes to the code, the project automatically rebuilds and the application server reloads. However, if you make changes to the container schema, they will only take effect if you close and restart the application server. To do this, go to the Command Prompt and press Ctrl-C twice. Then run gulp serve or gulp ngrok-serve again.
Is-sors għal dan il-kontenut jista’ jinstab fuq GitHub, fejn tista’ wkoll toħloq u tirrevedi l-problemi u t-talbiet għall-immerġjar. Għal aktar informazzjoni, ara l-gwida għall-kontributuri tagħna.
Feedback ta’ Platform Docs
Platform Docs huwa proġett b’sors miftuħ. Agħżel link biex tipprovdi l-feedback:
Demonstrate skills to plan, deploy, configure, and manage Microsoft Teams to focus on efficient and effective collaboration and communication in a Microsoft 365 environment.
Learn to integrate device capabilities. Power platform to create Power apps, Power Virtual Agents, Virtual Assistant, app templates, Shift connectors, Moodle LMS.
Learn how to create deep links to an application and navigate using them in your Microsoft Teams apps and tabs and generate deep link to share content to meetings.
Learn best practices or considerations for integrating existing web apps with Teams, API requirements, authentication, and deep linking of your app with Teams.