hol10 manual vb

Introducción para el

programador de

SharePoint

Laboratorio práctico

Manual del laboratorio

SPCHOL308 - Desarrollar una cinta de opciones para la interfaz de usuario de SharePoint 2010 y personalizaciones del cuadro de diálogo - VB

Este documento se proporciona “tal cual“. Es posible que la información y los puntos de vista reflejados en este documento, incluidas la dirección URL y otras referencias a sitios web de Internet, cambien sin previo aviso. El usuario asume el riesgo de su uso. Este documento no proporciona derecho legal alguno sobre ninguna propiedad intelectual de ningún producto de Microsoft. Este documento puede copiarse y usarse para fines internos y de referencia. © 2010 Microsoft. Todos los derechos reservados.

Contenido

SPCHOL308 - DESARROLLAR UNA CINTA DE OPCIONES PARA LA INTERFAZ DE USUARIO DE

SHAREPOINT 2010 Y PERSONALIZACIONES DEL CUADRO DE DIÁLOGO ...................................................... 2 Objetivo del laboratorio ...................................................................................................................................... 2 Recursos adicionales ......................................................................................................................................... 2

Introducción ............................................................................................................................................................ 2 Iniciar sesión en la máquina virtual .................................................................................................................... 2 Ubicaciones........................................................................................................................................................ 2 Requisitos previos para el laboratorio ............................................................................................................... 3 Copiar las muestras de código desde un documento de Word ......................................................................... 3 Fragmentos de código ....................................................................................................................................... 4

Ejercicio 1: agregar un botón personalizado a la cinta de opciones ...................................................................... 5 Tarea 1: ver el sitio ............................................................................................................................................ 5 Tarea 2: crear un proyecto vacío de SharePoint 2010 ...................................................................................... 6 Tarea 3: agregar el código del botón al proyecto .............................................................................................. 9 Tarea 4: implementar la solución ..................................................................................................................... 14

Ejercicio 2: obtener acceso a datos de lista con el MO cliente de JavaScript y mostrar un cuadro de diálogo .. 17 Tarea 1: crear un proyecto nuevo y agregar un elemento web ....................................................................... 17 Tarea 2: agregar código de scripting para obtener acceso y presentar los datos de la lista de SharePoint. . 20 Tarea 3: implementar y probar el elemento web ............................................................................................. 26

Resumen del laboratorio ...................................................................................................................................... 31

SPCHOL308 - Desarrollar una cinta de opciones para la interfaz de usuario de SharePoint 2010 y personalizaciones del cuadro de diálogo

Tiempo estimado para completar este laboratorio: 30 minutos

Es obligatorio disponer de Visual Studio 2010 y SharePoint Foundation 2010 para realizar estos ejercicios. Se encuentran instalados en la máquina virtual que se usa en este laboratorio.

Objetivo del laboratorio

El objetivo de este laboratorio es aprender a modificar el nuevo menú de la cinta de SharePoint y a interactuar con el MO cliente y el marco de trabajo de cuadro de diálogo.

Ampliar la cinta de SharePoint; para ello, se agregará un botón nuevo.

Crear un elemento web que use el código del lado del cliente mediante el MO cliente y que

mostrará un cuadro de diálogo para que los usuarios especifiquen datos mediante el nuevo marco

de trabajo de cuadro de diálogo.

Recursos adicionales

Este laboratorio incluye los siguientes recursos adicionales:

Este manual del laboratorio. SPCHOL308_Manual_VB.docx Este documento.

Código fuente. Completed\VB\Ex1

Completed\VB\Ex2

Código fuente del laboratorio

completado en VB.

Recursos Resources\VB

Recursos varios usados a lo

largo de este laboratorio.

Introducción

Iniciar sesión en la máquina virtual

Inicie sesión en la máquina virtual como el usuario siguiente:

Nombre de usuario: Administrator Contraseña: pass@word1

Ubicaciones

Este laboratorio práctico contiene diversos recursos adicionales en ubicaciones establecidas. De forma

predeterminada, se asume que el directorio HOL es C:\Content Packs\Packs\SharePoint 2010

Developer Labs 1.0\SUPPORTING FILES\SPCHOL308.

La carpeta de trabajo predeterminada para este laboratorio es “\SPHOLS\SPCHOL308”.

