Integration ChartJS with Liferay 7 UI

[Mohammed Rawoof Shaik，修改在6 年前。]

Hello LR Community,

Requirement:
I had developed a portlet on LR6.2. I upgraded the portlet using the Liferay Code Upgrade Tool, and after resolving few dependency conflicts in the pom.xml the portlet deployed successfully. I'm using ChartJS in the portlet, which was working and rendering in LR6.2 but fails in LR7 after the upgrade.

Approach:
Attached is my webapp project structure. I'm referencing the ChartJS location with the below in the JSP,

<script type="text/javascript" charset="utf8" src="<%=request.getContextPath()%>/chartjs/Chart.min.js"></script>

I'm creating the chart with the below code in the JSP,

<aui:script use="node, array-extras">
      var barChart = new Chart(elementChart, { // chart config });
</aui:script>

The file loads and is available on inspection in the browser. See attached project-resources image.

Issue:
The chart doesn't render and the browser console logs have the error, 'Uncaught ReferenceError: Chart is not defined'. See chart-error image.

Question:
What am I missing here?

[Chema Balsas，修改在6 年前。]

Hey Mohammed

That's probably caused by the new AMD loader getting in the way of your library. Take a look at the Using External Libraries tutorial

The easiest way, as explained in the tutorial is:

With the release of Liferay Portal CE 7.0 GA4 and Liferay Digital Enterprise 7.0 SP2 (Fix Pack 8), it will be possible to hide the Liferay AMD Loader through Liferay Portal’s System Settings. Open the Control Panel, navigate to Configuration → System Settings, and click JavaScript Loader under the Foundation tab. Finally, uncheck the expose global option.

Hope that helps!

[Mohammed Rawoof Shaik，修改在6 年前。]

Hi Chema,

This fixed the issue. The charts are now rendering. Thanks.

Question:
What are the implications of disabling the 'expose global option' feature?

[Chema Balsas，修改在6 年前。]

There should be no side-effects of disabling this option. As a matter of fact, it is just kept enabled because we didn't want to introduce a breaking change in case someone was already depending on that setting.

We are going to turn it off by default in the next version of Liferay Portal.

The only thing it does is hide the amd-compliant loader behind a namespace. The observed effect is that UMD wrappers with the if (require && require.amd) check no longer passes and thus the plugins fall back to their default global instantiation.