Hey All, Can we use Layout methods in a function? like layout.addChildView is not working in functions "x" but it's working perfectly fine if we use directly in mountToApp function Works Fine

return {

            

mountToApp: function mountToApp(container) {

                

// using the 'Layout' component we add a new child view inside the 'Header' existing view

                  

// (there will be a DOM element with the HTML attribute data-view="Header.Logo")

                

// more documentation of the Extensibility API in

                

// <https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html>

                

/** @type {LayoutComponent} */

                

var layout = container.getComponent('Layout');

                

layout.addChildView('Header.Logo', function () {

                    

console.log('Inner this', this)

                    

return new HomeBannerView({

                        

container: container

                    

});

                

});

Doesn't Work

function AddChild(container, layout) {

            

layout.addChildView('Header.Logo', function () {

                

console.log("adding Child View")

                

return new HomeBannerView({

                    

container: container

                

});

            

});

        

}

        

return {

            

mountToApp: function mountToApp(container) {

                

// using the 'Layout' component we add a new child view inside the 'Header' existing view

                  

// (there will be a DOM element with the HTML attribute data-view="Header.Logo")

                

// more documentation of the Extensibility API in

                

// <https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html>

                

/** @type {LayoutComponent} */

                

var layout = container.getComponent('Layout');

                

AddChild(container, layout);

            

}

        

};

    

});

You can use them in functions but your function won't work because of incorrect usages of closures (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).

mountToApp

is passed the container object, which is what you're using to get the Layout component. But you have wrapped it in a function that uses it. The outside function will run first and at that time,

layout

will be undefined.

Sir with respect, we are not using closures. AddChild is a completely separate function. We pass the layout and container references to that function and I guess it should have worked.

OK, I think the indentation was throwing me off. I think you should return

addChild

as a property of the returned object and then call it in your

mountToApp

with

this.addChild(...)

@Steve Goldberg Thanks Man it's working, I have to add my addChild function in the return object.. One more thing I want to ask you !! When I tried to write a function inside mountToApp function Like this :

mountToApp: function mountToApp(container) {

    

/** @type {LayoutComponent} */

    

var layout = container.getComponent('Layout');

        

function addChild(){

            

layout.addChildView('Header.Logo', function () {

            

console.log("adding Child View")

            

return new HomeBannerView({

                

container: container

            

});

        

});

    

}

}

it didn't work for me.

Well you've created your function but a no point does it look like you've called it?