Requisitos previos para el laboratorio

Vaya al directorio HOL base Supporting Files\SPCHOL308\Resources y ejecute el script de PowerShell optimize.ps1: 1. Haga clic con el botón secundario en optimize.ps1 y seleccione Ejecutar con PowerShell:

Figura 1 - Ejecutar el script de PowerShell

2. De esta forma se abrirá la ventana de PowerShell para ejecutar el script. Espere hasta que se complete la ejecución del script de PowerShell y se cierre la ventana de PowerShell:

Figura 2 - Ventana de PowerShell donde se ejecuta el script

Copiar las muestras de código desde un documento de Word

Solo será posible copiar y pegar código desde este documento de Word en Visual Studio para las secciones que contengan código con formato, por ejemplo: Console.WriteLine ("¡Esto es código seguro!")

Es posible que el código que no se encuentre en estas secciones contenga Unicode o caracteres invisibles que no sean código XML o C#/VB válido, por ejemplo:

Console.WriteLine (“¡¡Esto NO es código seguro!!”)

Fragmentos de código

Usará también fragmentos de código para insertar código durante el laboratorio. Para usar el fragmento de código necesario:

Haga clic con el botón secundario en el archivo de código donde desea insertar el fragmento de código.

Seleccione Insertar fragmento de código...:

Figura 3 - Insertar fragmento de código

Seleccione un fragmento de código en la galería Mis fragmentos de código.

Ejercicio 1: agregar un botón personalizado a la cinta de opciones

En este ejercicio, ampliaremos la cinta de opciones; para ello, agregaremos un botón personalizado que ejecute código del lado del servidor. Podemos utilizar este enfoque para agregar o reemplazar botones, grupos, pestañas o incluso la cinta de opciones en su totalidad. Usaremos una solución de Visual Studio 2010 y la implementaremos en el servidor local de SharePoint.

El botón hará que emerja un cuadro de diálogo de JavaScript con el mensaje “Hello World”.

Tarea 1: ver el sitio

Antes de agregar el botón a la cinta de opciones, veremos el sitio de forma que sepamos lo que va a mostrar la cinta de opciones como OOTB. 1. Abra Internet Explorer y vaya a http://intranet.contoso.com.

2. Seleccione la biblioteca Documentos compartidos en el menú Documentos en la sección de la zona de navegación izquierda (inicio rápido).

Figura 4 - Documentos compartidos

http://intranet.contoso.com/

3. En la pestaña Herramientas de bibliotecas de la cinta de opciones que aparece, seleccione la pestaña Documentos.

Figura 5 - Pestaña Documentos

3. Esta cinta de opciones es la ubicación donde aparecerá el botón nuevo que se va a crear en este ejercicio.

Tarea 2: crear un proyecto vacío de SharePoint 2010

En esta tarea, se creará una solución y un proyecto. Contendrá el resto del trabajo de desarrollo de este ejercicio. 1. Abra Visual Studio 2010; para ello, vaya al Menú Inicio | Todos los programas | Microsoft

Visual Studio 2010 | Microsoft Visual Studio 2010.

2. En el menú, seleccione Archivo | Nuevo | Proyecto.

3. En el cuadro de diálogo Nuevo proyecto, expanda el menú a la izquierda Plantillas instaladas para mostrar Visual Basic | SharePoint | 2010 y elija el tipo de proyecto Proyecto vacío en la lista de tipos de proyecto que aparece en la parte central de la pantalla.

4. Asigne al proyecto el nombre RibbonDemo.

5. Cambie la ubicación a C:\SPHOLS\SPCHOL308\VB\Ex1

6. Haga clic en Aceptar.

7. Aparecerá un cuadro de diálogo del Asistente para la personalización de SharePoint.

8. En el cuadro ¿Qué sitio local desea usar para la depuración?, escriba http://intranet.contoso.com.

9. Para los botones de opción de ¿Cuál es el nivel de confianza de esta solución de SharePoint?, elija Implementar como solución de granja de servidores.

Figura 6 - Asistente para personalizar SharePoint

10. Presione Finalizar para completar el asistente.


11. Visual Studio agregará la solución nueva.

Figura 7 - Explorador de soluciones de RibbonDemo

