ng-repeat how to extract data

[Gordon McLean]

Hi
I have eventually managed to bind data to and ng-repeat and I have been returned 15 rows. The issues are

1) The foundset has 191 rows why would the viewport return 15 rows and can this value be increased

2) ng-repeat="row in model.myFoundset.viewPort.rows with {{row}} returns {"_svyRowId":"1.1;_0"} how do I extract the field data from the foundset. I have set 2 columns in the spec file as type data provider and allocated them to specific fields in the preferences (filename, font_name)

I was expecting something like row.filename or row.col1 neither works

best
Gordon

[Andrei Costescu]

There is a wiki page about foundset property types (don't know if you already had a look there): https://wiki.servoy.com/display/DOCS/Fo ... perty+type

1. 15 is a default value that can be changed via setPreferredViewportSize(...). It doesn't make sense to send all loaded records in a foundset initially to the client (this could take long depending on what columns are sent and how many rows...) because each component using foundsets could need a very different 'viewport' on the foundset. For example a table-like component might use paging (or dynamic loading while scrolling) - and need fewer or more records based on it's size. Another component like a image viewer might show only one row/image at a time and cache the ones before/after and so on. For this reason it is left to the component to decide what rows it needs from the server-side foundset. It can change the data that is received client-side via
   
   

   Code: Select all

   loadRecordsAsync: function(startIndex, size):
loadExtraRecordsAsync: function(negativeOrPositiveCount)



2. that depends on how you configure it in the spec file (directly with dataproviders from the foundset or with other properties linked to the foundset or even with components), but yes, in your case (if the dataproviders are set in the foundset property) it should appear like you expected it to. Can you add here the spec definition of the property + columns? Is it similar to the following?
   
   

   Code: Select all

   "foundsetToShow": { "type": "foundset", "dataproviders": ["name", "age", "imagem", "imageurl"] }

Edit: on second thought, as you say the columns have type dataprovider they are probably separate properties - in which case you should define them in the spec file to be linked to the foundset property type. In this case you will get the viewport data in the dataprovider properties themselfes. See the wiki page above. This would be defined similar to:

Code: Select all

"mydataprovider" : { "type" : "dataprovider", "forFoundset" : "foundsetToShow" }

[Gordon McLean]

Andrei

Thanks for your reply and yes I did read the NG docs copiously, the problem that I and I suspect others have it they are written at a level that I just don't as yet understand.

My Spec file contains

Code: Select all

{
   "name": "clickcomponents-test",
   "displayName": "test",
   "version": 1,
   "definition": "clickcomponents/test/test.js",
   "libraries": [],
   "model":
   {
      "yourName" : {"type": "string", "default":"World"},
      "myFoundset": {"type":"foundset","dataproviders": ["filename", "font_name"], "pushToServer": "allow"},
      "col1":   {"type": "dataprovider", "pushToServer": "allow"},
      "col2":   {"type": "dataprovider", "pushToServer": "allow"},
      "col3":   {"type": "dataprovider", "pushToServer": "allow"}   
   }
}

and my HTML

Code: Select all

<table class="table table-striped">
   <tr ng-repeat="row in model.myFoundset.viewPort.rows">
      <td>
      {{row}}
      </td>
   </tr>
</table>

I have made the change you suggested earlier and I am still getting the same results. I did try inserting your update and that crashed the application with an internal error. I wonder if you could comment on the above as it will make the rest of the process a lot more understandable.

The other issue I have also noticed which is also very relevant is the 3 way data binding works one way and not the other. i.e. I can change a standard Servoy field and it changes the database and the component instantly, however when I change the component version it is not replicated to the other elements - do I need some sort of commit/ $watch for this to action the change

best
Gordon

[Andrei Costescu]

I will put some numbers on each subject to keep track of the discussions easier .

1. Ok, so your spec says that the foundset property's viewport should contain "filename" and "font_name". For each of the two you should choose a dataprovider (column from the foundset's table) in properties view in developer - under "myFoundset" property; did you do that? If yes then on the client in myFoundset.viewPort.rows you should get stuff like {"_svyRowId":"1.1;_0", "filename":"veryImportant.pdf", "font_name":"Wingdings"}

If you want changes that happen client-side to those values (like for example if myFoundset.viewPort.rows[0].font_name changes value) to be reflected in server-side foundset you should add ', "pushToServer": "shallow"' to myFoundset's declaration instead of allow; that will automatically shallow-watch the values in viewPort.rows on client side and send them to server when changed. (the 'allow' that you used just allows them to be changed server side but does't really watch for changes and doesn't send them from client)

