Crear una aplicación de portal de intranet de Teams desde un sitio o una página de SharePoint OnlineCreate a Teams 'Intranet Portal app' from a SharePoint Online site or page

Siga los pasos de este artículo para crear una aplicación independiente y estática en Teams que se vincule al sitio de intranet de su organización.Use the steps in this article to create a standalone and static app inside of Teams that links to the intranet site for your org.

Se creará una Aplicación personal de Teams del sitio de intranet de SharePoint y se mostrará como una pestaña dentro de Teams.A Teams Personal App of your SharePoint intranet site is created, and will appear as a tab inside of Teams. Esta pestaña puede contener información importante para todos los usuarios de Teams.This tab can contain information important to all your Teams users. Es una forma rápida y cómoda de que los usuarios de Teams tengan acceso a las actualizaciones con tan solo un clic en una pestaña.It is a quick and convenient way for Teams users to access updates just a tab click away.

Tenga en cuenta que el proceso que se muestra debe usar un sitio o una página de SharePoint modernos para funcionar.Be aware that the process shown must use a modern SharePoint site or page to work. Este proceso no está disponible para páginas y sitios clásicos.This process is not available for classical sites or pages.

Importante

Asegúrese de que la carga lateral de aplicaciones de Teams está habilitada para su espacio empresarial.Make certain that side-loading of Teams apps is enabled for your tenant. Según lo avanzado que se encuentre el proceso de migración del portal de administración de Teams, es posible que tenga que habilitarlo en Teams > Administrador o, en la versión anterior del portal, en Administrador > Configuración > Servicios y complementos > Microsoft Teams > Aplicaciones > Aplicaciones externas.Depending on where you are in the migration process of the Teams Admin portal, you might need to enable it either under Teams > Admin, or under Admin > Settings > Services and Add-ins > Microsoft Teams > Apps > External Apps, in the previous version of the portal!

Usar App Studio para crear una aplicación independiente de SharePoint OnlineUse App Studio to create your standalone SharePoint Online app

Antes de empezar:Before you begin:

  1. Tendrá que conocer la dirección URL de un sitio o una página de grupo o de comunicación de SharePoint Online moderno.You'll need to know the URL of a SharePoint Online modern Communication or Team site, or page.

    • Estos sitios siempre incluirán /teams/ o /sites/ en sus rutas de acceso.These sites will always have either /teams/ or /sites/ in their paths.
  2. Tendrá que conocer el subdominio de su espacio empresarial, que se usará en el marcador de posición {{subdomain}}.You'll need to know your tenant's subdomain, which will be used in the placeholder {{subdomain}}.

  3. Este artículo usará el marcador de posición {{siteUrl}} para la dirección URL del sitio o la página que haya elegido.This article will use {{siteUrl}} as a placeholder for the URL of the site or page you chose.

  4. Además, se usará {{sitePath}} para indicar la ruta de acceso de la dirección URL (ej.: /teams/Contoso).Also, {{sitePath}} will be used to denote the path of the URL (ex: /teams/Contoso).

    • Ejemplo de rutas de acceso: /teams/Contoso o /sites/ContosoExample paths: /teams/Contoso or /sites/Contoso

En primer lugar, siga estos pasos:Begin by following the steps below:

  1. Vaya a la tienda de Teams.Go to the Teams Store.

  2. Instale o abra App Studio.Install or open App Studio.

  3. Haga clic en Abrir, junto a la opción Aplicación.Click Open, next to the App option.

  4. Con App Studio abierto, haga clic en Editor de manifiestos.With App Studio open, click on Manifest Editor.

  5. Cree una nueva aplicación.Create a new app.

  6. Rellene todos los Detalles de la aplicación.Fill in all App Details.

  7. Haga clic en Pestañas en Capacidades.Click on Tabs under Capabilities.

  8. Haga clic en Agregar en la Pestaña personal.Click Add under Personal Tab.

  9. Rellene el Nombre y elija un identificador de entidad único nuevo.Fill in the Name and choose a new unique Entity ID.

  10. Rellene contentURL y la dirección URL del sitio web.Fill in the contentURL and Website URL.

  1. Desplácese hasta Dominios y permisos.Navigate to Domains and Permissions. Asegúrese de que la sección dominios válidos contiene el nombre de dominio de SharePoint Online.Make sure the valid domains section contains your SharePoint online domain name.

    Ejemplo: contoso.sharepoint.comExample: contoso.sharepoint.com

  2. Agregue las siguientes propiedades de inicio de sesión único de la aplicación web:Add the following web app single sign-on properties:

    Ejemplo: Id. de aplicación de AAD: 00000003-0000-0ff1-ce00-000000000000 Dirección URL de recurso: {{subdomain}}.sharepoint.comExample: AAD application ID: 00000003-0000-0ff1-ce00-000000000000 Resource Url: {{subdomain}}.sharepoint.com

    Realice el inicio de sesión único de la aplicación web, con id. y dirección URL.

  3. Guarde estas propiedades y, luego, desplácese hasta Probar y distribuir.Save these properties and then navigate to Test and distribute.

  4. Instale la aplicación para probar la aplicación personalmente.Install the app to test the application personally.