Tarea 3: agregar el código del botón al proyecto

1. Haga clic con el botón secundario en el proyecto RibbonDemo en el Explorador de soluciones y seleccione Agregar | Nuevo elemento....

2. En el cuadro de diálogo Agregar nuevo elemente, expanda Plantillas instaladas en el menú de la izquierda para mostrar Elementos comunes | SharePoint | 2010 y elija el tipo de elemento Elemento vacío que se encuentra en la parte central de la pantalla.

3. Deje el Nombre como EmptyElement1.

Figura 8 - Agregar nuevo elemento - RibbonDemo

4. Haga clic en Agregar para agregar el elemento al proyecto.

Figura 9 - Elementos XML

5. Elimine el contenido del archivo Elements.xml.

6. Agregue el siguiente código al archivo Elements.xml. Puede encontrar una copia de este archivo en la carpeta Supporting Files\SPCHOL308\Resources\VB.

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<CustomAction

Id="DemoHelloWorldButton"

RegistrationId="101"

RegistrationType="List"

Location="CommandUI.Ribbon"

Sequence="5"

Title="Hello World">

<CommandUIExtension>

<CommandUIDefinitions>

<CommandUIDefinition

Location="Ribbon.Documents.Manage.Controls._children">

<Button

Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"

Alt="Botón de cinta de Hello World"

Sequence="10"

Command="Demo_HelloWorld"

Image32by32="/_layouts/images/ribbondemo/demobutton.png"

LabelText="Demostración de Hello World"

TemplateAlias="o1"/>

</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandlers>

<CommandUIHandler

Command="Demo_HelloWorld"

CommandAction="javascript:alert('¡Hello World!');"

/>

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

</Elements>

Fragmento de código: Mis fragmentos de código | spchol308_ex1_ xml

Figura 10 - Elementos XML actualizados

7. Tome nota de la referencia de la imagen, es la imagen que aparecerá en la cinta de opciones; a continuación, agregaremos esta imagen.

8. Asimismo, tome nota del CommandScript, se trata del JavaScript que se ejecutará cuando presione el botón que se va a agregar a la cinta de opciones.

9. Agregue una carpeta a la solución que se asigne a la carpeta Images en el director de diseños de SharePoint donde se podrá guardar la imagen del botón. Haga clic con el botón secundario en el nodo del proyecto RibbonDemo y elija Agregar | Carpeta asignada “Images” de SharePoint

Figura 11 - Agregar carpeta asignada

10. La carpeta Images aparece con una carpeta secundaria para el botón.

Figura 12 - Carpeta Images

11. Agregue el archivo DemoButton.png; para ello, haga clic con el botón derecho en la nueva carpeta RibbonDemo y elija Agregar | Elemento existente....

12. Cuando aparezca en cuadro de diálogo, vaya a C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL308\Resources y seleccione el archivo DemoButton.png.

Figura 13 - Imagen de DemoButton

Tarea 4: implementar la solución

1. En el Explorador de soluciones, haga clic con el botón secundario en RibbonDemo y seleccione Implementar.

Figura 14 - Implementar la solución

2. La solución se implementará en el sitio de SharePoint.

3. Abra un explorador web y vaya al sitio de SharePoint local:

http://intranet.contoso.com

4. Si se le pide autenticación, escriba los siguientes detalles:

Nombre de usuario: administrator

Contraseña: pass@word1


5. En la zona de navegación izquierda, haga clic en el vínculo Documentos compartidos para abrir la biblioteca Documentos compartidos.

Figura 15 - Vínculo de Documentos compartidos

6. Haga clic en la pestaña Documentos en la cinta de opciones de SharePoint.

Figura 16 - Pestaña Documentos

7. Debería ver que se ha agregado el botón nuevo Demostración de Hello World a la cinta de SharePoint.

Figura 17 - Botón Hello World

8. Haga clic en el botón Demostración de Hello World en la cinta de opciones para que aparezca un cuadro de diálogo de JavaScript con Hello World.

Figura 18 - Demostración de Hello World

Acaba de comprobar cómo se agrega un botón personalizado nuevo y se amplía la cinta de SharePoint.

Ejercicio 2: obtener acceso a datos de lista con el MO cliente de JavaScript y mostrar un cuadro de diálogo

