SAPUI5 Error: adding element with duplicate id

[Former Member]

Hello Experts,

I've got a problem and I'm scathing my head for a while. I have two views in an SAPUI5 simple template app I created. Simple with nothing but couple of buttons on them and I'm navigating from View1 to View2 just fine using routing and I'm testing in run as FLP Sandbox. While going back to View1 using routing navigation I get an error "Error: adding element with duplicate id" for some control "application-Test-url-component---List". Just to make it clear I do put in the destroy method in the component.js like it is mentioned here https://archive.sap.com/discussions/thread/3730983

and I do tried destroying view onExit.

Any help would be appreciated.

[maheshpalavalli]

Do you have any control with the ID "List" and where are you creating it?

Pasting the code will be helpful.

[Former Member]

I got a solution in case someone is still facing the issue:

Steps:

In the file 'manifest.json' replace the Auto generated rootview id : "FirstView" with some other value for instance id:"App", this will fix the issue:

Old value of the id:

New Value:

[alexandreajleite]

Thank you Jinat, your solution worked for me as well.

[ccalvom]

Thank you Jinat, your solution worked for me too 😉

[flotxi]

Can you check your rootView id in your manifest.json :

	"sap.ui5": {
		"rootView": {
			"viewName": "atsp.ProjPlannerPr.view.App",
			"type": "XML",
			"async": true,
			"id": "app"
		}

Make sure it has the same value as the id of you Main View:

<mvc:View controllerName="my.view.controller.Main" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" >
	<App id="app">
		<pages>

[haemma83]

Thanks man. You saved me know hours of my life!

[kkoopman]

To solve: Uncaught Error: Error: adding element with duplicate id 'application-Test-url-component---Main'

when navigating back you have to remove "id": "Main" at "sap.ui5" in manifest.json at "sap.ui5":

"sap.ui5": {

"flexEnabled": false,

"rootView":

{

"viewName": "nl.something.example.view.Main",

"type": "XML",

"async": true,

"id": "Main"

}

[Former Member]

I would appreciate if you can shed some light. It is getting a bit a frustrating 🙂

[former_member221786]

It seems like there are still some artefacts left from your old view when the Router tries to instantiate a new one.

Why do you want to destroy your view? Doesn't make any sense to me.

You should try to implement your requirements without destroying your view.

[former_member692558]

Hi

While executing the App, browser console displayed

At this point manifest.json had below values

Application started working when View ID field was cleared in manifest.json

[former_member803622]

Thank you sir.

existing solutions offer work well.

after trying some of the top solutions in this discussion, my work is still not working. but after trying your solution, my work went well. I think all solutions should be tried and combined for proper configuration. but be careful in trying.

Regards

[Former Member]

i have the same issue .. Go to custom app --> move to SAP FLP Home --> go to Custom app .

First navigation stops iteself.. Console shows Adding Element with duplicate ID error.

[Former Member]

Same problem here! any help or update please?

[Former Member]

Make the following changes to the code and it will work like a charm.

changes to View1 which is Home.controller.js in the following screen-shot

capture.jpg

Changes to View3 which is List.controller.js in following screen-shot

capture.jpg

[jriveror]

Try removing rootView attribute "id" from manifest.json

[former_member612786]

I am also facing same issue. Did anyone get solution?

[Former Member]

No Ankit, Noone is given an answer yet. But I've found how you can fix it. Actually, I compared this to other standard Fiori templates and seems like they use a dummy app view and this SAPUI5 template doesn't and that app view acts as a container.

[allan_christensen3]

HI - having the same issue. Gonna try and "down" the version to see if that helps!

Anyone found a solution?

/Allan

[allan_christensen3]

HI - having the same issue. Gonna try and "down" the version to see if that helps!

Anyone found a solution?

/Allan

[Former Member]

I'm seriously using nothing but template and two buttons to navigate. What could possibly go wrong?

[Former Member]

Guess what. I created a new app using SAPUI5 Template in WebIDE. Created a View a new View2 and did simple navigation from view1 to view2 works like a charm and soon as I did navigation back got the same error. Why? Anyone? Here is the error below..Is there a way I can kill/destroy view1?

Error: adding element with duplicate id 'application-Test-url-component---View1'

[Former Member]

I debugged and found on routing to "List" (view1) system is trying to create the view again in the code below. Any idea how can i prevent that or what I'm doing wrong?

var sViewClass = getViewClassName(oView);
		view = createView(sViewClass, oView); // this is where the error occurs as view exists already 
		return view;

[andrzej_koeller]

export your project to git and provide the link.

there is not enough information on why this is happening. Standard template have never gave me any issues.

[Former Member]

Just to emphasize I'm using SAPUI5 template for my template so unless I made a mistake somewhere in the few things I have added I think structure should be be fine for the app. thoughts?

[Former Member]

carlos.venturo3 here is my neu.app.json file below.

{
  "welcomeFile": "/webapp/index.html",
  "routes": [
    {
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources"
      },
      "description": "SAPUI5 Test Resources"
    }
  ],
  "sendWelcomeFileRedirect": true
}

[Former Member]

and I'm basically navigating forward. like you do for any other view.Below is my method that is calling routing.

onNavigate: function (oEvent) {
				//This code was generated by the layout editor.
				var oRouter = this.getOwnerComponent().getRouter();
				oRouter.navTo("List", {
					objectId: "test",
					abc: "123"
				});
			}

[Former Member]

This happens in Component.js file. Below is the code from that file for init and destroy.

	init: function () {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);


			// enable routing
			this.getRouter().initialize();


			// set the device model
			this.setModel(models.createDeviceModel(), "device");
		},
			destroy : function () {
				this._oErrorHandler.destroy();
				if (this.oRouteHandler) {


   this.oRouteHandler.destroy();


  }
				// call the base component's destroy function
				sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);
			},

