Hi Experts,
i'm actually struggling on the integration of an own ui5 component in a sdk wrapped-way to DS1.5.
I've developed an own charttype based on sapui5 an viz-charts.
Everything ist working as expected in ui5-applications.
Now i wanted to wrap this component into a DS custom component.
The problem doing this is, that not all sap.viz files/components/libraries are loaded properly and
i'm facing lots of dependency errors.
So first i tried to load them via jQuery.require (e.g.: jQuery.sap.require('sap.viz.libs.sap-viz-info');jQuery.sap.require('sap.viz.ui5.data.FlattenedDataset');).
After 20 jQuery statements and further dependency problems i have found the possibility to load the whole library
with requireJs. After some tries i can't get it to work.
Has someone a hint for me where to load the "sap.viz" library and maybe how to do it with requireJs to handle all dependencies in a correct way?
All other solutions to fix my problem are also welcome!
Thank you i advanced
Markus
| MyChart.js (ui5Comp) |
|---|
jQuery.sap.declare("myChart");
sap.ui.core.Control.extend("myChart", {
metadata : { properties: { ... }, dependencies : { libs : [ "sap.viz" ] } },
_myChart: null, _data: null,
renderer : function(rm, ctrl) { _Me = ctrl; ctrl._myChart = ctrl._generateMyChart(ctrl);
rm.write("<div"); . . . rm.write("</div>"); },
_generateMyChart: function () {
var initOptions = { ... };
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ ... }), feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ ... });
var oVizFrame = new sap.viz.ui5.controls.VizFrame(initOptions);
var oModel = this.createChartData(); var oDataset = this.createChartDataset();
oVizFrame.setDataset(oDataset); oVizFrame.setModel(oModel);
var that = this;
oVizFrame.setVizProperties({ ... });
oVizFrame.addFeed(feedValueAxis); oVizFrame.addFeed(feedCategoryAxis); oVizFrame.attachRenderComplete(this.complRender);
return oVizFrame; }
}); |
| DS-SDK component.js |
|---|
sap.designstudio.sdk.Component.subclass("myChart", function() {
this.init = function() {
var data = { ... };
var chart = new myChart({ width: "100%", height:"100%"}); chart.setData(data); chart.placeAt(this.$());
}; }); }); |