En SharePoint 2010, hay una gran cantidad de modelos de objetos que los programadores pueden usar para obtener acceso al servidor. El MO cliente es un modelo unificado que usa los mismos conceptos o similares en el servidor, a través de servicios web y servicios WCF, a través de una API cliente (JavaScript) y a través de REST. Esto prepara el terreno para aplicaciones más completas al simplificar drásticamente el acceso a los datos de SharePoint desde equipos cliente y otros equipos de la infraestructura. En este ejercicio, usaremos el modelo de objetos del lado del cliente EcmaScript para actualizar y leer los datos de lista dinámicamente. También se muestra la nueva API de diálogos desde un script del lado del cliente. El modelo de objetos del lado del cliente de JavaScript permite a los programadores de JavaScript obtener acceso a objetos de SharePoint como sitio, web y lista (y mucho más) desde JavaScript del lado del cliente.

Tarea 1: crear un proyecto nuevo y agregar un elemento web

En esta tarea, se creará una solución y un proyecto. Contendrá el resto del trabajo de desarrollo de este ejercicio. 1. Abra Visual Studio 2010; para ello, vaya al Menú Inicio | Todos los programas | Microsoft

Visual Studio 2010 | Microsoft Visual Studio 2010.

2. En el menú, seleccione Archivo | Nuevo | Proyecto.

3. En el cuadro de diálogo Nuevo proyecto, expanda el menú a la izquierda Plantillas instaladas para mostrar Visual Basic | SharePoint | 2010 y elija el tipo de proyecto Elemento web visual en la lista de tipos de proyecto que aparece en la parte central de la pantalla.

4. Asigne al proyecto el nombre ScriptOMandDialog.

5. Cambie la ubicación a C:\SPHOLS\SPCHOL308\VB\Ex2.

Figura 19 - Cuadro de diálogo Nuevo proyecto

6. Haga clic en Aceptar.

7. Aparecerá un cuadro de diálogo del Asistente para personalizar SharePoint.

8. En el cuadro ¿Qué sitio local desea usar para la depuración?, escriba http://intranet.contoso.com.

9. Para los botones de opción de ¿Cuál es el nivel de confianza de esta solución de SharePoint?, elija Implementar como solución de granja de servidores.

Figura 20 - Asistente para personalizar SharePoint

10. Presione Finalizar para completar el asistente.


11. Visual Studio creará la solución ScriptOMandDialog.

Figura 21 - Explorador de soluciones con el proyecto de elemento web visual

12. En el Explorador de soluciones, haga doble clic en el archivo VisualWebPart1.webpart.

13. Establezca la propiedad Título en ScriptOMandDialog.

14. Establezca la propiedad Descripción en ScriptOMandDialog description.

Figura 22 - Archivo del elemento web visual

15. Guarde y cierre el archivo.

Tarea 2: agregar código de scripting para obtener acceso y presentar los datos de la lista de SharePoint.

1. En el Explorador de soluciones, haga doble clic en VisualWebPart1UserControl.ascx.

2. Agregue el siguiente código de marcado al final del archivo.

<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="sp.js"

Localizable="false" LoadAfterUI="true" />

<script language="ecmascript" type="text/ecmascript">

</script>

Fragmento de código: Mis fragmentos de código | spchol308_ex2_ScriptTags

3. Agregue el siguiente código de JavaScript en el bloque de script. Puede copiar y pegar la totalidad

de los bloques de código siguientes o usar un fragmento de código. Este código declara variables importantes que el código usará más adelante y agrega la función Initialize(), a la cual se llamará tras cargar todos los objetos del lado del cliente de SharePoint.

/* Nombres de lista de SharePoint */

var ProjectListName = "Proyectos";

/* Nombres de campos de lista de SharePoint */

var ProjectNameField = "Título"; var ProjectDescriptionField = "Descripción";

/* Objetos de lista */

var projectsList;

/* variable que contiene elementos de lista de la lista de proyectos */

var projects;

/* objeto de contexto de cliente - se usa para acceder a los datos de SharePoint

*/

var context;

/* web (SPWeb) en la que se ejecuta nuestra página */

var web;

/* variable que contiene modalDialog para cerrar posteriormente */