[Former Member]

@Sebastian Kielhorn - I agree I do not want to and if you see I have it commented it out. It is there just beacuse I tried it and it is still not working. Desperation makes you do crazy things :). Any suggestions?

[former_member221786]

Ok sounds good so far 🙂

How do you go back to your original view?
Do you do something like window.history.go(-1); or do you navigate forward?

Also where does the following code happen in your application?

this.getRouter().initialize();

[carlos_venturo]

can you share your neo app file?

[Former Member]

Also this is my Simple XML View.

<mvc:View xmlns:mvc="sap.ui.core.mvc" 
xmlns:core="sap.ui.core" 
xmlns:layout="sap.ui.layout" 
xmlns="sap.m" xmlns:f="sap.f" 
xmlns:fb="sap.ui.comp.filterbar"
xmlns:vm="sap.ui.comp.variants"
controllerName="olin.shipment.OLIN_SHIPMENT_OUTPUT.controller.List" height="100%">


		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					
					<content>
					
				<OverflowToolbar>
					<ToolbarSpacer/>
					<Button type="Accept" text="Accept" press="onNavigate"/>
					<Button type="Reject" text="Reject"/>
				</OverflowToolbar>
			
	
					</content>
				</Page>
			</pages>
		</App>


</mvc:View>

[Former Member]

Thanks for the reply Mahesh, My View Name is List and I'm thinking it is just trying to instantiate it again. Below is my List.controller.js

 sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
	"use strict";
	return Controller.extend("olin.shipment.OLIN_SHIPMENT_OUTPUT.controller.List", {
		onInit: function () {},
				onExit: function() {
				var oView	= this.getView();
			//this.getView().destroy();
				},
		/**
		 *@memberOf olin.shipment.OLIN_SHIPMENT_OUTPUT.controller.List
		 */
		onNavigate: function (oEvent) {
			//This code was generated by the layout editor.
			var oRouter = this.getOwnerComponent().getRouter();
			oRouter.navTo("Output", {
				objectId: "test"
			});
			//	this.getView().destroy();
		}
	});
});