Skip to Content
1

SAPUI5 - Put table-like content in a Dialog element.

Jan 20, 2017 at 06:12 PM

367

avatar image
Former Member

Hello,

I'm looking for some help as this is my first time working with SAPUI5 and I find myself with a bit of an issue.

What I'm trying to do is to have table-like content inside a Dialog element as a sort of pop-up window to visualize a list of 'documents', like in this image:

And right now it looks like that while using a table in a view, and usind said view in the controller to add it to the Dialog with this code:

1.- Code for dialog.view:

sap.ui.jsview("dialog.view", {


	getControllerName : function() {
		...
	},
	createContent : function(oController) {
		var oTableDoc = new sap.m.Table("Documents",{  
		    mode: sap.m.ListMode.Single,
		    inset: false,
		    showOverlay:false,
		    headerDesign: sap.m.ListHeaderDesign.Standard,
			columns: [  
					new sap.m.Column(...), //headers
					new sap.m.Column(...), 
					new sap.m.Column(...)
			]		      
		});
		sap.ui.getCore().byId('Documents').bindItems("/results",
			new sap.m.ColumnListItem({ 
			vAlign: sap.ui.core.VerticalAlign.Middle,
			cells : [
			         new sap.m.CheckBox(...),   //content
			         new sap.m.Text(...),
				 new sap.m.Text(...),
			]
		}));
	
		return oTableDoc;
	}
});

2.- Code for the controller function where I use this view:

//Function used to show avaliable documents for printing
visualizaDocs : function(){
		if(selectPre){
	
			//This is where I take the content of dialog.view
			var oView = sap.ui.view({
				type: sap.ui.core.mvc.ViewType.JS,
				viewName: "dialog.view"
			});
			
			//Dialog Creation
			var oDialog = new sap.m.Dialog({
				title: "Visualización de Documentos", //Available Documents
                                closed: function(oEvent) {
                                     oEvent.getSource().destroy();
                                }
			});
			
			oDialog.addContent(oView);
			oDialog.addButton(new sap.m.Button({text: "Imprimir", press:function(){}}));				//Button for printing
			oDialog.addButton(new sap.m.Button({text: "Cerrar", press:function(){oDialog.close();}}));	//Button for closing Dialog
			oDialog.open();
			
		}else{
			//Warning in case no document has been selected
			sap.ui.commons.MessageBox.alert('¡No hay Presolicitud seleccionada!',function(){},"AVISO");
		}
	},

As I said, it works and shows what you see on the above Image, however the problem is that I need to click the button that makes the Dialog appear twice for it to appear once, and then it takes way to many presses of the same button for it to appear again, and apparently the problem lies with the Table content, as a simple sap.m.Text used as test works fine everytime I press the button.

I've been trying to find another 'content' that could be used instead of the Table, like a 'MatrixLayout', 'GridLayout' and 'ResponsiveGridLayout' but they don't seem to work, either because they don't work well with the Dialog or because I'm doing something wrong.

I hope someone can help me with this or at least point me in the right direction to solve this problem.

Thanks in advance, and have a good day!

Diego L.

window.png (30.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Jun Wu Jan 20, 2017 at 06:44 PM
-1

just check the example from sap regarding fragment.

your current solution is pretty bad.....

Share
10 |10000 characters needed characters left characters exceeded
VIPLOVE KHUSHALANI Jan 23, 2017 at 10:06 AM
-1

Hi Diego Lopez,

I think its due to duplicate id creation .. can you check F12 developer options of the chrome , any duplicate error its showing in the console.?

And also Jun Wu is correct why are you using views , check out fragments for dialog

thanks

Viplove

Share
10 |10000 characters needed characters left characters exceeded