var modalDialog;

/* se utiliza al crear un nuevo ListItem de proyecto. */

var projectListItem;

var copyOfAddProjectForm;

/* nuestro método de inicio cuando se carga la página */

_spBodyOnLoadFunctionNames.push("Initialize()");

Fragmento de código: Mis fragmentos de código JScripto | spchol308_ex2_Jscript

4. La función Initialize() recupera el objeto ClientContext de SharePoint, carga la lista de proyectos e inicializa los proyectos (elementos de la lista de proyectos).

/* Inicializar variables útiles y recuperar ClientContext */

function Initialize() {

/* Recupera el objeto ClientContext actual */

context = SP.ClientContext.get_current();

web = context.get_web();

// Obtener referencias de las listas que utilizaremos

projectsList = web.get_lists().getByTitle(ProjectListName);

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml('<View><Query/></View>');

projects = projectsList.getItems(camlQuery);

context.load(projects, 'Include(Título, Descripción)');

context.executeQueryAsync(onListsLoaded, OnError);

}

5. La función Initialize() llama de forma asincrónica al evento onListsLoaded().

/* Controlador de eventos al que se llama al cargar la lista de proyectos

Este método representa dinámicamente una tabla HTML para mostrar los datos de la

lista */

function onListsLoaded() {

// Obtener los elementos de lista de la lista de contactos

var projectTable = document.getElementById("tblProjectList");

// borrar la tabla

while (projectTable.rows.length > 0)

projectTable.deleteRow(projectTable.rows.length - 1);

var content;

var cell;

var tbo = document.createElement('tbody');

// Bucle para cada proyecto

var listItemEnumerator = projects.getEnumerator();

while (listItemEnumerator.moveNext()) {

// Crear una fila en la tabla para cada proyecto

var newTR = document.createElement('tr');

var projectLI = listItemEnumerator.get_current();

// get_item() recupera el valor listitem

var projectName =

projectLI.get_item(ProjectNameField);

var projectDesc =

projectLI.get_item(ProjectDescriptionField);

// agregar las celdas para la fila

cell = document.createElement('td');

content = document.createTextNode(projectName);

cell.appendChild(content);

newTR.appendChild(cell);

cell = document.createElement('td');

content = document.createTextNode(projectDesc);

cell.appendChild(content);

newTR.appendChild(cell);

// Agregar la fila al cuerpo de la tabla

tbo.appendChild(newTR);

}

// agregar el cuerpo de la tabla a la tabla

projectTable.appendChild(tbo);

}

6. La función ShowAddProject() encuentra el elemento divAddProjectElement (que se agregará más tarde) y lo muestra mediante el método ModalDialog.showModalDialog().

/* Ocultar el cuadro de diálogo modal y mostrar la interfaz de usuario

actualizada */

function onProjectAdded() {

HideAddProject();

}

/* Mostrar un elemento modalDialog con el contenido de divAddProject */

function ShowAddProject() {

var divAddProject = document.getElementById("divAddProject");

// showModalDialog quita el elemento que se le ha pasado desde el DOM

// por lo que guardamos una copia y la agregamos más tarde

copyOfAddProjectForm = divAddProject.cloneNode(true);

divAddProject.style.display = "block";

var options = { html: divAddProject, width: 200, height: 350,

dialogReturnValueCallback: ReAddClonedForm };

modalDialog = SP.UI.ModalDialog.showModalDialog(options);

}

/* Cerrar el elemento modalDialog */

function HideAddProject() {

modalDialog.close();

Initialize();

}

function ReAddClonedForm() {

document.body.appendChild(copyOfAddProjectForm);

}

7. La función AddProject() crear un elemento de lista nueva en la lista de proyectos.

/* Llamado desde el cuadro de diálogo modal de Agregar proyecto

Crea un elemento de lista en la lista del proyecto */

function AddProject() {

var lici1 = new SP.ListItemCreationInformation();

projectListItem = projectsList.addItem(lici1);

projectListItem.set_item(ProjectNameField, getTBValue("txtProjectName"));

projectListItem.set_item(ProjectDescriptionField,

getTBValue("txtDescription"));

projectListItem.update();

context.load(projectListItem);

// Ejecutar la consulta para crear la lista del proyecto

// onProjectAdded es nuestro método de devolución de llamada al que se llama

cuando finaliza la llamada al servidor

context.executeQuery(onProjectAdded, OnError);

}

