Compartir a través de


Tutorial: Crear un adaptador de aplicación web de UII

Puede crear un adaptador de la aplicación web si desea mejorar y editar las aplicaciones web para las que no tiene acceso al código origen o tiene permisos para cambiar mediante código administrado. Microsoft Dataverse proporciona una plantilla de Visual Studio para crear un adaptador de la aplicación web. La plantilla proporciona código básico como comentarios para ayudarle a comenzar a crear un adaptador de aplicación web.

En este tutorial, creará una aplicación web externa denominada QsWebApplication y la hospedará en Unified Service Desk. Después creará y configurará un adaptador de la aplicación web denominado MyWebApplicationAdapter para que la aplicación web externa interactúe con Unified Service Desk. La aplicación web tiene cuatro etiquetas: para el nombre del cliente, apellidos, dirección, e Id., y cuatro cuadros de texto correspondientes para mostrar los valores de Unified Service Desk.

Requisitos previos

  • Microsoft .NET Framework 4.6.2

  • Ejecute la aplicación del cliente de Unified Service Desk; necesaria para probar el control hospedado.

  • Visual Studio 2012, Visual Studio 2013 o Visual Studio 2015

  • NuGet Administrador de paquetes para Visual Studio 2012, Visual Studio 2013 o Visual Studio 2015

  • Plantillas del SDK de CRM para Visual Studio que contienen la plantilla de proyecto de control hospedado de la UII. Descargue las plantillas de SDK de CRM de la galería de Visual Studio y haga doble clic en el archivo CRMSDKTemplates.vsix para instalar la plantilla en Visual Studio.

Paso 1: Crear una aplicación web de ejemplo

  1. Descargue el paquete del SDK de la UII (.exe)

  2. Para extraer el contenido, haga doble clic en el archivo del paquete.

  3. Vaya a la carpeta <ExtractedFolder>\UII\SampleCode\UII\AIF\QsWebApplication y abra el archivo Microsoft.Uii.QuickStarts.QsWebApplication.csproj en Visual Studio.

  4. Presione F5 o elija Depurar>Iniciar depuración para alojar la aplicación web de ejemplo localmente en su equipo. La aplicación se hospedará en https://localhost:2627/.

    Aplicación web en Visual Studio.

Paso 2: Configurar una aplicación web

  1. Inicie sesión en la instancia de Dynamics 365.

  2. Vaya a Configuración>Unified Service Desk.

  3. Elija Controles hospedados.

  4. Elija Nuevo.

  5. En la página Nuevo control hospedado, especifique los siguientes valores.

    Campo Valor
    Nombre QsWebApplication
    Tipo de componente de USD Aplicación hospedada CCA
    Aplicación hospedada Aplicación hospedada web
    La aplicación es global Activado
    Mostrar grupo MainPanel
    Adaptador No usar adaptador
    La aplicación es dinámica No
    Hospedaje de aplicación Usar SetParent
    URL Especifique la ubicación en la que se hospedará la aplicación web. En este caso es https://localhost:2627/

    Captura de pantalla de configuración de aplicación web.

  6. Seleccione Guardar.

Paso 3: Pruebe la aplicación web

  1. Asegúrese de que la aplicación web de ejemplo que creó en el paso 1 sigue ejecutándose.

  2. Ejecute el cliente de Unified Service Desk para conectarse al servidor de Dataverse.

  3. Después de iniciar sesión correctamente, verá Ejemplo de la aplicación web externa en el escritorio.

  4. Haga clic en la pestaña Ejemplo de la aplicación web externa para ver su aplicación web hospedada en Unified Service Desk.

    Hospedaje de aplicaciones web en Unified Service Desk.

Nota

En este punto los campos están vacíos porque solo está hospedando la aplicación web externa en Unified Service Desk. Para llenarlos con valores de Unified Service Desk tenemos que crear un adaptador de la aplicación web como se muestra en el siguiente paso.

