How to overwrite or change OpenUI5 Panel section id? - sapui5

Question

I am doing adding/delete of the panel section container in openui5. While deleting the selected panel container I can able to do it. But after the deletion of container and again adding the new container I am getting the error of "adding element with duplicate id txn_1". How to fix this issue?
I am using the below code:
var Iconadd = new sap.ui.commons.Button({ //add container code
text : "ADD",
width:"65px",
icon : "sap-icon://add",
press : function() {
var len=$('#panelcontainer .sapUiPanel').length;
//alert("len"+len);
Createnewtransaction(len+1);
//alert(""+len);
//var content=$("#panelcontainer").html();
//$("#panelcontainer").append(content);
//var length=$('#panelcontainer').length;
// alert(""+length);
}
});
Createnewtransaction(1);//onload defaultly one conatiner should show
function Createnewtransaction(len){ //panel code and delete container code
//alert("in"+len);
var oPanel3 = new sap.ui.commons.Panel("txn_"+len,{width: "100%", showCollapseIcon: false});
oPanel3.setAreaDesign(sap.ui.commons.enums.AreaDesign.Fill);
oPanel3.setBorderDesign(sap.ui.commons.enums.BorderDesign.None);
oPanel3.setTitle(new sap.ui.core.Title({text:"Transaction Details"}));
//oPanel3.setTitle(new sap.ui.core.Title({text:"Transaction Details"}));
var oMatrix3 = new sap.ui.commons.layout.MatrixLayout({ width: '600px', columns: 8,width:"auto"});
//oMatrix3.setWidths('150px', '200px','200px','170px','200px');
oMatrix3.setWidths('150px','200px','200px','170px','200px','210px');
oMatrix3.setLayoutFixed(true);
var oLabelmaterial = new sap.ui.commons.Label({text: 'Material:*'});
var oCustomserachmaterial = new sap.ui.commons.TextField({value: '', width: '88%'},{
enabled:true,
change:function(){
}
});
oLabelmaterial.setLabelFor(oCustomserachmaterial);
var oLabelinvoice = new sap.ui.commons.Label({text: 'Invoice Number:'});
var oLabelText = new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelinvoice.setLabelFor(oLabelText);
var oLabelInvoicedate = new sap.ui.commons.Label({text: 'Invoice Date:*'});
// create a simple DatePicker
var oDatePicker1 = new sap.ui.commons.DatePicker('');
oDatePicker1.setWidth("170px");
// oDatePicker1.setYyyymmdd("20100101");
oDatePicker1.setLocale("en-US"); // Try with "de" or "fr" instead!
oDatePicker1.attachChange(
function(oEvent){
if(oEvent.getParameter("invalidValue")){
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
}
);
// attach it to some element in the page
//oDatePicker1.placeAt("sample1");
//oMatrix3.createRow(oLabelmaterial,oCustomserachmaterial,oLabelinvoice,oLabelText,oLabelInvoicedate,oDatePicker1,oLabelcurrency,oCustomserachcurrency,oLabelinvoiceline,oLabelInvoicelinetext,oLabelShipmentdate,oDatePicker2,oLabelunits,oCustomserachunits,oLabelAgreement,oCustomserachagreementnumber);
oMatrix3.createRow(oLabelmaterial,oCustomserachmaterial,oLabelinvoice,oLabelText,oLabelInvoicedate,oDatePicker1);
var oLabelcurrency = new sap.ui.commons.Label({text: 'Currency:*'});
var oCustomserachcurrency = new sap.ui.commons.TextField({value: '', width: '88%'});
oLabelcurrency.setLabelFor(oCustomserachcurrency);
var oLabelinvoiceline = new sap.ui.commons.Label({text: 'Invoice Line Number:'});
var oLabelInvoicelinetext= new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelinvoiceline.setLabelFor(oLabelInvoicelinetext);
var oLabelShipmentdate = new sap.ui.commons.Label({text: 'Shipment Date:'});
// create a simple DatePicker
var oDatePicker2 = new sap.ui.commons.DatePicker('');
oDatePicker2.setWidth("170px");
// oDatePicker1.setYyyymmdd("20100101");
oDatePicker2.setLocale("en-US"); // Try with "de" or "fr" instead!
oDatePicker2.attachChange(
function(oEvent){
if(oEvent.getParameter("invalidValue")){
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
}
);
oMatrix3.createRow(oLabelcurrency,oCustomserachcurrency,oLabelinvoiceline,oLabelInvoicelinetext,oLabelShipmentdate,oDatePicker2);
var oImage = new sap.ui.commons.Image();
oImage.setSrc("icon:image/required_field_icon.png");
oImage.setAlt("alternative image text for image");
var oLabelunits = new sap.ui.commons.Label({text: 'Units:*'});
var oCustomserachunits= new sap.ui.commons.TextField({value: '', width: '88%'});
oLabelunits.setLabelFor(oCustomserachunits);
var oLabelAgreement = new sap.ui.commons.Label({text: 'Agreement Number:'});
var oLabelagreement = new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelAgreement.setLabelFor(oLabelagreement);
//Create Search Field for Custom column search
/* var oCustomserachagreementnumber = new sap.ui.commons.SearchField("s9",{
enableListSuggest:false,
placeholder:"Search",
width:"170px",
serach:function(oEvent){
}
});*/
var oLabelnone = new sap.ui.commons.Label({text: ''});
var oLabelnone1 = new sap.ui.commons.Label({text: ''});
var deletebton=new sap.ui.commons.Button({
text:"Delete",
width:"70px",
icon:"sap-icon://delete",
//lite:true,
press:function(oEvent){
if(!oPanel3.getCollapsed()){
oPanel3.setCollapsed(false);
}else{
oPanel3.setCollapsed(false);
}
var len=$('#panelcontainer .sapUiPanel').length;
// var headlen=$('#panelcontainer .sapUiPanel .sapUiPanelHdr').length;
// alert(len);
var selected=oPanel3.getId();
// $('#panelcontainer .sapUiPanel').not( "#txn_1" ).remove();
if(len==1){
$("#"+selected).not("#txn_1").remove();
}else{
$("#"+selected).remove();
}
var splitdata=selected.split('_');
var delposition=parseInt(splitdata[1]);
// alert(delposition);
$('#panelcontainer .sapUiPanel').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id", newid);
$(this).attr("data-sap-ui", newid);
$(this).attr("aria-labelledby",newid+"-title");
$(this).attr("aria-describedby",newid+"-acc");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-hdr");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr .sapUiPanelTitle').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-title");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr .sapUiPanelTb ').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-tb");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelCont').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-cont");
}
});
/*for(i;i<len;i++){
var newid=splitdata[0]+"_"+i;
var j = i+1;
var oldID = splitdata[0]+"_"+j;
$("#"+oldID).css({"border-color":"red","border-width":"1px","border-style":"solid"});
$("#"+selected).attr("id",newid);
}*/
//$(this).parent().remove();
// dispAlert() ;
}
}).addStyleClass("datacheck");
//deletebton.addStyleClass("deletedata");
//oPanel3.addButton(deletebton);
oPanel3.onAfterRendering = function() {
if (sap.ui.commons.Panel.prototype.onAfterRendering) {
sap.ui.commons.Panel.prototype.onAfterRendering.apply(this, arguments);
}
var $this = this.$();
var span = $this.find('.sapUiPanelIco');
span.detach();
$this.find('.sapUiPanelHdr').append(span);
};
oMatrix3.createRow(oLabelunits,oCustomserachunits,oLabelAgreement,oLabelagreement,oLabelnone,deletebton);
oPanel3.addContent(oMatrix3);
oPanel3.placeAt("panelcontainer");
}

Answer 1

It's quite clear that you get errors. SAPUI5 offers controls with a powerful API on top of jQuery, including DOM manipulation. If I understand your source code correctly your are manipulationg the DOM by yourself, but you should do this via the API. Please check the documentation for the Panel, there is a method to safely remove content. And please provide well formatted coding examples in future, this is just a mess and only are few people will be helping you through this mess.