Re: HTML Template Start Expression - Google Chart

Grant_Stead · 08-11-2020 02:55 PM

@Phil I know this is kinda your baby…
Having issues getting a start expression to run… (Or maybe it’s something else…) I’m trying to webhook this google gantt chart html to a service that converts HTML to images… It works great with static HTML, and I was able to get it dynamic with the default date, but I can’t get the records…

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var otherData = new google.visualization.DataTable();
      otherData.addColumn('string', 'Task ID');
      otherData.addColumn('string', 'Task Name');
      otherData.addColumn('string', 'Resource');
      otherData.addColumn('date', 'Start');
      otherData.addColumn('date', 'End');
      otherData.addColumn('number', 'Duration');
      otherData.addColumn('number', 'Percent Complete');
      otherData.addColumn('string', 'Dependencies');

      otherData.addRows([
        &lt;&lt;START: [VC_Task_Children]&gt;&gt;['&lt;&lt;[task_key]&gt;&gt;', '&lt;&lt;[task_key]&gt;&gt;', null, null, null, &lt;&lt;[VC_ms]&gt;&gt;, 50, null],&lt;&lt;End&gt;&gt;

      ]);

      var options = {
        height: 300,
        gantt: {
          defaultStartDateMillis: new Date(&lt;&lt;YEAR([task_mandatory_start])&gt;&gt;, &lt;&lt;MONTH([task_mandatory_start])&gt;&gt;, &lt;&lt;DAY([task_mandatory_start])&gt;&gt;)
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(otherData, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Grant_Stead

This here worked dynamically prior to attempting the <><>

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function toMilliseconds(minutes) {
      return minutes * 60 * 1000;
    }

    function drawChart() {

      var otherData = new google.visualization.DataTable();
      otherData.addColumn('string', 'Task ID');
      otherData.addColumn('string', 'Task Name');
      otherData.addColumn('string', 'Resource');
      otherData.addColumn('date', 'Start');
      otherData.addColumn('date', 'End');
      otherData.addColumn('number', 'Duration');
      otherData.addColumn('number', 'Percent Complete');
      otherData.addColumn('string', 'Dependencies');

      otherData.addRows([
        ['toTrain', 'Walk to train stop', 'walk', null, null, toMilliseconds(5), 100, null],
		['music', 'Listen to music', 'music', null, null, toMilliseconds(70), 100, null],
        ['wait', 'Wait for train', 'wait', null, null, toMilliseconds(10), 100, 'toTrain'],
        ['train', 'Train ride', 'train', null, null, toMilliseconds(45), 75, 'wait'],
        ['toWork', 'Walk to work', 'walk', null, null, toMilliseconds(10), 0, 'train'],
        ['work', 'Sit down at desk', null, null, null, toMilliseconds(2), 0, 'toWork'],

      ]);

      var options = {
        height: 300,
        gantt: {
          defaultStartDateMillis: new Date(&lt;&lt;YEAR([task_mandatory_start])&gt;&gt;, &lt;&lt;MONTH([task_mandatory_start])&gt;&gt;, &lt;&lt;DAY([task_mandatory_start])&gt;&gt;)
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(otherData, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Bellave_Jayaram

Have you tried saving the actual resulting HTML to a file and validating it and/or passing it to your conversion service?

Grant_Stead

Maybe I’ll have some time to double check it… I ran into some walls, and did some searching here and found some other people hitting the same issue.

Grant_Stead

@Bellave_Jayaram and @Phil Here’s what i’m seeing…

When I build my template without paragraph marks around my START statement I get the following error… When I include paragraph marks, Appsheet will run it, but the HTML is useless… I am getting the vibe that the start expressions NEED something to indicate to start a new line…

Failed: Action not performed because 3 errors are present. Error: Workflow rule ‘TestStartExpression’ action ‘startexpressionhtml’ Body template. Expression ‘START: [VC_Task_Children]’ is invalid due to: Unable to find table ‘START:’, did you mean ‘TASK’?. Error: Workflow rule ‘TestStartExpression’ action ‘startexpressionhtml’ Body template. Expression ‘End’ is invalid due to: Expression refers to undefined field. Error: The document body is empty.

Template with paragraph marks, even though I can’t use them:
<p><<START: [VC_Task_Children]>>['<<[task_key]>>', '<<[task_key]>>', null, null, null, <<[VC_ms]>>, 50, null],<<End>></p>

Result:
<p><span>['R1_L1_C1', 'R1_L1_C1', null, null, null, 86,400,000, 50, null],</span><span>['R1_L1_C2', 'R1_L1_C2', null, null, null, 158,400,000, 50, null],</span><span>['R1_L1_C3', 'R1_L1_C3', null, null, null, 3,600,000, 50, null],</span></p>

Phil

When I parse the HTML template, I look for Start, End, StartIf, and EndIf expressions inside HTML <P> and <H1> through <H6> elements. (When you use a Google Doc template it is downloaded as HTML.) A single <P> or <H> element may contain the matching Start/End or StartIf/EndIf.

The template replacement strategy relies on parsing and replacing HTML elements in the HTML DOM.

I have never considered looking for Start, End, StartIf, and EndIf expressions inside <Script> tags.
I am not sure if my existing parsing and replacement logic would handle that correctly.

If you send me a simple app that reproduces the problem I can try it.
One word of caution, Doing that may take me a while.
I am buried in other support issues at the moment.

Grant_Stead

I found a workaround, it’s not pretty, but it gets me down the road… More than anything just trying to understand it better.

mateo

I was looking for this information for an eternity, until finally here it was. Thank you @Phil for this answer and @Grant_Stead for starting this topic. It solves all my problems with Select: expression in HTML templates. God bless you 🙏🏼

Phil

Hi Grant,

Glad you found a workaround. I am still happy to try adding <Script> to the list of HTML elements I check when looking for Start/End if you like.

Grant_Stead

That would be cool…
It’ll make it a little more resilient for this google charts HTML…