Hey All !! I am creating a custom extension! Pleas...
# suitecommerce
h
Hey All !! I am creating a custom extension! Please let me know if we can add a child or remove a child before show contents ? or please share if the layout class contains events? can we add data-views through Jquery or add a child in that div in beforeShowContent event?
m
Please use this Extensibility API for ref and the remaining documentation can be under SuiteCommerce developers portal and NetSuite SuiteAnswers.
List of all the events you maybe interested in: • beforeRender -> Backbone View • afterRender -> Backbone View • beforeViewRender ->Backbone View • afterViewRender -> Backbone View • beforeAppendView -> App Layout • afterAppendView -> App Layout • beforeAppendToDom -> App Layout • afterAppendToDom -> App Layout • beforeShowContent -> Router Nav • afterShowContent -> Router Nav For more in-depth info on the events, try skimming through the core and you will get your answers.
h
layout.on('afterShowContent', function () {
                    
console.log("checking"); // executes till this point
                    
viewname = layout.addChildView('<http://Header.Menu|Header.Menu>', function () {
                        
console.log("adding child again..");
                        
return new MyCoolModuleView({
                            
container: container
                        
});
                    
});
                
});
Please let me know what is wrong with this code snippet.
m
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
if(layout)
{
layout.addChildView('<http://Header.Menu|Header.Menu>', function() {
return new MyCoolModuleView({ container: container });
});
}
Now just place the data-view in the template you want the extension to render
<div data-view="Header.Menu"></div>
Just FYI, Before / After show content events won't render the content until the deferred promise is resolved but the rest of the events will.
s
Please let me know what is wrong with this code snippet.
The primary thing is that you set your
addChildView
call to be set to a variable and then never called that variable. So no child view was added because you never told it to add one. Mohammad's code sample is fine, although I don't agree with needing to add a new data-view.
m
@Steve Goldberg if he is extending any existing functionality then no need for data views. But if its a separate customization that can be plucked anywhere then the data view will make your code portable.
h
@Steve Goldberg @Mohammad Sharaf Ali Yes I'm getting your point !! actually I am doing same thing that you mentioned above ! It works fine without any event we can add child in any data-view available on layout but I am wondering about why we cannot addchildview in after/before show content event ..
s
He is adding a view to a 'standard' view placeholder, so it is already portable as every theme has it by default. If he wanted to add it to a custom area then he would need to add a new data-view.
h
/** @type {LayoutComponent} */
                
var layout = container.getComponent('Layout');
                
layout.addChildView('<http://Header.Menu|Header.Menu>', function () {
                    
console.log("adding child")
                    
return new MyCoolModuleView({
                        
container: container
                    
});
                
});
Works fine
s
There is no reason why the method should not work using events. I think it's because, as I said, you were unnecessarily setting a variable and then not calling it
h
@Steve Goldberg using varibale is just for getting view name as we find this in the removeChildview Documention !!
m
@Steve Goldberg I know about that. Just thought he added Header.Menu view id for a sample code snippet.
@humzariaz addChildView -> If there is content in the view (which is typically the case), the child view replaces the current content. addChildViews -> As opposed to the {addChildView} method, the current content in the data attribute element is not replaced by the child views. Instead, the child view is appended after the content in the data attribute element. If you want to add just one single child view while keeping the current content, use this method instead of {addChildView}.