SAP UI5 [Panel]- How to create a new Panel on button click

Question

I have a requirement where I have add the panel on click on a button.

In the controller function I have written the code like below. I don't get the error in console neither do I get the panel when I click the button.

However when I console.log the panel object I can see the panel is created but not sure why not reflected in the view. suggestions please.

onAddObjectiveClick: function () {
        var panel = new Panel({
            headerText: "Description",
            visible: true,
            backgroundDesign: "Solid",
            content: new TextArea({
                value: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
                growing: true,
                width: "100%",
                height: "263px"
            })              
        });

} this.getView().addDependent(panel); // at this place I have tried setExapanded and setExpandible function too but none helped.

Answer 1

You are basically creating an object, assigning to a local variable and not adding it to your view.

You should have any kind of container element with an aggregation to add your Panel.

Depending on the container the aggregation name will be different and thus the method you need to call in order to add the Panel to it.

Example: If you need to add this Panel inside the aggregation content of the sap.m.Page class, you should

1) Have the Page

2) Capture it inside the controller

3) call the addContent()