https://netsuiteprofessionals.com logo
Join Slack
Powered by
Trying to create a SCCollectionView using the foll...
# suitecommerce
c
Trying to create a SCCollectionView using the following example (https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/SCCollectionView.html). In the past for the collection, we used Item.Collection, however Item.Collection is no longer an approved core module to include in our extensions. What would use to substitute Item.Collection? This is an example of what we are trying to replace with the new Extensibility API
Copy code
this.collection = new ItemCollection();

this.collection.fetch({
	data: api_query,
	killerId: AjaxRequestsKiller.getKillerId(),
	pageGeneratorPreload: true
}).done(function(data, result, jqXhr){
	self.render();
});
s
In short, you will need to create a new model and specify the items API request URL as their URLs
In the next release we should be introducing a new component to help in the generation of these URLs
But in the meantime, you will need to create it yourself
👍 1
c
Follow up question…. Using the example in BitBucket… Example.UserPreferences.Collection.js - why do you need to include “this.model” and “this.url”? Can we substitute the service for an item api call?
Copy code
function ExampleUserPreferencesCollection(models, options) {
    SCCollection.call(this, models, options);

    this.model = ExampleUserPreferencesModel;
    this.url = function () {
        return Utils.getAbsoluteUrl(
            getExtensionAssetsPath(
                "Modules/UserPreferences/SuiteScript2/Example.UserPreferences.Service.ss"
            ), true
        )
    }
}
s
Yes 
this.url
can point to anything that will return JSON
this.model
is used because you're saying that once you have that data, you want each array of data to be instanced as a model of that type
c
got it
s
if you don't use a model then you won't be able to use any model functions on it
c
In the collection, when we made a call to the Items API, only 1 model was returned that included an array of items.
s
Collections expect arrays of objects
Using the items API response object rather than its 
items
array will do that
k
so, would it be better to get the api items response in the model, then send to collection then send to vewi? seems like a redundant step
s
Not sure I follow what you mean... However, generally speaking you would use the 
parse
property of the Backbone collection to return the items array although I've not used it in SCCollection, so I don't know if that's possible
k
ok, to be clear, since we’re using the api response, whether we can skip the collection piece…since we end up with an array of items
s
OK. You can treat the API response as one big model if you wanted to, just so long as you're not expecting to treat each of the item objects as individual models
Logically, that doesn't make sense to me as I think you're mistreating the nature of the data just to avoid writing an extra class or two, and you'll also be hamstringing yourself later on should you want to perform certain functions on it
In other words, it seems like an unnecessary shortcut. You'll save a little bit of time, in the hope that you'll never need to treat those individual items as models later on
k
so, for the collection, we would skip the api call and turn each of the items array into model
since the api call is in the model
s
... no?
Collection: "use this URL to get me a group of items"
Model: "use this URL to perform actions on this particular item"
You could conceivably skip setting a URL on the model, as you may never expect to fetch an individual item from the items API
k
ok - I had it backwards I see
api call on the collection
s
I think so
Anyway, in your collection, try setting a value for the 
parse
property that is a function like this: 
this.parse = function (response) { return response.items }
It could also need to be set on the prototype object
You should probably also check items exist, or just do an OR that returns an empty array
k
ok - found that we were missing the arguments for the model (they are missing in the extensibility documentation but they are in your example code)
🙃 1
I think we have it connected correctly now
thanks
So it is falling about going from collection to the view….here’s “this” in the collection
when i do a collection fetch in the view I get items not models
s
So it is falling about going from collection to the view
Could you rephrase this? I don't understand what you mean. And just to clarify, when you mean a view --- are you using a CollectionView?
k
I am not using a collection view….just an SCView -is that the issue? using HomeFeaturedProductsCollection = new homeFeaturedProductsCollection(); this.collection = HomeFeaturedProductsCollection; this.collection.fetch().done(function fnSuccess(data) {
s
I wouldn't anticipate using a regular view causing a difference in how the data is organised but it could. Generally speaking, you want to use a CollectionView when you anticipate rendering each individual model as a view
So, in short, you should use a collection view
k
ok - will try that
s
FTR, I have just tried fetching a collection via the browser tools (ie circumventing the collection view) and it returns the data as models as expected
Copy code
var coll = require('Example.UserPreferences.Collection')
undefined
new coll()
ExampleUserPreferencesCollection {length: 0, models: Array(0), _byId: {…}, url: ƒ, model: ƒ}
var asd = new coll()
undefined
asd.fetch()
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}abort: ƒ (e)always: ƒ ()catch: ƒ (e)done: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (e)overrideMimeType: ƒ (e)pipe: ƒ ()preventDefault: falseprogress: ƒ ()promise: ƒ (e)readyState: 4responseJSON: (2) [{…}, {…}]responseText: "[{"internalid":"43","type":"2","value":"Medium"},{"internalid":"44","type":"1","value":"Green"}]"setRequestHeader: ƒ (e,t)state: ƒ ()status: 200statusCode: ƒ (e)statusText: "success"then: ƒ (t,i,n)__proto__: Object
asd
ExampleUserPreferencesCollection {length: 2, models: Array(2), _byId: {…}, url: ƒ, model: ƒ}length: 2model: ƒ ExampleUserPreferencesModel(model, collection, options)models: (2) [ExampleUserPreferencesModel, ExampleUserPreferencesModel]url: ƒ ()_byId: {43: ExampleUserPreferencesModel, 44: ExampleUserPreferencesModel, c647: ExampleUserPreferencesModel, c648: ExampleUserPreferencesModel}__proto__: r
k
I found that my fetch was the issue…changed this.collection.fetch().done(function fnSuccess(data) { to just this.collection.fetch().done().catch(function fnError() { was the key
Open in Slack
PreviousNext
Powered by