8. Funciones auxiliares / Controlador de errores

/* Controlador de errores */

function OnError(sender, args) {

var spnError = document.getElementById("spnError");

spnError.innerHTML = args.get_message();

}

/* Función auxiliar: método abreviado para la propiedad de valor de un cuadro de

texto */

function getTBValue(elID) {

var el = document.getElementById(elID);

return el.value;

}

9. Agregue el siguiente código HTML debajo de la etiqueta del bloque de script (</script>).

tblProjectList es una tabla vacía a la que el script agrega dinámicamente filas o columnas para cada proyecto. También hay un vínculo para invocar a ShowAddProject() que lanzará un cuadro de diálogo modal. El marcado dentro de divAddProject se mostrará en un diálogo modal que permitirá al usuario escribir datos para crear un proyecto nuevo.

<div style="font-weight: bold">Project List</div>

<br />

<table id="tblProjectList" style="border: solid 1px silver">

</table>

<br />

<a href="javascript:ShowAddProject()">Agregar un proyecto</a>

<br />

<div id="divAddProject" style="display: none; padding: 5px">

<b>Información de proyecto</b><br /><br />

Nombre <br />

<input type="text" id="txtProjectName" /><br />

Descripción<br />

<input type="text" id="txtDescription" /><br />

<span id="spnError" style="color: Red" /><br />

<input type="button" value="Agregar nuevo proyecto" onclick="AddProject()" />

</div>

Fragmento de código: Mis fragmentos de código HTML | spchol308_ex2_HTML

Tarea 3: implementar y probar el elemento web

1. Haga clic con el botón secundario en el nodo del proyecto ScriptOMandDialog y seleccione Implementar.

Figura 23 - Implementar

2. Cuando se completa la implementación (puede ver el progreso en la ventana de resultados y comprobar el estado actualizado en la barra de estado), agregue el elemento web a la página de elementos web:

3. Abra Internet Explorer y vaya a http://intranet.contoso.com.


4. Haga clic en el icono Editar para ver la cinta de opciones de edición.

Figura 24 - Icono Editar

5. Seleccione Insertar en la pestaña Herramientas de edición en la cinta de opciones de edición.

Figura 24 - Pestaña Formato de texto

6. Haga clic en el botón Elemento web en la cinta de opciones Insertar.

7. Elija Personalizar en la columna Categorías.

8. Elija ScriptOMandDialog en la columna Elementos web.

Figura 25 - Insertar elemento web

9. Haga clic en el botón Agregar en la parte inferior derecha de la zona para agregar del elemento web.

Figura 26 - Elemento web ScriptOMandDialog

10. Haga clic en el botón Detener edición.

11. Es posible que deba actualizar la página para ver que el elemento web ScriptOMandDialog muestra la lista Proyectos tal como aparece a continuación.

12. Haga clic en el vínculo Agregar un proyecto y complete los campos Nombre y Descripción, a continuación, haga clic en Add New Project.

Figura 27 - Agregar un proyecto

13. Debería aparecer el nuevo proyecto con los detalles especificados en la lista Proyectos.

Acaba de comprobar cómo se usa el modelo de objetos cliente de JavaScript y de generar e implementar un elemento web visual.

Resumen del laboratorio

En este laboratorio, ha realizado los ejercicios siguientes:

Crear un proyecto de SharePoint 2010 de tipo Vacío.

Agregar un archivo Elements.xml a un proyecto de SharePoint que contiene una acción

personalizada para ampliar el menú de la cinta de opciones.

Agregar una carpeta Images de SharePoint asignada que está asociada a la carpeta Images en

el directorio de SharePoint 2010.

Implementar el tipo de proyecto Vacío con una característica en el sitio de SharePoint.

Crear un tipo de proyecto de SharePoint 2010 nuevo de un elemento web visual.

Agregar script del lado del cliente al elemento web para presentar datos de lista.

Agregar script del lado del cliente y código HTML al elemento web para utilizar el marco de

trabajo de cuadro de diálogo.

Implementar una solución de elemento web visual de SharePoint.