How to Use The Code Generator

Context

      The "graphomate Code Generator for UI5" is a tool to convert existing charts in Lumira Designer to SAPUI5. You can choose between Javascript or XML output, depending on how you want to implement your charts.

Procedure 

  1. Tick the "Excel export available"-box in the Additional Properties sheet of the Design Studio chart.


  2. Click in the upper right corner of the chart to open the JSON export in a new tab.


  3. Copy the code from the new tab and paste it into the textarea of the Code Generator and click submit.
  4. In the second textarea you find the SAPUI5 code, which you need to implement the chart in your SAPUI5 application.
  5. You can change the output code to XML by clicking on the XML-button above the output textarea. 
  6. In the preview section you'll find a preview of your chart in SAPUI5.
  7. Copy the text out of the output textarea and paste it into your JS or XML file. (When you use the XML code, make sure to put the upper Javascript part into your controller!)