Skip to Content

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="" 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();
			this.getView().byId("idformviewer").setModel(model, "source");

			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


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) {

					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) {


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

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

        1. Premnarayan Patidar Post author


          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

  1. Sandy Assum

    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

    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


Leave a Reply