Skip to Content

UI5 CRUD example using XLM as View

First question. Is there a good example of CRUD functionality using XML views. Everything I seem to look at is as a JavaScript view, and yes, I should be able to convert that, but, there are subtle differences, and it's these that take up all your time in debugging and finding out why a certain function is not working.

Secondly, All the examples of CRUD functionality that I have both seen and read in books are an example of a single table within a view, and I wondered if anyone had implemented CRUD functionality for multiple tables/bindings in ONE view (XML). That's my task, and I would like to if I'm likely to encounter technical issues. Best forewarned I guess.

Third question, and probably easiest to answer. I have a bound table (Grid) permanently in edit mode. However, the TAB key does not navigate from the first field to the next field across the row. Does anyone know what this could be as I have not encountered this before. I have to click with the mouse to the next field.

Add comment
10|10000 characters needed characters exceeded

3 Answers

  • Posted on Mar 02, 2017 at 02:08 PM

    Okay, I have read a tonne of articles on CRUD functionality, some leave all cells in edit mode and only implement Delete and Insert functionality, which is not really CRUD in my view. Some actually popup dialogs to create/update data, which is CRUD, but should not, in my view, be used unless there are more fields that can be displayed/edited on the screen. But of course, if you're using a phone that might always be the case. ;)

    So, what I'm after is example code for three functions to be used in my view controller, bearing in mind that I'm using XML for my Views. So ideally functions for Delete, Edit and Insert against rows of a table. I'm binding the data/JSON Object (two way) to the table in the controller.

    Add comment
    10|10000 characters needed characters exceeded

  • Posted on Mar 02, 2017 at 05:05 PM

    1. view won't make difference in terms of crud

    2. if you want to add row directly in table, you can only do it with jsonmodel

    3. I reported this issue to sap, they said they fixed in version 1.40, i haven't checked.

    Add comment
    10|10000 characters needed characters exceeded

  • Posted on Mar 03, 2017 at 12:38 PM

    1. Hmmm. My personal view is that XML views take longer to set up and use, as the syntax and use seems to take longer than if I were doing this in js. But, the client wants MVC to be used and using js to perform the VC part does not agree with the client, or SAP, from what I have read.

    2. What is the issue with adding a row to an XML table via binding?. The binding is taking place via a JSON object. I have been able to insert records that way, by calling a controller function from the Insert button in the XML View code. Yes, It's not using the Binding yet, but I should be able to. And, I need to replace the Delete functionality as it currently sets up a delete button on the generate table row. This is TEST code though, see below.

    Using the code shown below I thought I would be able to just add a new row to the JSON structure having been bound to the table, and everything would fall into place, with the new row showing on the View table. Is that no so?.

    3. In regards to new version 1.40 to correct the issue, do you know of an SAP note that identifies the issue and correction?.

    Apologies for the format of the code though...

    onAddHousehold: function(oEvent) {//Remove hard coding and point to JSON data
    var template = new sap.m.ColumnListItem({
    					cells: [
    new sap.m.ComboBox({placeholder:"Type",items:[
    new sap.ui.core.Item({key:"Item1",text:"Mr"}),
    new sap.ui.core.Item({key:"Item2",text:"Mrs"}),
    new sap.ui.core.Item({key:"Item3",text:"Other"})
    new sap.m.Input({ placeholder:"First Name"}),
    new sap.m.Input({ placeholder:"Middle Name"}),
    new sap.m.Input({ placeholder:"Last Name"}),
    new sap.m.Input({ placeholder:"Income", description:"GBP"}),
    new sap.ui.commons.CheckBox({ }),
    new sap.m.Input({ placeholder:"%", description:"%"}),		
    new sap.m.Button({icon: "sap-icon://delete",
    					press: function(oEvent) {oEvent.getSource().getParent().destroyCells();
    Add comment
    10|10000 characters needed characters exceeded