Importante

Si no usa Teams App Studio, tendrá que comprimir el archivo manifest.JSON que acaba de crear; vaya a la tienda de aplicaciones de Teams y haga clic en el vínculo cargar aplicación personalizada (en la parte inferior derecha de la tienda de aplicaciones).If you aren't using Teams App Studio, you will have to .zip the manifest.JSON file you just created, navigate to the App Store in Teams, and click upload custom app link (at the bottom right of the App Store). Esto hará que la aplicación esté disponible para usted.This will make the app available to you.

  1. Ahora la aplicación está disponible como una pestaña estática para que pueda cargarla y verla en Teams.Now the app is available as a static tab for you to load and view in Teams.

Probar y ver la nueva pestaña estáticaTest and view your new static tab

Para ver la nueva pestaña en el escritorio de Teams, desplácese hasta el signo de puntos suspensivos (...) en la parte izquierda de la barra de aplicaciones.To view the new tab on the Teams desktop, navigate to the ellipses () in the left-hand side of your app bar. Buque la nueva aplicación, cargue y pruebe la aplicación independiente en Teams.Find your new app, load it, and test your standalone application in Teams.

Si desea que la nueva aplicación esté disponible en el menú de la izquierda en una posición superior, debe usar una configuración de directiva de aplicaciones.If you want to make the new app available in the left menu at a higher position, you must use an app policy setting for this. Encontrará esta opción en la sección Administrador de equipo > directiva de aplicaciones > agregar una aplicación anclada.This setting can be found under the Team admin section > app policy > add a pinned application. Cuando asigne la directiva a un usuario para realizar pruebas, el cambio se mostrará unas horas más tarde.When you assign the policy to a user for testing, the change will appear a few hours later. Teniendo esto en cuenta, decida lo antes posible donde debería aparecer la aplicación para evitar retrasos.With this in mind, please decide where the app should appear at your earliest convenience to help avoid delays.

Para ver y probar la nueva aplicación en un dispositivo móvil, abra el cajón de aplicaciones pulsando en la comilla angular (^) situada encima de la barra de pestañas de la parte inferior de la pantalla.To view and test the new app on a mobile device, open the app drawer by tapping on the chevron (^) above the tab bar near the bottom of your screen. Busque la aplicación y desplácese hasta ella en el dispositivo móvil.Find your app and navigate to it on your mobile device.

Precaución

La compatibilidad móvil está actualmente como Versión preliminar para desarrolladores.Mobile support is currently in Developer Preview. Para habilitar la Versión preliminar para desarrolladores, vaya a Configuración > Acerca de y, luego, habilite el modo Versión preliminar para desarrolladores.To enable Developer Preview, navigate to Settings > About and then enable Developer Preview mode.

Ejemplo de archivo Manifest.JSONA Sample Manifest.JSON file

El archivo JSO que genere tendrá un aspecto similar al siguiente.The JSO file you generate will look something like the one below.

{

    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",

    "manifestVersion": "1.5",

    "version": "1.0.0",

    "id": "33ebded3-931c-4333-b0c5-b51dd8738873",

    "packageName": "com.contoso.teams.devapp",

    "developer": {

        "name": "Contoso", ''

        "websiteUrl": "https://www.contoso.com",

        "privacyUrl": "https://www.contoso.com/privacy",

        "termsOfUseUrl": "https://www.contoso.com/terms"

    },

    "icons": {

        "color": "color.png",

        "outline": "outline.png"

    },

    "name": {

        "short": "Contoso Intranet", '

        "full": "Intranet Portal for Contoso"

    },

    "des    ription": {

        "short": "Intranet portal for Contoso",

        "full": "This app is to demonstrate the capabilities of hosting a SharePoint communication and team site as a standalone app in Teams"

    },

    "accentColor": "#FFFFFF",

    "staticTabs": [

        {

                     "       nti        Id":       "com    unicat    onSi    eTab",

            "name": "Contoso Net",

            "contentUrl": "https://contoso.sharepoint.com/sites/ContosoNet/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/ContosoNet/",

            "websiteUrl": "https://contoso.sharepoint.com/sites/ContosoNet",

            "scopes": [

                "personal"

            ]

        },

        {

            "entityId": "teamSiteTab",

            "name": "Team Contoso",

            "contentUrl": "https://contoso.sharepoint.com/teams/TeamContoso/_layouts/15/teamslogon.aspx?SPFX=true&dest=/teams/TeamContoso/",

            "websiteUrl": "https://contoso.sharepoint.com/teams/TeamContoso",

            "scopes": [

                "personal"

            ]

        }

    ],

    "permissions": [

        "identity",

        "messageTeamMembers"

    ],

    "validDomains": [

        "contoso.sharepoint.com"

    ],

    "webApplicationInfo": {

        "id": "00000003-0000-0ff1-ce00-000000000000",

        "resource": "https://contoso.sharepoint.com"

    }

}