Eric D 3 Years Ago - Edited Thanks for your post. It will be precious for us in our next micro-frontend projects. May be it will be great if we can create a lot of js-bundle like we are doing this for fragments.It will be great to have one bundle for Angular 10, another for a graph module like d3j or c3j, another one for datatables...So we can reuse those modules in differents projects and/or differents modules. Eric. Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Yep, the js-bundle it's very powerful to help us in the client-side. It's a great idea use it js-bundle for fragments too :) , to load the module is as simple as use a Liferay loader: Liferay.Loader.require("common-js@1.0.0", function() { }); Please sign in to reply. Reply as... Cancel Eric D Roselaine Marques 3 Years Ago - Edited Hi Roselaine, I have tried to make a billboard npm module provider but I can not use it in my fragment.To do this, I have done like it is explain here :https://help.liferay.com/hc/en-us/articles/360046483472-How-to-load-a-third-party-npm-package-as-a-JS-provider-OSGi-bundle-in-Liferay-7-1-and-7-2- But Billboard needs D3, I have imported D3 too : npm i d3 npm i billboard.js But after when I want to create my fragment, it doesn't work : Liferay.Loader.require('d3-billboard@1.0.0', function(bb) { var chart = bb.generate({ data: { columns: JSON.parse(configuration.data), type: "area-spline" }, bindto: fragmentElement });}); I have tried this too : Liferay.Loader.require('d3-billboard$d3@6.7.0', function(d3) { Liferay.Loader.require('d3-billboard$billboard.js@3.0.3', function(bb) { var chart = bb.generate({ data: { columns: JSON.parse(configuration.data), type: "area-spline" }, bindto: fragmentElement }); });}); I just want to provide a chart library for a POC... I have found an example with a billboard-theme-contributor but theme contributor is loaded in every pages... it is not the right way I think. Have you an example of a such npm provider ? (It seems not to be very simple) Eric. Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago - Edited Hello Eric, The problem is you are trying to import a Class (bb), and the Loader is waiting for a function. In this case, you could import in your index.js and assign to a variable or create another function and call them in the loader. Here a simple sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/main/modules/billboard-provider-js Please sign in to reply. Reply as... Cancel Eric D Roselaine Marques 3 Years Ago - Edited Hello Roselaine, Thanks for your work, but I want to use this fragment and configure it in many fragments. In your example, we saw a graph but how can I change the values or the shape of this graph ? Here you define the configuration in the provider not in the fragment. Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited Hello, Today I have clone your repo and deploy your module provider and I have the same pb, I have always this error in Chrome :Uncaught SyntaxError: Unexpected token ':' In Firefox it is another bug : Uncaught SyntaxError: invalid property id combo:50:79 I don't know if it is the build or the Liferay version (I use a Liferay 7.3.10). Can your share your jar on github because I have exactly your code and it doesn't work with my docker (BASE_IMAGE=liferay/dxp:7.3.10-ga1) ? I will try with a liferay-ce-portal-7.3.5-ga6 to see the difference... Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Roselaine Marques Eric D 3 Years Ago Hi Eric, Yep, the js-bundle it's very powerful to help us in the client-side. It's a great idea use it js-bundle for fragments too :) , to load the module is as simple as use a Liferay loader: Liferay.Loader.require("common-js@1.0.0", function() { }); Please sign in to reply. Reply as... Cancel Eric D Roselaine Marques 3 Years Ago - Edited Hi Roselaine, I have tried to make a billboard npm module provider but I can not use it in my fragment.To do this, I have done like it is explain here :https://help.liferay.com/hc/en-us/articles/360046483472-How-to-load-a-third-party-npm-package-as-a-JS-provider-OSGi-bundle-in-Liferay-7-1-and-7-2- But Billboard needs D3, I have imported D3 too : npm i d3 npm i billboard.js But after when I want to create my fragment, it doesn't work : Liferay.Loader.require('d3-billboard@1.0.0', function(bb) { var chart = bb.generate({ data: { columns: JSON.parse(configuration.data), type: "area-spline" }, bindto: fragmentElement });}); I have tried this too : Liferay.Loader.require('d3-billboard$d3@6.7.0', function(d3) { Liferay.Loader.require('d3-billboard$billboard.js@3.0.3', function(bb) { var chart = bb.generate({ data: { columns: JSON.parse(configuration.data), type: "area-spline" }, bindto: fragmentElement }); });}); I just want to provide a chart library for a POC... I have found an example with a billboard-theme-contributor but theme contributor is loaded in every pages... it is not the right way I think. Have you an example of a such npm provider ? (It seems not to be very simple) Eric. Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago - Edited Hello Eric, The problem is you are trying to import a Class (bb), and the Loader is waiting for a function. In this case, you could import in your index.js and assign to a variable or create another function and call them in the loader. Here a simple sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/main/modules/billboard-provider-js Please sign in to reply. Reply as... Cancel Eric D Roselaine Marques 3 Years Ago - Edited Hello Roselaine, Thanks for your work, but I want to use this fragment and configure it in many fragments. In your example, we saw a graph but how can I change the values or the shape of this graph ? Here you define the configuration in the provider not in the fragment. Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited Hello, Today I have clone your repo and deploy your module provider and I have the same pb, I have always this error in Chrome :Uncaught SyntaxError: Unexpected token ':' In Firefox it is another bug : Uncaught SyntaxError: invalid property id combo:50:79 I don't know if it is the build or the Liferay version (I use a Liferay 7.3.10). Can your share your jar on github because I have exactly your code and it doesn't work with my docker (BASE_IMAGE=liferay/dxp:7.3.10-ga1) ? I will try with a liferay-ce-portal-7.3.5-ga6 to see the difference... Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Eric D Roselaine Marques 3 Years Ago - Edited Hi Roselaine, I have tried to make a billboard npm module provider but I can not use it in my fragment.To do this, I have done like it is explain here :https://help.liferay.com/hc/en-us/articles/360046483472-How-to-load-a-third-party-npm-package-as-a-JS-provider-OSGi-bundle-in-Liferay-7-1-and-7-2- But Billboard needs D3, I have imported D3 too : npm i d3 npm i billboard.js But after when I want to create my fragment, it doesn't work : Liferay.Loader.require('d3-billboard@1.0.0', function(bb) { var chart = bb.generate({ data: { columns: JSON.parse(configuration.data), type: "area-spline" }, bindto: fragmentElement });}); I have tried this too : Liferay.Loader.require('d3-billboard$d3@6.7.0', function(d3) { Liferay.Loader.require('d3-billboard$billboard.js@3.0.3', function(bb) { var chart = bb.generate({ data: { columns: JSON.parse(configuration.data), type: "area-spline" }, bindto: fragmentElement }); });}); I just want to provide a chart library for a POC... I have found an example with a billboard-theme-contributor but theme contributor is loaded in every pages... it is not the right way I think. Have you an example of a such npm provider ? (It seems not to be very simple) Eric. Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago - Edited Hello Eric, The problem is you are trying to import a Class (bb), and the Loader is waiting for a function. In this case, you could import in your index.js and assign to a variable or create another function and call them in the loader. Here a simple sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/main/modules/billboard-provider-js Please sign in to reply. Reply as... Cancel Eric D Roselaine Marques 3 Years Ago - Edited Hello Roselaine, Thanks for your work, but I want to use this fragment and configure it in many fragments. In your example, we saw a graph but how can I change the values or the shape of this graph ? Here you define the configuration in the provider not in the fragment. Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited Hello, Today I have clone your repo and deploy your module provider and I have the same pb, I have always this error in Chrome :Uncaught SyntaxError: Unexpected token ':' In Firefox it is another bug : Uncaught SyntaxError: invalid property id combo:50:79 I don't know if it is the build or the Liferay version (I use a Liferay 7.3.10). Can your share your jar on github because I have exactly your code and it doesn't work with my docker (BASE_IMAGE=liferay/dxp:7.3.10-ga1) ? I will try with a liferay-ce-portal-7.3.5-ga6 to see the difference... Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Roselaine Marques Eric D 3 Years Ago - Edited Hello Eric, The problem is you are trying to import a Class (bb), and the Loader is waiting for a function. In this case, you could import in your index.js and assign to a variable or create another function and call them in the loader. Here a simple sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/main/modules/billboard-provider-js Please sign in to reply. Reply as... Cancel Eric D Roselaine Marques 3 Years Ago - Edited Hello Roselaine, Thanks for your work, but I want to use this fragment and configure it in many fragments. In your example, we saw a graph but how can I change the values or the shape of this graph ? Here you define the configuration in the provider not in the fragment. Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited Hello, Today I have clone your repo and deploy your module provider and I have the same pb, I have always this error in Chrome :Uncaught SyntaxError: Unexpected token ':' In Firefox it is another bug : Uncaught SyntaxError: invalid property id combo:50:79 I don't know if it is the build or the Liferay version (I use a Liferay 7.3.10). Can your share your jar on github because I have exactly your code and it doesn't work with my docker (BASE_IMAGE=liferay/dxp:7.3.10-ga1) ? I will try with a liferay-ce-portal-7.3.5-ga6 to see the difference... Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Eric D Roselaine Marques 3 Years Ago - Edited Hello Roselaine, Thanks for your work, but I want to use this fragment and configure it in many fragments. In your example, we saw a graph but how can I change the values or the shape of this graph ? Here you define the configuration in the provider not in the fragment. Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited Hello, Today I have clone your repo and deploy your module provider and I have the same pb, I have always this error in Chrome :Uncaught SyntaxError: Unexpected token ':' In Firefox it is another bug : Uncaught SyntaxError: invalid property id combo:50:79 I don't know if it is the build or the Liferay version (I use a Liferay 7.3.10). Can your share your jar on github because I have exactly your code and it doesn't work with my docker (BASE_IMAGE=liferay/dxp:7.3.10-ga1) ? I will try with a liferay-ce-portal-7.3.5-ga6 to see the difference... Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Eric D Eric D 3 Years Ago - Edited Hello, Today I have clone your repo and deploy your module provider and I have the same pb, I have always this error in Chrome :Uncaught SyntaxError: Unexpected token ':' In Firefox it is another bug : Uncaught SyntaxError: invalid property id combo:50:79 I don't know if it is the build or the Liferay version (I use a Liferay 7.3.10). Can your share your jar on github because I have exactly your code and it doesn't work with my docker (BASE_IMAGE=liferay/dxp:7.3.10-ga1) ? I will try with a liferay-ce-portal-7.3.5-ga6 to see the difference... Eric. Please sign in to reply. Reply as... Cancel Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Eric D Eric D 3 Years Ago - Edited That's it... with my new liferay-ce-portal-7.3.5-ga6 env, your example works !I will try again with mine... I don't know what is the pb with the other image... I have test with the docker image of Lifebank (https://github.com/martin-dominguez/lifebank73-demo-stack) Now I can try to use the "configuration.data" of the fragment... Please sign in to reply. Reply as... Cancel Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Roselaine Marques Eric D 3 Years Ago Hi Eric, Sorry for delay, I had a hard week. To be configurable, you just need to create a function and export it. Here my sample: https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/export-function/modules/billboard-provider-js Hope it helps :) Please sign in to reply. Reply as... Cancel
Fredi B 3 Years Ago - Edited Hello Roselaine, is this also possible with React-Modules? Please sign in to reply. Reply as... Cancel Roselaine Marques Fredi B 3 Years Ago Hello Fredi, if you are asking about do the React Modules as a consumer and the Shared Bundle as a provider. Yes :) It's pretty same process explained here (I've planned to post with React and React-Java this week). Please sign in to reply. Reply as... Cancel
Roselaine Marques Fredi B 3 Years Ago Hello Fredi, if you are asking about do the React Modules as a consumer and the Shared Bundle as a provider. Yes :) It's pretty same process explained here (I've planned to post with React and React-Java this week). Please sign in to reply. Reply as... Cancel
Shaleen Agarwal 2 Years Ago Hello Roselaine, I have tried same and working pretty good. Could you please share any example with routing 1) how can we define page with routing url to call a xyz component in liferay portal?(As I have created multiple components in my angular widget) 2) how can we naviagte between mutilple widgets with the help of angular routing ? Please sign in to reply. Reply as... Cancel
Mario Alberquilla 1 Year Ago - Edited Hi Rosaline. I have multiple Angular Remote Apps with a vendor library that is more or less 25Mb. Can I use some similar process to share this vendor library between all remote apps? Please sign in to reply. Reply as... Cancel