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