Skip to Content
Author's profile photo Premnarayan Patidar

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.

  1. Implement viewer and load 3D file.
  2. Get the instance of loaded tree table.
  3. Add additional custom column into tree table.
  4. Implement the event triggered on row selection and get the value of item selected.
  5. Attach and fire event for control you addd in additional column (i will explain for combo box).
  1. 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

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abdel DADOUCHE (SAP)
      Abdel DADOUCHE (SAP)

      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

      Author's profile photo Premnarayan Patidar
      Premnarayan Patidar
      Blog Post Author

      Hi Abdel,

      can you share your contentresource object, normally type gives problem.

      thanks, Prem

      Author's profile photo Abdel DADOUCHE (SAP)
      Abdel DADOUCHE (SAP)

      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

      Author's profile photo Premnarayan Patidar
      Premnarayan Patidar
      Blog Post Author

      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

      Author's profile photo Abdel DADOUCHE (SAP)
      Abdel DADOUCHE (SAP)

      Thank you.

      I will check with the UI5 team if they can review the sample and fix the file.

      Thanks

      @bdel

      Author's profile photo Tim Ewalts
      Tim Ewalts

      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!

      Author's profile photo Premnarayan Patidar
      Premnarayan Patidar
      Blog Post Author

      Hi Tim, please share you id.
      Thanks

      Author's profile photo Tim Ewalts
      Tim Ewalts

      Hi, my ID is S0016968483

      Author's profile photo Sandy Badgley
      Sandy Badgley

      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

      Author's profile photo Premnarayan Patidar
      Premnarayan Patidar
      Blog Post Author

      sorry couldn't reply on time i somehow missed it, let me know if need any help in this regard.

      Author's profile photo RAHEEN AFSHAN
      RAHEEN AFSHAN

      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.

       

      Author's profile photo Premnarayan Patidar
      Premnarayan Patidar
      Blog Post Author

      shared, please check you email

      Author's profile photo RAHEEN AFSHAN
      RAHEEN AFSHAN

      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

      Author's profile photo Raghavendra H K
      Raghavendra H K

      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

      Author's profile photo Akshay Tamhane
      Akshay Tamhane

      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

      Author's profile photo Avinash Avinash
      Avinash Avinash

      You can save VDS file format in SAP 3D Visual Enterprise Viewer SDK. Then you can try it with that vds file format.

      Author's profile photo Venkatesh Hulekal
      Venkatesh Hulekal

      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.

      Author's profile photo Shruthi Pinnamwar
      Shruthi Pinnamwar

      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

      Author's profile photo Shakti Pandey
      Shakti Pandey

      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

      Author's profile photo Surya Teja Lingam
      Surya Teja Lingam

      Hi Shakti,

      Is issue resolved.? If so can you please help me with the steps.

      Thanks in Advance,

      Surya