jsreport forum

bjrmatos

i see you tried to upload the zip, looks like there was a problem during the upload, can you try again?

bjrmatos

hmm i see, so yes this can be a bug, can you share an export zip with the template (and other entities that this template needs)? i would like to try it and check.

PD: you can upload the zip here, just click the "Reply" button and you will be able to drag and drop your zip file in the new left area that is shown.

bjrmatos

hi! can you describe or show how do you send the request? it looks like your http request client is serializing that value to string

bjrmatos

Everything works as it should if I use var instead of const in const chartData = {{{getChartData}}};
Not even let works, so this has something with local scopes to do.

when you use an html script any variable you define is put into the global scope, the variables are only in local scope if they are inside a function. for your case the const, let does not work because these declarations are more strict, they don't allow duplicates in the same scope, and since your variables are all in the global scope then you have a conflict. when you use var it works because that declaration is more permissive, it allows duplicates.

also it is worth to mention that i think you are producing an invalid html document with your child template calls, i mean it can work right now but it is technically a bad html document what you are generating.

this is what you are producing:

<div class="chart-container">
   <!DOCTYPE html><html>
  <head>
      <meta charset="utf-8">
      <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>

  <div id={{getChartId}} style="width:{{getChartWidth}}; height:{{getChartHeight}}"/>

  <script>
      const chartData = {{{getChartData}}};

      Highcharts.chart({{getChartId}}, {
          series: chartData.series,
          chart: {
              type: 'area'
          },
          ...// options omitted in this example
      });
  </script>

  </body>
  </html>
</div>

technically you can not have another html, body element in the same html document. as i said it can work just fine right now but it is not a best practice. if you want your child template to also work as a main template you usually need a bit of more code, you need to detect when the template is called as child or main, and based on that include the full html definition or just part of it that is designed for embedding into another document.

FYI you can detect wheter the template is used as main or child template in a script, by checking the req.context.isChildRequest variable

bjrmatos

i see, yes i was 95% sure that you were using moment :) there is also another trick you can try, for example you can make the helper without a require.

// asset formatDate.js code
function formatDate (val) {
  return moment(....)
}

as you can see the formatDate does not require anything directly, it just expect that moment exists

then in your helpers definition, you can use something like this

const moment = require('moment')
.... another requires....
{#asset formatDate.js}

and in your template html you can fetch moment, moment-timezone, etc from a CDN and the moment will be also available globally

<script src="https://unpkg.com/browse/moment@2.24.0/min/moment.min.js"></script>

<script>
{#asset formatDate.js}

.....
xAxis: {
            type: 'datetime',
            labels: {
                formatter: function() {return formatDate(this.value) }
            },
        },
....
</script>

it probably needs more code changes but this is the general idea, i think it is possible

bjrmatos

hmm that won't work, the formatDate helper runs in another context (server side) and the script runs in another (browser side), what you can do is put the formatDate function definition into an asset, and then you can use that asset for your helpers and for the template html script, something like this

<script>
{#asset formatDate.js}

.....
xAxis: {
            type: 'datetime',
            labels: {
                formatter: function() {return formatDate(this.value) }
            },
        },
....
</script>

however this depends on the kind of code you use in the formatDate, for example if the formatDate depends on another module (a require call) then it won't work in your html script and you will need to just replicate the format logic with another code that is compatible in the browser.

bjrmatos

hi again, we have fixed the problem here

if you need this urgently then update the extension installing it from git npm i jsreport/jsreport-resources until we release a new version on npm.

thanks

bjrmatos

hi! yes, there is a bug there in that code, we will review it and ensure it resolves properly with the default language, thanks for the communication

bjrmatos

yes, it is something we are planning to improve in the future, i agree it is not nice to know what is compatible with what, but stay tunned it is on radar

bjrmatos

you are probably installing jsreport-wkhtmltopdf@2.2.0 which is not compatible with the version of jsreport you have 2.6.1 (i guess) you can do one of the following:

install jsreport-wkhtmltopdf@2.1.1 which is compatible with version of jsreport you should have

or

install jsreport@2.7.0 which was just released some minutes ago, but make sure to read the release notes before doing it (blog post about the 2.7.0 release is coming also)

BORIS MATOS MORILLO

@bjrmatos

Posts made by bjrmatos