Paso 4: Cree el adaptador de la aplicación web

  1. Inicie Visual Studio y cree un nuevo proyecto.

  2. En el cuadro de diálogo Nuevo proyecto:

    1. En la lista de plantillas instaladas de la izquierda, expanda Visual C# y seleccione Plantillas SDK de CRM>Unified Service Desk>Adaptador de aplicación web de UII.

    2. Especifique el nombre y la ubicación del proyecto y haga clic en Aceptar para crear un nuevo proyecto.

    Captura de pantalla del adaptador web en Visual Studio.

    1. Elija WebAppAdapter.cs y actualice la definición de NotifyContextChange con el siguiente código para rellenar los campos de texto de la información de contexto. Más información en: Contexto)

      public override bool NotifyContextChange(Context context)  
              {  
                  // Populating text fields from context information.  
      
                  HTMLDocument htmlDoc = Browser.Document as HTMLDocument;  
                  if (htmlDoc != null)  
                  {  
                      IHTMLElementCollection htmlElementCollection = htmlDoc.all;  
                      IHTMLElement htmlFirstName = htmlElementCollection.item("txtFirstName", 0) as IHTMLElement;  
                      htmlFirstName.setAttribute("value", context["firstname"], 0);  
                      IHTMLElement htmlLastName = htmlElementCollection.item("txtLastName", 0) as IHTMLElement;  
                      htmlLastName.setAttribute("value", context["lastname"], 0);  
                      IHTMLElement htmlAddress = htmlElementCollection.item("txtAddress", 0) as IHTMLElement;  
                      htmlAddress.setAttribute("value", context["address1_line1"], 0);  
                      IHTMLElement htmlID = htmlElementCollection.item("txtID", 0) as IHTMLElement;  
                      htmlID.setAttribute("value", context["CustomerID"], 0);  
                  }  
                  return base.NotifyContextChange(context);  
              }  
      
      
    2. Agregue el siguiente código en la definición de reemplazo de DoAction para actualizar la aplicación con valores de Unified Service Desk

      public override bool DoAction(HostedWebApplication.WebAction action, ref string data)  
              {  
                  Trace.WriteLine(string.Format("{0}>>>>> RECEIVED (WebAction) Action : {1} ", this.Name, action.Name));  
      
                  // Check to see if the browser is working on something before allowing the system to do 'normal' behavior.  
                  if (Browser.WebBrowser.ReadyState != tagREADYSTATE.READYSTATE_COMPLETE)  
                  {  
                      // Browser is not in a state to process this request,  Queue it for when the browser is ready to handle it.   
                      Trace.WriteLine(string.Format("{0}>>>>> Browser Busy,({2}) Queuing Action : {1} ", this.Name, action.Name, Browser.WebBrowser.ReadyState.ToString()));  
                      qReqActionList.Enqueue(new BrowserActionData(action, data));  
                      return false;  
                  }  
                Trace.WriteLine(string.Format("{0}>>>>>>>>>>> Action:Name={1} Action:Url={2} Action:Query={3} Action:Init={4}", this.Name, action.Name, action.Url, action.QueryString, action.Initialization));  
      
                  // Get browser DOM and element collection.  
                  // Create an XML Document to load the passed in data to.  
                  HTMLDocument htmlDoc = Browser.Document as HTMLDocument;  
                  IHTMLElementCollection htmlElementCollection = htmlDoc.all;  
      
                  // Check action name for something we know how to process.  
                  switch (action.Name)  
                  {  
                      case "UpdateFirstName":  
                          IHTMLElement htmlFirstName = htmlElementCollection.item("txtFirstName", 0) as IHTMLElement;  
                          htmlFirstName.setAttribute("value", data, 0);  
                          break;  
                      case "UpdateLastName":  
                          IHTMLElement htmlLastName = htmlElementCollection.item("txtLastName", 0) as IHTMLElement;  
                          htmlLastName.setAttribute("value", data, 0);  
                          break;  
                      case "UpdateAddress":  
                          IHTMLElement htmlAddress = htmlElementCollection.item("txtAddress", 0) as IHTMLElement;  
                          htmlAddress.setAttribute("value", data, 0);  
                          break;  
                      case "UpdateID":  
                          IHTMLElement htmlID = htmlElementCollection.item("txtID", 0) as IHTMLElement;  
                          htmlID.setAttribute("value", data, 0);  
                          break;  
                  }  
                  return false;  
              }  
      
      
    3. Guarde el proyecto y créelo (Generar>Generar solución). Después de generar el proyecto correctamente, se genera un ensamblado (MyWebApplicationAdapter.dll) en la carpeta \bin\debug de su carpeta del proyecto. Necesitará este ensamblado más adelante para probar y usar el adaptador de la aplicación web.

Paso 5: Configure el adaptador de la aplicación web

  1. Inicie sesión en la instancia de Dynamics 365.

  2. En la barra de navegación, elija Dynamics 365.

  3. Elija Configuración>Unified Service Desk>Controles hospedados.

  4. En la lista de controles hospedados, seleccione el control hospedado QsWebApplication.

    Lista de controles hospedados.

  5. En la sección Configuración del adaptador, especifique los siguientes valores.

    Campo Valor
    Adaptador Usar adaptador
    URI MyWebApplicationAdapter
    Tipo MyWebApplicationAdapter.WebAppAdapter

    Configuración de adaptador web.

    Nota

    URI es el nombre del ensamblado y Tipo es el nombre del ensamblado (dll) seguido de un punto (.) y a continuación el nombre de clases en el proyecto de Visual Studio. En este ejemplo, el nombre del ensamblado es MyWebApplicationAdapter y el nombre de la clase es WebAdapter, que es el nombre de clase predeterminado cuando se crea un adaptador de aplicación web.

  6. Elija Guardar para guardar los cambios.

Paso 6: Pruebe el adaptador de la aplicación web

  1. Copie el ensamblado que contiene la definición del adaptador de la aplicación web de la carpeta de salida del proyecto de Visual Studio (<ProjectFolder>\bin\debug) al directorio de aplicaciones de Unified Service Desk. En este caso, copiará el archivo MyWebApplicationAdapter.dll en el directorio c:\Program Files\Microsoft Dynamics CRM USD\USD.

  2. Ejecute el cliente de Unified Service Desk para conectar con el servidor de aplicaciones de Dynamics 365 for Customer Engagement.

  3. Después de iniciar sesión correctamente, verá el botón de la aplicación web externa de ejemplo en el escritorio.

  4. Elija Buscar y luego elija Contactos y seleccione un contacto. En este caso, seleccione Patrick Sands.

    Captura de pantalla de la lista de contactos.

  5. Haga clic en Ejemplo de la aplicación web externa y verá el nombre, apellidos, dirección, y el Id. de cliente rellenados.

    Captura de pantalla del adaptador WebApp de pruebas.

Nota

Este tutorial le ha mostrado cómo leer y mostrar datos de Unified Service Desk en la aplicación web externa. Para actualizar los datos en Unified Service Desk desde la aplicación web externa, y viceversa, consulte Tutorial: Crear un control hospedado de Windows Forms de UII

Vea también

Uso de adaptadores de UII para interactuar con aplicaciones externas y web