Question Re: JSON Table with editable field using suggestions... in Technology Q&A

JSON Table with editable field using suggestions...

PatrickDean — Wed, 24 Aug 2016 14:42:32 GMT

Hi guys,

Here's a pic of my app :

In the "Type" Column, I want to be able to give suggestions, based on the user entry... e.g.

Now, I understand that in order to store my Services Table on the Frontend, I need it to have a JSON Model behind it... To add a new line, I do this:

var oEntry = {};

oEntry.Type = "";

oEntry.Description = "";

oEntry.Qty = "";

var moSTModel = new sap.ui.model.json.JSONModel();

moSTModel = this.getView().byId("idServiceTable").getModel();

//Get Data from the Model, add the entry we've just created to the Data, pass the Data back to the Model...

lmData = moSTModel.getData();

lmData.rows.push(oEntry);

moSTModel.setData(lmData);

this.getView().byId("idServiceTable").setModel(moSTModel);

But for the auto-complete, I need oData; [Using XML view]

<core:ListItem text="{Description}" additionalText="{Key}" />

</suggestionItems>

I just can't figure out how to combine the two? I guess I need to put the ServiceTypes into a new JSON too, and then refer to this in XML view somehow?

Or do I need to add the list of ServiceTypes into each JSON table row, so that it's available to each line?

Currently:

Using JSON, I can satisfy the "Want to add lines to the model until such a time as the user hits save, then send them to the backend".

Using oData, I can satisfy the "Want to have a list of suggestion items that get auto-completed".

I just don't know how to do the both at the same time!? Any help gratefully appreciated! Thanks guys!

This app was built using the sap.m library, with xml views, some JS occurring in the controllers...

Re: JSON Table with editable field using suggestions...

JMMartinez — Wed, 24 Aug 2016 15:06:05 GMT

Hi Patrick,

You can try setting a name for one of the models. For example:


<Table items="{/Data}">
  <columns>
  <Column>
  <header>
  <Text text="First column"/>
  </header>
  </Column>
  <Column>
  <header>
  <Text text="Seconf column"/>
  </header>
  <items>
  <ColumnListItem>
  <cells>
  <Input value="{type}" showSuggestion="true"
  suggestionItems="{SuggestionModel>/ServicesTypesSet}">
  <suggestionItems>
  <core:ListItem text="{SuggestionModel>description}"/>
  </suggestionItems>
  </Input>
  <Text text="{info}"/>
  </cells>
  </ColumnListItem>
  </items>
  </Table>

And in the controller....


this.getView().setModel(new sap.ui.model.json.JSONModel({
  Data: [{
  type: "1",
  info: "One"
  }]
  }));

  this.getView().setModel(new sap.ui.model.json.JSONModel({
  ServicesTypesSet: [{
  description: "first description"
  },{
  description: "second description"
  },{
  description: "third description"
  }]
  }), "SuggestionModel");

In this example i'm using two JSONModels, but it should work if you use one JSON and one OData.

Hope it helps!

Re: JSON Table with editable field using suggestions...

PatrickDean — Wed, 24 Aug 2016 15:12:39 GMT

Thanks for that Jose, I'd seen those ">" before, but never used them / understood how they worked.

That's really useful.