Fetching the model using ModelFactory in Expanded View 3

I want to create a widget where I can click on expanded button on the view and it leads to other view where I can see the TabPanel and clicking on the tabs give the information into the GridView under the TabPanelView. I created a widget using ‘yo’ command extension, it created the default “Hello” Widget. View, Model, ModelFactory are working fine in the widget. I can get the model data on the view using the fetch method.

Then, I have implemented ExpandingBehavior in the main view by following the CSUI-SDK document. For Expanded View, I have created new Marionette.ItemView.

Into the ExpandedView, I tried to fetch model data using the factory model and get the data into the expanded view same way as Main view fetches the data. For fetching the model data:

constructor: function ExpandView(options) {

options.model = options.context.getModel(ModelFactory);

Marionette.LayoutView.prototype.constructor.call(this, options);

this.listenTo(this.model, 'change', this.render);

Expanded view is trying to fetch same model which used by main widget view. Also, I have reviewed the “Workflow Status” Widget under “csui-sdk-16.2.8\lib\src\workflow\widgets\wfstatus”. I have changed the Main View and Expanded view (Marionette.ItemView) to “Marionette.LayoutView”. Also, I have found that “options.model=options.context.getModel(ModelFactory);” line is executed into the template helper function in the “wfstatus.extended.view.js” (csui-sdk-16.2.8\lib\src\workflow\widgets\wfstatus\impl). I have also tried to implement that as well. In both scenarios, I have found error.

“options.model=options.context.getModel(ModelFactory);” –is this function executed in constructor, it gives “Uncaught TypeError: Cannot read property 'context' of undefined” error.

templateHelpers: function () {

var model = this.options.context.getModel(ModelFactory);

“options.model=options.context.getModel(ModelFactory);” –is this function executed in Template helper function, it gives “Uncaught TypeError: Cannot read property 'context' of undefined”.

Also, won’t able to open the expanded view after clicking on Expanding button the widget. If I remove the “this.options.context.getModel(ModelFactory);”. Then, I can see the ExpandedView. It will show the expanded view and its simple template without any model data.

Questions:

Does “Expanded view” is behave like a child view?
Does expanded view is required different model and factory?
How is the “options” and “context” defined?
What is difference in executing the [options.context.getModel(ModelFactory)] in constructor and template helper?
What can I do to solve the Issue?
If I will create TabPanelView and GridView into the LayoutView, how can I manage the rendering of model data?

Diagram.pdf

Find more posts tagged with

Comments

Ferdinand Prantl

Your construction of the expanded view looks well. You share the collection with the "collapsed" widget. Initially you needn't re-fetching it. If you re-fetch it for paging/sorting/filtering, or if you re-fetch it to get more data from the server, than you got initially, you may not want to affect the original instance used in the small widget. You would clone the model it after obtaining the shared instance from the context and let the expanded view use the clone.

The code in templateHelpers - options.context.getModel(ModelFactory) - failed, because there is no options variable there, which you access the context from. That's why "Cannot read property 'context' of undefined". It was correct to prepend this - this.options.context - because the constructor options are set to this by the Marionette parent constructor and you can use them in any instance method later. Models are usually obtained from the context in the constructor and either passed to the arent constructor or stored in th einstance (this). They almost never change during the object life and that's why it's not necessary to get them first or repeatedly in templateHelpers. It's not much about performance, it's more about coding style.

Either ItemView or LayoutView are fine. You will use the latter, if your view is a composite of other views.

Q: Does “Expanded view” is behave like a child view?
A: No, it doesn't. It's root view placed to a modal dialog. Either you supplu the constructor options using "expandedViewOptions" in the behaviour options, or you code the in the constructor.

Q: Does expanded view is required different model and factory?
A: No, it doesn't. If you're lucky, you can reuse an existing model or collection to perform a rral "expansion" and reduce the server communication. However, scenarios in csui and workflow do not actually "expand a small view", but open a totally different view. That's why they fetch the (cloned) collection again. It makes the csui implementation confusing, when you encouter it for the first time.

Q: How is the “options” and “context” defined?
A: Options is the same object specified for constructors of Backbone and Marionette views. Cnntext is passed to each widget during the perspective cretion. It's actually the only csui-specific parameter. If you create other views yourself, or leverage LayoutView or CollectionView to create them, you have to pass the context to their constructors yourself, if you need it. (In this case, ExpandingBehavior does it for you.)

Q: What is difference in executing the [options.context.getModel(ModelFactory)] in constructor and template helper?
A: None. Repeating the execution in templateHelpers will make your code one nanosecond slower :-) Getting models in the constructor improves maintainability. Your colleagues will look for such code there, because the model usually remains the same for the views's life or even longer.

Q: What can I do to solve the Issue?
A: What is exactly the latest issue? After you remove the option.context... code from templateHelpers, where it fasiled, the constructor will initialize the modek correctly and you'll see its content.

Q: If I will create TabPanelView and GridView into the LayoutView, how can I manage the rendering of model data?
A: TabPanelView expects a collection of tab models. The attribute "title" is used to the tab link. The rest can be used by tab content views, which obtain the models and which you specify the class for. See lib/src/csui/controls/tab.panel/doc/tab.panel.md in the SDK for more information. GridView expects a collection of grid-cell models, whihc can be specified by "rows" and "columns" keys in the constructor options for convenience. Attributes sizes, pulls, pushes, offsets and heights are known From BINF/Boostrap, other attributes can be used by thw cell-content views, which obtain the models and which you specify the class for. See lib/src/csui/controls/grid/grid.md in the SDK for more information.

Disha Patel

Hey Ferdinand,
I managed to get “context” in the expanding view. Modification in the constructor of the MainView and Expanding Behavior is below:

constructor: function MainView(options)

options.model = options.context.getModel(ModelFactory);

this.context = options.context;

Marionette.LayoutView.prototype.constructor.call(this, options);

this.listenTo(this.model, 'change', this.render);

behaviors: {

Expanding: {

behaviorClass: ExpandingBehavior,

expandButton: '.tile-footer',

expandedView: StatusView,

titleBarIcon: 'title-favourites',

dialogTitle: 'Status',

dialogClassName:'Status',

expandedViewOptions: function () {

return {

context: this.context,

model: this.model.clone()

};

}

In my case, I have explicitly pass the “context” through the expandedViewOption and fetch the model in the ExpandView :

constructor: function ExpandView(options) {

if (options === undefined || !options.context) {

throw new Error('Context is missing in the constructor options');

}

options.model = options.context.getModel(FcssignModelFactory);

Marionette.LayoutView.prototype.constructor.call(this, options);

this.listenTo(this.model, 'change', this.render);

I have reviewed the team.view.js (mainView), teamtable.view.js (expanded view) (C:\csui-sdk-16.2.8\lib\src\conws\widgets\team) and wfstatus.view.js (csui-sdk-16.2.8\lib\src\workflow\widgets\wfstatus).

In team.view.js, how “context” is passes through the expanded view.??

// constructor of the teamview(main view)

constructor: function TeamView(options) {

options || (options = {});

options.data || (options.data = {});

//constructor of the teamtableview

constructor: function TeamTablesView(options)

this.context = options.context;

if (!_.isUndefined(options.collapsedView)) {

this.collapsedView = options.collapsedView;

}

if (!options.workspaceContext) {

options.workspaceContext = options.context.getObject(WorkspaceContextFactory);

}

this.workspaceContext = options.workspaceContext;

this.participantCollection = options.workspaceContext.getCollection(

ParticipantsCollectionFactory);

options.data || (options.data = {});

Marionette.LayoutView.prototype.constructor.call(this, arguments);

//expanding behaviour in teamview

ExpandableList: {

behaviorClass: ExpandingBehavior,

expandedView: TeamTablesView,

expandedViewOptions: function () {

return {collapsedView: this}

In the constructor, Context did not define. How can it pass through the context and able to fetch the model using expandedViewOption.

In the wfstatus.view.js, expandedViewOption is not even mention into the expanding behaviour.

//constructor of workflowview

constructor:function WFStatusView(options) {

options.model = options.context.getModel(WFStatusModelFactory,options.data);

Marionette.LayoutView.prototype.constructor.call(this, options);

this.listenTo(this.model, 'change', this.onModelChange);

var completeCollection = this.options.context.getCollection(WFStatusCollectionFactory, options);

this.completeCollection = completeCollection;

//constructor of workflow extended view

constructor: function WFStatusExtendedView(options) {

this.options = options;

Marionette.LayoutView.prototype.constructor.apply(this, arguments);

//expanding behaviour

ExpandableList: {

behaviorClass:ExpandingBehavior,

expandedView:WFStatusExtendedView,

orderBy:'status_key desc',

actionTitleBarIcon:"icon-toolbarFilter",

dialogTitle: function () { return this.widgetTitle; },

dialogTitleIconRight:"icon-tileCollapse",

dialogClassName:'wfstatus'

}

So, I am not able understand the pattern to fetch model in between the main view and the expanded view.

Why I have to use “this.context = options.context;” in my constructor?
Why in TeamView, They use

“options || (options = {})

options.data || (options.data = {});” this lines of code? What does it do?

Disha Patel

Hey Ferdinand,
I have manage to show the TabPanelView into my expandedView. Also, I have fetch the model using "context" which I explictily pass through the expandedViewOption.

I am having error when I have change the tab "Uncaught TypeError: n.triggerMethod is not a function".
I have use the LayoutViewEventsPropagationMixin into the expanded view.
I attched the widget folder for the review. Can you guide me how can I solve the issue and get the better understanding of it?

status.zip

Ferdinand Prantl

Your constructor looks well.

Q: Why I have to use “this.context = options.context;” in my constructor?
A: You don't have to, if you don't use the context outside the constructor. Otherwise it is a usual practice to save objects comng from options to the this instance. You can also access the context via this.options later.

Q: Why in TeamView, They use “options || (options = {})
A: It is a common pattern to ensure, that the options variable is always defined. The caller may not supply the parameter. However, some controls rerquire a model or context otherwise they won't work. They wouldn't need that statement, because the caller would have to send some parameters in the options object.

Ferdinand Prantl

You encountered a bug in TabPanelView. Currently it expects only a Marionette view; not only backbone view.

Generally, views in Smart UI require Backbone.View as a minimum. Marionette honours this by providing method helpers like Marionette.triggerMethodOn. However, there can be places in code, where Marionette's triggerMethod is used directly. They should be fixed.

Your current code places a Backbone view as the content view for tabs:

  var StatusTableView = Backbone.View.extend({    render: function () {      this.$el.text('Hello !' + this.model.get('title'), +'!');      return this;    }  });      var tabPanelView = new TabPanelView({    contentView: StatusTableView,    tabs: [      {title: 'one'},      {title: 'two'}    ]  });

Change the content view to Marionette.ItemView as a workaround. Marionette views allow you writing less code and better safety, like HTML encoding in this case:

  var StatusTableView = Marionette.ItemView.extend({    template: Handlebars.compile('Hello !{{title}}!')  });

Ferdinand Prantl

It is a bug LPAD-78315.