I read Dong Pan's excellent blog "Migrate VizPacker-based Lumira Visualization Extensions to Web IDE" and wanted to check for myself that the migration (or porting) is that simple.
This blog provides a very detailed description of how I ported the Bullet chart visualization extension (from Matt Lloyd) from the Lumira VizPacker Utility to SAP Web IDE.
Spoiler - Yes, porting visualization extensions from Lumira VizPacker Utility to SAP Web IDE is that simple.
Some background information
SAP Web IDE version 1.10.2.
SAP Web IDE VizPacker Plugin version 1.1.2.
SAP Lumira Personal Edition version 1.25.1.
Starting Point / Pre-Requisites
- SAP Web IDE account (factory or trial). If you do not have an account, refer to the following resources
- SAP Lumira Desktop. If you do not have it, refer to the following resources
- A working Bullet chart in Lumira VizPacker Utility (from Matt Lloyd). Any visualization extension will do. Refer to
- Chrome is the preferred browser.
This blog expands a bit more than just the porting process. I'll present the following:
- Several ways to know that the SAP Web IDE VizPacker Plugin is enabled.
- Enabling the SAP Web IDE VizPacker Plugin.
- Generating an empty visualization extension project that will hold the ported Bullet chart visualization extension.
- Porting from Lumira VizPacker Utility to SAP Web IDE.
- Deploying to Lumira.
Due to the size of the blog I split it to two parts.
This part will cover all of the porting from the SAP Lumira VizPacker Utility to SAP Web IDE.
The second part (Migrate Bullet Chart from Lumira VizPacker Utility to SAP Web IDE VizPacker Plugin - Part 2) covers the deployment from SAP Web IDE to SAP Lumira.
Let's start ...
Is the VizPacker Plugin Enabled?
Once logged into SAP Web IDE, you'll see the VizPacker plugin pane icon at the right-hand toolbar and the VizPacker "Pack" icon at the top toolbar as appears in the image below. If you do not see them, it means that you need to enable the VizPacker plugin. Enabling the VizPacker plugin is described in the next section.
Enabling the SAP Web IDE VizPacker Plugin (also an additional way to verify that the VizPacker plugin is enabled)
In SAP Web IDE - Got to Tools > Preferences (see image below)
In the screen that appears select "Optional Plugins" (see image below).
In the screen that appears - If the checkbox next to the VizPacker plugin is checked, it means that the VizPacker plugin is enabled.
If the checkbox is not checked, enabled the VizPacker plugin by checking it and then refresh the browser for the enablement to take place.
Generating an empty visualization extension project that will hold the ported Bullet chart visualization extension
In the Web IDE, select File > New > Project from Template (see image below).
Use the drop down to filter the VizPacker template:
Select the "Visualization Extension" template and click "Next".
Fill-in the project name. This will be the project name that will appear in the SAP Web IDE workspace.
Click "Next".
Fill-in the Extension Name. This name will appear in SAP Lumira when selecting the visual extension.
Fill-in the Extension ID. When packing the extension from SAP Web IDE as well as deploying the extension to SAP Lumira, you'll use this ID.
Fill-in the version number.
You can leave the rest of the fields with their defaults.
Click "Next".
Since the Bullet chart is based on SVG, make sure that the "Using SVG" is marked.
Uncheck the "Legend".
Click "Next".
Click "Browse".
Select the "bullets.csv" that you used when developing the Bullet chart with SAP Lumira VizPacker Utility.
The "bullet.csv" sample data appears on the screen.
Click "Next".
Create the Dimensions/Measures. Following are a few important tips:
- Make sure that the order of them matches the order in the render.js in the Lumira VizPacker Utility. As you can see in the below image the first measure (measure (0)) is Actuals, etc.
- Use the pencil marker in order to edit the Dimension/Measure name.
- Click the "+" sign to add the relevant fields.
- Click the "Add Set" to add an additional Dimension/Measure.
Following is what you need to reach before clicking "Next".
Click "Finish".
The project is created in SAP Web IDE and the render.js file is opened in the editor pane.
Porting from Lumira VizPacker Utility to SAP Web IDE
Copy the Lumira VizPacker Utility render.js code from right under the "var render = ..." to "// END: sample render code".
Copy the segment that starts here:
... and ends here:
Paste the code segment to the render.js file in the SAP Web IDE where the "//TODO: Add your own visualization implementation code below ..." appears.
Use the SAP Web IDE Edit > Beautify" to make the code more readable.
As you can see from the "*" in the tab header the file is not saved and in the preview pane to the right, the chart is not updated.
Click the save to "Save" the render.js file and then the "refresh" to refresh teh preview pane.
What a surprise ... the chart is in the right direction, but something is wrong. All the bars are black.
The reason is that the CSS is not updated. We need to port is from the Lumira VizPacker Utility as well.
return to the Lumira VizPacker Utility and select the style.css tab.
Copy the content of the style.css tab.
In the SAP Web IDE workspace expand the "style" foldel and open the "default.css" file (double click it).
Paste the code you copied from "style.css" to this file. It should completely replace all the code that was there.
Nothing changed? Do not forget to "Save" the file and click the preview pane "Refresh" button.
To summarize what we've done so far - The visual extension was ported to SAP Web IDE and is ready to be deployed from SAP Web IDE to SAP Lumira.
Continue reading ... Migrate Bullet Chart from Lumira VizPacker Utility to SAP Web IDE VizPacker Plugin - Part 2
-- Raz