2. I see you also have col1, col2 and col3 defined in your spec file. If the above works I guess you don't need these. But anyway those, as they are defined now, are normal dataprovider properties - they are not linked to "myFoundset". So when you select a dataprovider in properties view it might not even be a column from myFoundset (for example if in properties view you choose a foundset different then form's foundset). If you want those to be columns from "myFoundset" add to them forFoundset like this: "col1": {"type": "dataprovider", "pushToServer": "allow", "forFoundset": "myFoundset"}

If you do this then in col1 in client you should get an array of values (of the same size as myFoundset's viewport representing the rows in that viewport) instead of a single value. These foundset-linked dataproviders are currently read-only as their push-to-server is not implemented yet. But there is a case for that so when that is done it will work.

3. Now about the other thing you mentioned with bindings. Properties of type "dataprovider" (that are not foundsetLinked, so no forFoundset) will only apply their changes to the server-side record through the svy_autoapply directive or through calling apply from code (this I think is mostly lacking in wiki - it needs to be documented better). And you should also allow that with pushToServer: "allow" (which you already have). Shallow/deep would not help here. Only apply or svy-autoapply do the job for "dataprovider" typed properties. I think the best way is to look at what existing servoy components do.

For example:
- textfield.spec and textfield.html show how svy-autoApply can be used when ng-model is used: <input (...) ng-model="model.dataProviderID" svy-autoapply>
- typeahead.js show how apply API can be used: $scope.svyServoyapi.apply('dataProviderID'); - where svyServoyapi is defined above as scope: { svyServoyapi: "=" }

If you get more internal errors you should check-out the detailed error messages for hints on what went wrong (it could be for example typos in the spec files or in the js files).

[Gordon McLean]

Andrei

Thank you for your notes they have made this process a lot clearer

1) I was able to get the foundset to list the contents of the viewport successfully and include both fields in the list.

2) The 3 columns were defined as part of the learning exercise, on the basis the above works I can see these are irrelevant, however its interesting you can attach them to another foundset

3) The binding worked with your input modification and I am guessing that functions can be applied to the same row by adding them in the .js file i.e. onClick() etc.


Wiki
I think you make a very good point about the wiki this is not particularly clear and I suspect this issue, as with most wiki's of this nature is two fold.

a) The wiki from a novice perspective is very hard to understand as it is too specific and there are no hello world type examples. What is needed are some very basic working examples and associated videos to help the new user. Bob Cusick did some excellent videos early on in Servoys history that certainly from my perspective, and I know others convinced me to adopt Servoy from Filemaker.

b) The existing content relies on a very clear understanding of the principals Servoy has taken adopting AngularJS. I am certain that given time this will become very clear, but for the novice user it is a very real barrier to entry. We have seen a number of excellent examples of NG Client at Servoy World, however these do not appear to be available for users test and inspect this is an urgent requirement. As is video based training on NG Client from the most basic level.

NG Client looks like and should be a very good product, I am looking forward to getting a better understanding, however I do hope that barrier to entry is not so great that it prevents the majority of users adopting the technology. I would urge Servoy to focus on super basic training and documentation that can be made generally available with equally simple examples, even the experts had to start somewhere and I think that is easily forgotten.

best
Gordon

[Andrei Costescu]

Glad to be of help.

Yes, it would be nice to have videos and examples that build from the ground up indeed - for whoever wants to build custom components/services.
Can you please make a case for that in our support system (copy/paste stuff from the last post there & put a link to this thread; also put the case number here for reference)?

I am curious how writing custom components/services will work out in the future. Will all developers write their own components or will there be a number of very nice 3rd party or even Servoy Provided packages that stick and that everyone uses - hiding the extra-complexity of what all those do.

[Gordon McLean]

Thanks again

Support Case: https://support.servoy.com/browse/SW-45

I am also curious as I can think of several nice to have components but I am not sure I could write them or translate them from existing Angular solutions, I think Paolo Aronne currently the world expert.

Right now there is no Servoy Components Store or for that matter Servoy provided components to play around with. I suspect also that there would be little motivation to develop them for sale without some facility to encapsulate them. Much as I am a great supporter of open source and have benefitted hugely from the work done by Marcel, Patrick Talbot and Patrick Rushert, I see little motivation for component developers if they are unable to leverage some income from the process in what is in reality a very small market.

best
Gordon