Portlet VUE problemas con configuration.jsonPortlet VUE problemas con configuration.jsonhttps://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=1185325252024-03-28T12:45:18Z2024-03-28T12:45:18ZRE: Portlet VUE problemas con configuration.jsonJorge Páezhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1185470522020-02-19T11:46:56Z2020-02-19T11:46:56ZMuchas gracias Ivan, efectivamente eso era lo que pasaba. <br /><br />Gracias por la ayuda.Jorge Páez2020-02-19T11:46:56ZRE: Portlet VUE problemas con configuration.jsonIván Zaera Avellónhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1185461842020-02-19T09:27:41Z2020-02-19T09:27:41ZHola Jorge:<br />Recibir { "portletInstance": {}, "system": {} } en el parametro configuration es el comportamiento esperado en ausencia de configuración.<br />Para que llegué algo en el campo "portletInstance" tienes que abrir el diálogo de configuración del portlet, rellenar el campo "Token" y guardar. Y te llegara un campo "token" dentro de "portletInstance" con el valor que hayas introducido.<br />En el caso del campo "system", tienes que ir a Control Panel > Configuration > System Settings y buscar la configuración de tu portlet en la categoria "Slick Instagram Carousel". Entras al diálogo, rellenas valores y pasará lo mismo que con "portletInstance".<br />Saludos.Iván Zaera Avellón2020-02-19T09:27:41ZPortlet VUE problemas con configuration.jsonJorge Páezhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1185325242020-02-18T11:37:13Z2020-02-18T11:37:13ZHe desarrollado vía LR JS Generator un portlet de Vue, un Slick Carousel que se conecta a la API de instagram y pinta posts como slides dentro de el. Para poder configurar el portlet una vez desplegado en LR he customizado el archivo "configuration.json" ubicado dentro de la carpeta "features" del portlet. El portlet se despliega correctamente y puedo ver los campos configurados dentro del archivo json clickando en la opción "Configuration" del Portlet cuando lo despliego en la plataforma. <br /><br />Pasa lo siguiente, he pintado desde Vue el archivo "configuration.json" para poder comprobar su contenido y veo que este se pinta como vacio a pesar de que tengo un archivo con campos creados y hago la llamada del atributo dentro de la función "main" autogenerada por LR JS Generator. Todas las demás propiedades que llegan desde Liferay se pintan con los datos correctos menos "configuration". Aparentemente LR no reconoce los campos creados en el archivo de configuración (de allí que pinte el json como vacío) y por tanto no puedo pasar datos desde la configuración del portlet en LR hacia mi aplicación en Vue para tratar temas configurables del carrusel como tags, tokens de usuario, etc.<br /><br />Este es el entry point de mi Portlet Vue, donde expongo en la función "main" que me proporciona LR JS Generator las propiedades: portletNamespace, contextPath, portletElementId y configuration. Luego en la función "render" de Vue cargo esas propiedades en mi data para poder tratarlas en mis componentes de Vue:<br /><br />import Vue from "vue/dist/vue.common";<br />import App from "./App.vue";require("../assets/css/carousel.scss");export default function main({<br /> portletNamespace,<br /> contextPath,<br /> portletElementId,<br /> configuration<br />}) {<br /> Vue.config.productionTip = false;<br /> new Vue({<br /> el: `#${portletElementId}`,<br /> render: h => h(App),<br /> data: {<br /> portletNamespace,<br /> contextPath,<br /> portletElementId,<br /> configuration<br /> }<br /> });<br /><br />Para comprobar si las propiedades de Liferay llegan a mis datos en Vue correctamente los pinto en el dom desde un componente de la siguiente forma:<br /><br /> <p>{{ this.$root.$data.portletNamespace }}</p><br /> <p>{{ this.$root.$data.contextPath }}</p><br /> <p>{{ this.$root.$data.portletElementId }}</p><br /> <p>{{ this.$root.$data.configuration }}</p><br /><br />Al desplegar el portlet en LR se renderizan correctamente todos los atributos PERO "configuration" (que debería pintar el contenido del archivo "configuration.json") se pinta vacio cuando en realidad el archivo tiene campos de configuración. Además he comprobado que el esquema del json es correcto. Esto es lo que se renderiza al pintar el json de configuración: <br /><br />{ "portletInstance": {}, "system": {} }<br /><br />Y este es el "configuration.json" que tengo creado dentro de la carpeta features de mi portlet Vue:<br /><br />{<br /> "$schema": "https://raw.githubusercontent.com/liferay/liferay-js-toolkit/master/resources/schemas/configuration.schema.json",<br /> "system": {<br /> "category": "Slick Instagram Carousel",<br /> "name": "vue-slick-instagram-carousel",<br /> "fields": {<br /> "token:": {<br /> "type": "string",<br /> "name": "Token",<br /> "default": "token here"<br /> },<br /> "tag1:": {<br /> "type": "string",<br /> "name": "Tag 1",<br /> "default": ""<br /> },<br /> "tag2:": {<br /> "type": "string",<br /> "name": "Tag 2",<br /> "default": ""<br /> },<br /> "tag3:": {<br /> "type": "string",<br /> "name": "Tag 3",<br /> "default": ""<br /> } <br /> }<br /> },<br /> "portletInstance": {<br /> "category": "Instagram Carousel",<br /> "name": "Instagram Carousel",<br /> "fields": {<br /> "token": {<br /> "type": "string",<br /> "name": "Token",<br /> "default":