{"id":2720,"date":"2018-07-03T10:09:23","date_gmt":"2018-07-03T08:09:23","guid":{"rendered":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?p=2720"},"modified":"2018-07-18T13:30:50","modified_gmt":"2018-07-18T11:30:50","slug":"spfx-dynamic-data-app-extension","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/","title":{"rendered":"SPFX: Dynamic Data en App Extension"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2740\" src=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg\" alt=\"\" width=\"1076\" height=\"945\" srcset=\"https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg 1076w, https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX-300x263.jpg 300w, https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX-768x674.jpg 768w, https:\/\/encaminablogs.wpenginepowered.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX-1024x899.jpg 1024w\" sizes=\"auto, (max-width: 1076px) 100vw, 1076px\" \/><\/p>\n<p>Si echamos la vista atr\u00e1s y retrocedemos dos veranos, hasta el momento en que se anunci\u00f3 el <strong>SharePoint FrameWork<\/strong>, podemos ver c\u00f3mo ha evolucionado y sin duda, afirmar que ha venido para quedarse.<!--more-->Todav\u00eda vemos muchas novedades que llegan versi\u00f3n tras versi\u00f3n, una de ellas es la que\u00a0ha tra\u00eddo la nueva <strong>versi\u00f3n 1.5 del Spfx<\/strong>, que va a permitir que dispongamos de mecanismos para conectar los distintos Webparts y Extensions entre s\u00ed.<\/p>\n<p>Podemos ver c\u00f3mo hacer la conexi\u00f3n de WebParts con tan solo mirar el ejemplo publicado en el <a href=\"https:\/\/github.com\/SharePoint\/sp-dev-fx-webparts\/tree\/master\/samples\/react-events-dynamicdata\" target=\"_blank\" rel=\"noopener\">repositorio oficial de GitHub <\/a>. En este art\u00edculo vamos a ver c\u00f3mo conectar de forma din\u00e1mica las Extensi\u00f3n de tipo Application, con los Webparts que hay en nuestra aplicaci\u00f3n.<\/p>\n<h2><strong>Un poco de historia<\/strong><\/h2>\n<p>Los m\u00e1s nuevos dentro del desarrollo en SharePoint, tal vez no sepan que desde la versi\u00f3n 2007 exist\u00eda la posibilidad de conectar los WebParts, tanto los que desarroll\u00e1bamos como los que ven\u00edan de serie dentro del Producto. No obstante, ejecutar esta funcionalidad mediante programaci\u00f3n era un aut\u00e9ntico engorro (todav\u00eda recuerdo el tiempo que invertimos en varios proyectos que desarrollamos en ENCAMINA). Si alguien tiene curiosidad por ver c\u00f3mo se hac\u00eda, escrib\u00ed un art\u00edculo en la revista <a href=\"http:\/\/www.compartimoss.com\/revistas\" target=\"_blank\" rel=\"noopener\">CompartiMOSS<\/a> (mi primer art\u00edculo, por cierto :))<\/p>\n<p>Ahora bien, cuando Spfx naci\u00f3, no ech\u00e9 mucho de menos esta funcionalidad. Quiz\u00e1 fue por el engorro que supon\u00eda en las versiones anteriores, o bien porque debido a que el desarrollo se realizaba en la parte cliente, se pod\u00eda conseguir el mismo fin de una forma un tanto peculiar.<\/p>\n<p>Por ejemplo: almacenando la informaci\u00f3n solicitada en el cach\u00e9 del propio navegador y desde el otro WebPart, leer dicha cach\u00e9. De esta forma se comparte informaci\u00f3n entre WebParts y nos ahorramos peticiones innecesarias a los servicios que consumamos. Eso s\u00ed,\u00a0 hay que tener en cuenta algunos factores que pueden hacer que nuestro desarrollo se complique: el orden de carga de los WebParts, la modificaci\u00f3n de los datos del WebPart origin, etc..<\/p>\n<p>Resumiendo, ten\u00edamos dos opciones: montar un desarrollo relativamente complicado o bien hacer un Mega WebPart que los agrupara a todos para simplificar el desarrollo.<\/p>\n<h2><strong>C\u00f3mo lo han implementando en Spfx<\/strong><\/h2>\n<p>Este era mi gran temor. Sufridor como he sido de las versiones antiguas, ten\u00eda miedo de que los <em>dynamic data<\/em> fueran\u00a0 dif\u00edciles de utilizar y cayeran en el desuso. Sin embargo, cu\u00e1l ha sido mi sorpresa al descubrir que han implementado una propiedad de manera muy sencilla y f\u00e1cil de usar.<\/p>\n<p><strong>Ejemplo:<\/strong><\/p>\n<p>1.Vamos a implementar una extensi\u00f3n que va a ser un caja de texto.<\/p>\n<p>2. Este texto lo vamos a enviar a un WebPart<\/p>\n<p>3. Y \u00e9ste, con dicha informaci\u00f3n, ya realizar\u00e1 lo que el crea conveniente&#8230;<\/p>\n<p><strong>\u00bfC\u00f3mo lo implementamos?<\/strong><\/p>\n<p>Nuestra soluci\u00f3n va a tener dos elementos:<\/p>\n<p>&#8211; <strong>Una Extensi\u00f3n de tipo Application<\/strong> que ser\u00e1 la encargada de notificar a todos los WebParts\/extensi\u00f3n que est\u00e9n conectadas.<br \/>\n&#8211; <strong>Un WebPart<\/strong> que va a ser el encargado de recibir los datos de la Extensi\u00f3n.<\/p>\n<p>Para crear la soluci\u00f3n utilizaremos el generado de Yeoman, pero le indicaremos que vamos a utilizar la versi\u00f3n en beta. Para ello:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nyo @microsoft\/sharepoint --plusbeta\r\n<\/pre>\n<p>Si la plantilla de Yeoman os da error, es debido a que no est\u00e1 actualizada. Os recomiendo que le\u00e1is este <a href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/2018\/03\/09\/como-actualizar-la-solucion-de-spfx\/\" target=\"_blank\" rel=\"noopener\">art\u00edculo sobre c\u00f3mo actualizar nuestra versi\u00f3n de Spfx<\/a>.<\/p>\n<p>Crearemos dos artefactos, la <strong>extensi\u00f3n<\/strong>\u00a0de tipo Application y un<strong> webPart<\/strong> normal, seleccionando el Framework ReactJS. Dentro de los <em>dynamic<\/em> tenemos dos actores:<\/p>\n<ul>\n<li>el objeto \u00abemisor\u00bb que emite informaci\u00f3n y que la recibe a quien se subscribe.<\/li>\n<li>el objeto \u00absubcriptor\u00bb que es el encargado de recibir la informaci\u00f3n.<\/li>\n<\/ul>\n<p>En este caso, esta claro que la Extensi\u00f3n\u00a0 ser\u00e1 nuestro emisor y el WebPart el receptor.<\/p>\n<h2>Implementaci\u00f3n del emisor<\/h2>\n<p>Para que en la <strong>extensi\u00f3n<\/strong> pueda ser un \u00abemisor\u00bb deberemos indicar en el m\u00e9todo <strong>Init<\/strong> que este artefacto tiene informaci\u00f3n que compartir:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    this.context.dynamicDataSourceManager.initializeSource(this);\r\n<\/pre>\n<p>Para poder utilizar la clase D<em>ynamicDataSource Manager<\/em> deberemos de tener importadas las siguientes referencias:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nimport { IDynamicDataController, IDynamicDataPropertyDefinition } from &quot;@microsoft\/sp-dynamic-data&quot;;\r\n<\/pre>\n<p>Nos faltar\u00eda indicar <strong>qu\u00e9 clase de objeto vamos a devolver<\/strong> y<strong> c\u00f3mo se llama,<\/strong> para que el resto de elementos se puedan subscribir al mismo. Para ello implementaremos estos dos m\u00e9todos getter\/setter que nos devuelve la informaci\u00f3n, de manera que en el componente tendremos una propiedad con el valor que vamos a devolver.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n  private _selectedText: IQuery;\r\n public getPropertyDefinitions(): ReadonlyArray&amp;amp;lt;IDynamicDataPropertyDefinition&amp;amp;gt; {\r\n    return &#x5B;\r\n      {\r\n        id: &quot;text&quot;,\r\n        title: &quot;Text&quot;\r\n      }\r\n    ];\r\n  }\r\n  \/**\r\n   * Return the current value of the specified dynamic data set\r\n   * @param propertyId ID of the dynamic data set to retrieve the value for\r\n   *\/\r\n  public getPropertyValue(propertyId: string): IQuery  {\r\n    switch (propertyId) {\r\n      case &quot;text&quot;:\r\n        return this._selectedText;\r\n    }\r\n\r\n    throw new Error(&quot;Bad property id&quot;);\r\n  }\r\n<\/pre>\n<p>La interfaz IQuery no es m\u00e1s que lo siguiente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/**\r\n * Represents search\r\n *\/\r\nexport interface IQuery  {\r\n    \/**\r\n     * The text  to search\r\n     *\/\r\n    text: string;\r\n  }\r\n<\/pre>\n<p>Una vez ya sabemos la estructura que vamos a devolver, ahora solo nos queda notificar al resto de WebParts los datos que queremos enviar. En nuestro caso, tenemos el siguiente <strong>componente ReactJS<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nexport interface ISearchExtensionProps {\r\n  context:any;\r\n  onchange: (text: IQuery)=&amp;amp;gt; void ;\r\n}\r\nexport default class SearchExtension extends React.Component&amp;amp;lt;ISearchExtensionProps, {}&amp;amp;gt; {\r\n  constructor (props:ISearchExtensionProps) {\r\n    super(props);\r\nthis._onChanged.bind(this);\r\n  }\r\n\r\n  public render():any {\r\n    return (\r\n      \r\n&amp;amp;lt;div &amp;amp;gt;\r\n        \r\n&amp;amp;lt;div className=&quot;ms-bgColor-themePrimary&quot;&amp;amp;gt;\r\n        &amp;amp;lt;TextField label=&quot;Search:&quot; onChanged={this._onChanged} \/&amp;amp;gt;\r\n        &amp;amp;lt;\/div&amp;amp;gt;\r\n\r\n      &amp;amp;lt;\/div &amp;amp;gt;\r\n    );\r\n  }\r\n  private _onChanged = (text: any): void =&amp;amp;gt; {\r\n    this.props.onchange({text:text});\r\n  }\r\n}\r\n<\/pre>\n<p>Con este componente dentro de nuestra Extensi\u00f3n, tendremos que implementar un m\u00e9todo para que cada vez que el campo se modifique, cambien el resto de los WebParts. Para ello nos definimos el siguiente m\u00e9todo:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n  private _textSelected = (text: IQuery): void =&amp;amp;gt; {\r\n    \/\/ store the currently selected event in the class variable. Required\r\n    \/\/ so that connected component will be able to retrieve its value\r\n    this._selectedText = text;\r\n    \/\/ notify subscribers that the selected text has changed\r\n    this.context.dynamicDataSourceManager.notifyPropertyChanged(&quot;text&quot;);\r\n  }\r\n<\/pre>\n<p>Cuando creamos el Componente SearchExtension le vamos a pasar este m\u00e9todo, de tal forma que tengamos capturado el evento de modificaci\u00f3n de la caja de texto.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n if (this._headerPlaceholder.domElement) {\r\n      const element: React.ReactElement&amp;amp;lt;any&amp;amp;gt; = React.createElement(\r\n        SearchExtension,\r\n        {\r\n          context: this.context,\r\n          onchange : this._textSelected\r\n        }\r\n      );\r\n      ReactDom.render(element, this._headerPlaceholder.domElement);\r\n    }\r\n<\/pre>\n<h2>Implementaci\u00f3n del Subscriptor<\/h2>\n<p>Una vez ya tenemos la Extensi\u00f3n que se encarga de enviar a sus sucriptores el contenido que se ha encargado de compartir, vamos a implementar un WebPart que se encargar\u00e1 de mostrar dicho contenido. En primer lugar<br \/>\ndebemos de subscribirmos al evento para ello dentro del render tendremos que poner la siguiente linea:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n this.context.dynamicDataProvider.registerPropertyChanged(this.properties.sourceId, this.properties.propertyId, this.render);\r\n<\/pre>\n<p>Los tres par\u00e1metros que esta esperando son el sourceId, el propertyId y el m\u00e9todo al que se notificara cuando se modifiquen los datos. Los dos primeros valores los definimos en el emisor, pero no hace falta que los pongamos directamente se puede obtener del contexto o bien ponerlos como par\u00e1metro de configuraci\u00f3n. Para ello podemos poner el siguiente c\u00f3digo dentro del ToolPart del c\u00f3digo:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ get all available dynamic data sources on the page\r\n    const sourceOptions: IPropertyPaneDropdownOption&#x5B;] =\r\n      this.context.dynamicDataProvider.getAvailableSources().map(source =&amp;amp;gt; {\r\n        return {\r\n          key: source.id,\r\n          text: source.metadata.title\r\n        };\r\n      });\r\n    const selectedSource: string = this.properties.sourceId;\r\n\r\n    let propertyOptions: IPropertyPaneDropdownOption&#x5B;] = &#x5B;];\r\n    if (selectedSource) {\r\n      const source: IDynamicDataSource = this.context.dynamicDataProvider.tryGetSource(selectedSource);\r\n      if (source) {\r\n        \/\/ get the list of all properties exposed by the currently selected\r\n        \/\/ data source\r\n        propertyOptions = source.getPropertyDefinitions().map(prop =&amp;amp;gt; {\r\n          return {\r\n            key: prop.id,\r\n            text: prop.title\r\n          };\r\n        });\r\n      }\r\n<\/pre>\n<p>Una vez ya tenemos nuestro webPart subscrito a las notificaciones el siguiente paso es acceder a dicho valor para ello:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n  const source: IDynamicDataSource = this.context.dynamicDataProvider.tryGetSource(this.properties.sourceId);\r\n  query = source ? source.getPropertyValue(this.properties.propertyId) : undefined;\r\n<\/pre>\n<p>con el valor que tiene Query ya podemos implementar lo que consideremos oportuno, en nuestrocaso vamos a pasarlo al siguiente objeto y se mostrar\u00e1 por pantalla.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nexport default class SearchWebPart extends React.Component&amp;amp;lt;ISearchWebPartProps, {}&amp;amp;gt; {\r\n  public render(): React.ReactElement&amp;amp;lt;ISearchWebPartProps&amp;amp;gt; {\r\n    let data:string=&quot;No hay nada que buscar&quot;;\r\n    if (this.props.query!==undefined) {\r\n      data=this.props.query.text;\r\n    }\r\n    return (\r\n      \r\n&amp;amp;lt;div className={ styles.searchWebPart }&amp;amp;gt;\r\n        \r\n&amp;amp;lt;div className={ styles.container }&amp;amp;gt;\r\n          \r\n&amp;amp;lt;div className={ styles.row }&amp;amp;gt;\r\n            \r\n&amp;amp;lt;div className={ styles.column }&amp;amp;gt;\r\n              \r\n&amp;amp;lt;h2&amp;amp;gt;BUscar por &amp;amp;lt;\/h2&amp;amp;gt;\r\n\r\n {data}\r\n            &amp;amp;lt;\/div&amp;amp;gt;\r\n\r\n          &amp;amp;lt;\/div&amp;amp;gt;\r\n\r\n        &amp;amp;lt;\/div&amp;amp;gt;\r\n\r\n      &amp;amp;lt;\/div&amp;amp;gt;\r\n\r\n    );\r\n  }\r\n}\r\n<\/pre>\n<p><strong>Resumen<\/strong><br \/>\nComo hemos podido ver en este extenso art\u00edculo, Spfx cada vez es m\u00e1s completo y presenta\u00a0 m\u00e1s opciones para cubrir todos los casos que se utilizaban en las clasificadas Farm Solution. Pero en este caso, y este es un punto a favor de Spfx,\u00a0 han aprendido de los errores del pasado y ahora nos ofrecen mucho mejores posibilidades para poder incorporarlas en nuestro d\u00eda a d\u00eda. \u00bfQu\u00e9 os parece?<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>Si echamos la vista atr\u00e1s y retrocedemos dos veranos, hasta el momento en que se anunci\u00f3 el SharePoint FrameWork, podemos ver c\u00f3mo ha evolucionado y sin duda, afirmar que ha venido para quedarse.<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":2740,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[180],"tags":[],"class_list":["post-2720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spfx"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>SPFX: Dynamic Data en App Extension - Desarrollando sobre SharePoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"SPFX: Dynamic Data en App Extension - Desarrollando sobre SharePoint\" \/>\n<meta name=\"twitter:description\" content=\"Si echamos la vista atr\u00e1s y retrocedemos dos veranos, hasta el momento en que se anunci\u00f3 el SharePoint FrameWork, podemos ver c\u00f3mo ha evolucionado y sin duda, afirmar que ha venido para quedarse.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adri\u00e1n D\u00edaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/\"},\"author\":{\"name\":\"Adri\u00e1n D\u00edaz\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"headline\":\"SPFX: Dynamic Data en App Extension\",\"datePublished\":\"2018-07-03T08:09:23+00:00\",\"dateModified\":\"2018-07-18T11:30:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/\"},\"wordCount\":1673,\"commentCount\":0,\"image\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2018\\\/06\\\/SPFX.jpg\",\"articleSection\":[\"spfx\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/\",\"url\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/\",\"name\":\"SPFX: Dynamic Data en App Extension - Desarrollando sobre SharePoint\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2018\\\/06\\\/SPFX.jpg\",\"datePublished\":\"2018-07-03T08:09:23+00:00\",\"dateModified\":\"2018-07-18T11:30:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"http:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/spfx-dynamic-data-app-extension\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2018\\\/06\\\/SPFX.jpg\",\"contentUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2018\\\/06\\\/SPFX.jpg\",\"width\":1076,\"height\":945},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#website\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/\",\"name\":\"Desarrollando sobre SharePoint\",\"description\":\"Arquitectura, buenas pr\u00e1cticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/#\\\/schema\\\/person\\\/c9bfaede1bfba9564bb7f500788782bb\",\"name\":\"Adri\u00e1n D\u00edaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g\",\"caption\":\"Adri\u00e1n D\u00edaz\"},\"description\":\"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/desarrollandosobresharepoint\\\/author\\\/desarrollandosobresharepoint\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SPFX: Dynamic Data en App Extension - Desarrollando sobre SharePoint","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/","twitter_card":"summary_large_image","twitter_title":"SPFX: Dynamic Data en App Extension - Desarrollando sobre SharePoint","twitter_description":"Si echamos la vista atr\u00e1s y retrocedemos dos veranos, hasta el momento en que se anunci\u00f3 el SharePoint FrameWork, podemos ver c\u00f3mo ha evolucionado y sin duda, afirmar que ha venido para quedarse.","twitter_image":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg","twitter_misc":{"Escrito por":"Adri\u00e1n D\u00edaz","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/#article","isPartOf":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/"},"author":{"name":"Adri\u00e1n D\u00edaz","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"headline":"SPFX: Dynamic Data en App Extension","datePublished":"2018-07-03T08:09:23+00:00","dateModified":"2018-07-18T11:30:50+00:00","mainEntityOfPage":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/"},"wordCount":1673,"commentCount":0,"image":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg","articleSection":["spfx"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/","url":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/","name":"SPFX: Dynamic Data en App Extension - Desarrollando sobre SharePoint","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#website"},"primaryImageOfPage":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/#primaryimage"},"image":{"@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg","datePublished":"2018-07-03T08:09:23+00:00","dateModified":"2018-07-18T11:30:50+00:00","author":{"@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/spfx-dynamic-data-app-extension\/#primaryimage","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg","contentUrl":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2018\/06\/SPFX.jpg","width":1076,"height":945},{"@type":"WebSite","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#website","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/","name":"Desarrollando sobre SharePoint","description":"Arquitectura, buenas pr\u00e1cticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/#\/schema\/person\/c9bfaede1bfba9564bb7f500788782bb","name":"Adri\u00e1n D\u00edaz","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe10b9eaf8ce4565ec75fba5a0d121c16186696e515cad2bedd42f6cf54e2007?s=96&d=mm&r=g","caption":"Adri\u00e1n D\u00edaz"},"description":"Adri\u00e1n D\u00edaz es Ingeniero Inform\u00e1tico por la Universidad Polit\u00e9cnica de Valencia. Es MVP de Microsoft en la categor\u00eda Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnolog\u00edas Microsoft m\u00e1s de 10 a\u00f1os y desde hace 3 a\u00f1os est\u00e1 centrado en el desarrollo sobre SharePoint. Actualmente es Software &amp; Cloud Architect Lead en ENCAMINA.","url":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/author\/desarrollandosobresharepoint\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts\/2720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/comments?post=2720"}],"version-history":[{"count":0,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/posts\/2720\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/media\/2740"}],"wp:attachment":[{"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/media?parent=2720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/categories?post=2720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-json\/wp\/v2\/tags?post=2720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}