Skip to Content
0

After the Model Update my Panel is getting blanked out.

Apr 01 at 01:13 AM

29

avatar image

Hey Everyone,

I've been spinning (again) on a problem with ui5. I am creating a new note and the list that has my notes in it is getting blanked out. I've tried refreshing the binding, re-calling the oData and even re-routing back to the view (kind of brute force) but nothing seems to work. Here are the details.

My detail.view.xml looks like this: (just the panel that is getting blanked)

<Panel id="__panel1" expandable="true" expanded="false">
<headerToolbar>
<Toolbar height="3rem">
	<Text text="Notes"/>
</Toolbar>
</headerToolbar>
<content>
<FeedInput
	showIcon="false"
	post="onPost"
	class="sapUiSmallMarginTopBottom" />
<List
        id="complexNotesList"
	items="{path: 'ComplexNotes', sorter: {path: 'CreatedAt', descending: true}}"
	growing="true"
	growingThreshold="4"
	growingScrollToLoad="false">			
	<FeedListItem 
		id="feedList"
		showIcon="false"
		sender="{Creator}"
		timestamp="{path: 'CreatedAt', type: 'sap.ui.model.type.DateTime', formatOptions: { style: 'medium'}}"
		text="{Content}"
		convertLinksToAnchorTags="All">
		<FeedListItemAction text="Edit" icon="sap-icon://edit" key="{content}" press="onNoteEdit" />
	</FeedListItem>
</List>
</content>
</Panel>

Looks like this:

Perhaps a detail that is important is that the 'ComplexNotes' above is part of an $expand. In the Init of the detail.controller.js I do this.

_onRouteFound: function(oEvent) {
	var oArg = oEvent.getParameter("arguments");
	var oView = this.getView();
	oView.bindElement({
		path: "/Opportunities(guid'" + oArg.Guid + "')",
		parameters: {
			"expand": "ComplexNotes,SalesTeam,MainContact"
		}
	});
}

So far so good. Now when I create a new note I'd like to see that note in the feed list as soon as it is successful. However, not only does it not show, it doesn't show any notes.

Here is the step to create a new note. This works just fine...meaning the note gets created successfully. However, about a second after the 'success', the list gets blanked out. I'm putting a little '-->' by the lines of code that do not behave as they should (or as I think they should).

onPost: function(oEvent) {
	var oModel = this.getView().getModel();
	var Guid = oModel.getProperty(this.getView().getBindingContext().getPath() + "/Guid");
	var Note = oEvent.getParameter("value");
	var newNote = {
		"HeaderGuid": Guid,
		"TextObjectID": "A002",
		"TextLanguageID": 'EN',
		"Content": Note
	};
	var that = this; 
	oModel.create("/OpportunityComplexNotesSet", newNote, {
		success: function(oData) {
			MessageToast.show("Success..." + oData.Content);
-->			var oList = that.byId("complexNotesList");
-->			oList.getBinding("items").refresh(true);
		},
		error: function(oError) {
			MessageToast.show("Awww Snap!" + oError);
		}
	});
}

After posting... : (

Another detail...when I put in a debugger and look at the model. The notes are there. It is like the detail.view.xml doesn't see it anymore. The other panels on the view are fine. Bewildered. If I do a 'this.getView().getModel()' in the debugger and look...here is the model.

I think it could have something to do with this being an $expand, but don't know. Thanks again folks. I appreciate any help.

capture.png (81.0 kB)
capture1.png (18.9 kB)
capture3.png (5.0 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Greg Foss Apr 02 at 12:56 AM
0

Hello All,

I was not able to get this to work so I tried another slant. I thought that perhaps my problem was that the data was part of an $expand so I decided to use a named model for my notes. The following is what I did, and it works.

In the component.js I declared a named json model in the init.

this.setModel(new sap.ui.model.json.JSONModel(), "myNotesModel");

Then I populated said model in my detailer.controller.js.

oModel.read("/Opportunities(guid'" + oArg.Guid + "')?$expand=ComplexNotes", {
	success: function(oData) {
		var myNotesModel = that.getOwnerComponent().getModel("myNotesModel");
		myNotesModel.setData(oData.ComplexNotes.results);
	},
	error: function(error) {
		console.log("Awww Snap!");
	}
});

I also commented out the $expand out of the detail.controller.js.

_onRouteFound: function(oEvent) {
	var oArg = oEvent.getParameter("arguments");
	var oView = this.getView();
	oView.bindElement({
		path: "/Opportunities(guid'" + oArg.Guid + "')",
		parameters: {
			// "expand": "SalesTeam"
		}
	});
}

The view remained the same except for referencing said named model.

<List
    id="complexNotesList"
    items="{path: 'myNotesModel>/', sorter: {path: 'CreatedAt', descending: true}}"
    growing="true"
    growingThreshold="4"
    growingScrollToLoad="false">

Then the small change to the detail.component.js when the user posts a note.

oModel.create("/OpportunityComplexNotesSet", newNote, {
	success: function(oData) {
		var oNotesData = that.getOwnerComponent().getModel("myNotesModel").oData;
		oNotesData.unshift(oData);
		var oList = that.byId("complexNotesList");
		oList.getBinding("items").refresh(true);
	},
	error: function(oError) {
		MessageToast.show("Awww Snap!" + oError);
	}
});

This worked for me so if it helps someone else. Or, of course, if you have a better way let me know.

Greg

Share
10 |10000 characters needed characters left characters exceeded