sapui5 3D viewer customization
Hi All,
In this post i will try to explain how to customize 3D viewer, i had got into such situation where i have to do it and while google it i couldn’t find any blog on this, well i had got a requirement to insert a column into tree table loading into 3D viewer and perform some action on it.
here the challenge is not inserting a column to tree table as we do not have context of this table until viewer loads file in it, so what we have to do here is get the context of tree table once viewer loads it, and add the column dynamically.
sapui5 provides sap.ui.vk library in order to load 3D files such as .VDS file so below are the steps we gonna follow.
- Implement viewer and load 3D file.
- Get the instance of loaded tree table.
- Add additional custom column into tree table.
- Implement the event triggered on row selection and get the value of item selected.
- Attach and fire event for control you addd in additional column (i will explain for combo box).
- Implement viewer and load 3D file.
this is very simple, you get is just by implementing vk viewer tag in your xml view.
<mvc:View controllerName="com.sap.visdemo.controller.Detail" xmlns:vk="sap.ui.vk" >
<vk:Viewer id="viewer" toolbarTitle="{i18n>viewerToolbarTitle}" width="100%" height="85%"></vk:Viewer>
js controller code for loading 3D files.
var sourceData = {
localFile: undefined,
remoteUrl: "<your_service_url_which_returns_3d_file>"
};
var model = new JSONModel();
model.setData(sourceData);
this.getView().byId("idformviewer").setModel(model, "source");
model.refresh();
var view = this.getView().byId("idformviewer");
sourceData = view.getModel("source").oData;
var viewer = this.getView().byId("viewer");
if (sourceData.remoteUrl) {
this.loadModelIntoViewer(viewer, sourceData.remoteUrl, "vds", sourceData.localFile);
}
},
loadModelIntoViewer: function(viewer, remoteUrl, sourceType, localFile) {
if (viewer.getScene() === null) {
var source = remoteUrl || localFile;
if (source) {
//content of viewer is replaced with new data
var contentResource = new ContentResource({
source: source,
sourceType: sourceType,
sourceId: "abc"
});
//content: chosen path. content added to the view
viewer.addContentResource(contentResource);
}
}
},
2. Get the instance of loaded tree table.
in order to get the id instance created dynamically on load of viewer for tree table, you need to inspect the browser where the 3D file loaded, as shown in below screen you need to drill down to the tree <div> element and find it.
3. Add additional custom column into tree table.
now we see that we have tree table id on successfully load of 3D file, using this id we now have to add column in tree table dynamically in order to do that we have to implement an event of Viewer control called sceneLoadingSucceeded as follows.
update your view as below.
<vk:Viewer id="viewer" sceneLoadingSucceeded="sceneLoadingSucceeded" toolbarTitle="{i18n>viewerToolbarTitle}" width="100%" height="85%"></vk:Viewer>
code for controller.
sceneLoadingSucceeded: function() {
var otable = sap.ui.getCore().byId('__table0');
if (otable.getColumns().length === 2) {
otable.addColumn(
new sap.ui.table.Column({
label: "Go Fiori",
template: new sap.m.ComboBox("idcb",{
items: [new sap.ui.core.ListItem({
text: ""
}),new sap.ui.core.ListItem({
text: "Tile-1"
}), new sap.ui.core.ListItem({
text: "Tile-2"
}), new sap.ui.core.ListItem({
text: "Tile-3"
})]
})
}));
}
}
4. Implement the event triggered on row selection and get the value of item selected.
5. Attach and fire event for control you added in additional column (i will explain for combo box).
you must see column getting added to Viewer tree table, now to get the row item selection event and context of your control added in column we have to implement selectionChanged event of viewer and attach and file event for control added in column.
update view as below.
<vk:Viewer id="viewer" selectionChanged="selectionChanged" sceneLoadingSucceeded="sceneLoadingSucceeded" toolbarTitle="{i18n>viewerToolbarTitle}" width="100%" height="85%"></vk:Viewer>
update controller as below.
selectionChanged: function(oEvent) {
if (oEvent.getParameter("selected").length > 0) {
var otable = sap.ui.getCore().byId('__table0');
var oIndex = otable.getSelectedIndex();
//var t = otable.getRows()[oIndex];
var oCB = otable.getRows()[oIndex].getCells()[2];
oCB.attachSelectionChange(function(oEvent1) {
var selectedId = otable.getRows()[oIndex].getCells()[0].getProperty("text");
var selectedItem = oEvent1.getSource().getProperty("value");
});
oCB.fireSelectionChange(function(oEvent2) {
});
} else if (oEvent.getParameter("unselected").length > 0) {
return;
}
}
selectionchnaged event will file on tree table item selection and attachSelectionChange & fireSelectionChange will help you to attach and fire event on control (combo box in this case) we added into viewer tree table.
Thanks, Prem
Hi Prem,
I'm trying the SAPUI5 3D Viewer control from the SAPUI5 Explored, but the provided sample file fails to load (https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.vk.tutorial.VIT.01/preview).
It gives an invalid format error message.
Any ideeas?
Thanks in advance.
@bdel
Hi Abdel,
can you share your contentresource object, normally type gives problem.
thanks, Prem
Hi,
I'm using the SAPUI5 sample from:
https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.vk.tutorial.VIT.01/preview
And the content/resources can be downloaded in sap.ui.vk.tutorial.VIT.01.zip\src\models if you download the code of the sample.
Thanks
@bdel
Hi,
yes the file given along with sample is has issue in loading, you can give try to other vds file or check with the one i shared with you over email.
Thanks, Prem
Thank you.
I will check with the UI5 team if they can review the sample and fix the file.
Thanks
@bdel
Hi,
Thanks for the tutorial.
I'm having the same problem as Abdel, can you provide me with a working .vds file as well?
Thanks!
Hi Tim, please share you id.
Thanks
Hi, my ID is S0016968483
I am working on the Developer Guide tutorial for "3D Viewer". I have downloaded the boxTestModel.vds to my desktop. I am trying to upload boxTestModel.vds 3D file but I get the error listed below. Can you email me a vds file to use. My email is srassum@gmail.com.
App opens fine and I see the "Downloading ..." message but then I get the following error
Failed to build a scene from loaded content resources.
Message: Invalid typed array length – VIT14 sap.ui.vk.Viewer
Could not create a scene from the file
sorry couldn't reply on time i somehow missed it, let me know if need any help in this regard.
Hi,
I am trying to load my .vds file into view but it is throwing an error saying "Failed to build a scene from the loaded content resources. code: -6, message: Incorrect format". Please give the solution to my email id raheenafshan1@gmail.com.
shared, please check you email
I have 3D file & I'm loading 3D file in onInit() but I'm getting error as, Incorrect format - {"errorCode":-6} sap.ve.dvl & Failed to build a scene from the loaded content resources.
code: -6, message: Incorrect format - VIT14 sap.ui.vk.Viewer
Hi Premnarayan,
Nice Blog,
I have one small question, I am trying to load my .vds file into view in onInit() function but it is throwing an error saying “Failed to build a scene from the loaded content resources. code: -6, message: Incorrect format”. But instead of calling in onInit() function, if I use file uploader method same vds file is working fine.
Regards,
Raghavendra
Hello Premnarayan,
Excellent blog. Like others, even I am facing the issue while loading the .vds file provided in Samples. Could you please share the .vds file that you used @ akshay.tamhane146@gmail.com , if possible ?
Thanks in advance.
Regards,
Akshay Tamhane
You can save VDS file format in SAP 3D Visual Enterprise Viewer SDK. Then you can try it with that vds file format.
Hi Avinash,
great Blog. I too have a requirement of loading the same car image mentioned in this comment. It would be really helpful if you could mail me this at venkatesh.hulekal07@gmail.com or tell me the source to get these files.( I do have sap 3D visual Enterprise Viewer installed. I'm not sure what kind of file to input to get a vds file as shown above)
Thanks In Advance.
Thanks for the Blogpost. Even I am facing the issue while loading the .vds file provided in Samples. Could you please share the .vds file that you used to shruthipinnamwar@gmail.com
Hi,
I am trying to run the solution but getting below error.
Some content resources could not be loaded. - 6580184 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch. sap.ui.vk.Viewer
Thanks.
Shakti
Hi Shakti,
Is issue resolved.? If so can you please help me with the steps.
Thanks in Advance,
Surya