I read dong.pan 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
This blog expands a bit more than just the porting process. I'll present the following:
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:
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
38 | |
19 | |
13 | |
13 | |
11 | |
10 | |
10 | |
10 | |
8 | |
8 |