cancel
Showing results for 
Search instead for 
Did you mean: 

how to display the chart container after i press a button?

Former Member
0 Kudos

Dear Experts,

how to display the chart container after i press a button? Is it the right way i placed all the code of chart container provided in SAPUI5 Demo Kit in the controller there into the function onpress (event triggered after press the button)

Thanks

Regards,

Loh

Accepted Solutions (1)

Accepted Solutions (1)

Private_Member_15166
Active Contributor
0 Kudos

Hi Loh,

What is your exact requirement??

If this is only your requirement then yes, on press event of button you can use your container code.

onAfterRendering of your code you may hide your vizframe and you can display it in onPress event of button.

You can also use the dialog box where you can display the vizframe. onClick of the button it will open a popop where you may keep your vizframe.

Regards

Dhananjay

Former Member
0 Kudos

Hi Dhananjay, the below screen shot showed there are 3 buttons. I wish to show another 3 buttons which are regions, product family and customer groups after i pressed the profitability analysis button. The region, product family and customer group buttons also will be able to display its own graph. So i intend to display chart container after i pressed the profitability Analysis button. Inside the chart container i may have 3 buttons which are region, product family and customer group. My idea is roughly like that. If this idea works, i am not sure how to insert the the code of chart container.view.xml that provided in SAPUI5 into the code as below my code. As i tried just now, i put the code inside the <page>...</page>, it failed to work.

<Page title="Simple Finance" showNavButton="true" navButtonPress="onNavBack">
<subHeader>
    <Toolbar>
        <Button id="PLS" text="Profits And Lost Statement" press="onPress" />
        <ToolbarSpacer/>
    <Button id="PA" text="Profitability Analysis" press="onPress" />
    <ToolbarSpacer/>
    <Button id="CBD" text="Cost Break Down" press="onPress" />
</Toolbar>
</subHeader>
<content>
    <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame height="1700px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame>
</ScrollContainer>
</content>
</Page>

The second question is is it i can straight placed the inside code of onInit: function(oEvent)into onPress function in controller after the line sap.m.MessageToast.show(evt.getSource().getText() + " Pressed"); ??

onPress: function (evt) {

    sap.m.MessageToast.show(evt.getSource().getText() + " Pressed");

  }

former_member182862
Active Contributor
0 Kudos

Just ran across...

I suggest that you use a tab set and not to use the 3 buttons as shown in your position. When we design UI, there are certain metaphor that we follow and it is going to help your user alot.

my 2 cents worth.

-D

Former Member
0 Kudos

Hi Dennis, thanks for valuable suggestion. I will implement it. Thanks

Private_Member_15166
Active Contributor
0 Kudos

You don't have to do like this. In your controller implement every code. and on press event of buttons display your chart.

Regards

Dhananjay

Former Member
0 Kudos

Hi Dhananjay, you meant implement every code in controller is it meant in controller the code in onInit function for chart still followed as usual, then write another function which is onPress to display the chart? Do you have any sample code to write in on press event of button to display the chart?

Private_Member_15166
Active Contributor
0 Kudos

Hi Loh,

See this example.

Create a Project.

File->New->Project From Template->SAPUI5 Application project.

Write this code in your view. This view just contains page having 3 Buttons in it's subHeader as you said

This is the code.

Now write this code in your controller.

sap.ui.controller("view.View1", {

                onInit: function() {

            oPage = this.getView().byId("idPage");          // Global Variable

            oModel = new sap.ui.model.json.JSONModel("https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/demokit/dataset/bookstore_fiori/ByItemCi...");  // Defined Globally

                },

onPressPLS  : function(){

oPage.removeAllContent();

},

onPressPA: function(){

  

    var oPopover = new sap.viz.ui5.controls.Popover();

    var oVizFrame = new sap.viz.ui5.controls.VizFrame({

vizType:"bar" ,

width:"100%" ,

height:"700px"

    });

    var oScrollContainer = new sap.m.ScrollContainer({

height:"100%" ,

width:"100%" ,

horizontal:false ,

        vertical:true ,

focusable:true,

content:[oVizFrame]

    });

  

    // var oModel = new sap.ui.model.json.JSONModel("https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/demokit/dataset/bookstore_fiori/ByItemCi...");

    var oDataset = new sap.viz.ui5.data.FlattenedDataset({

dimensions: [{

                name: "Item Category",

                value: "{Item Category}"

            }, {

                name: 'City',

                value: '{City}'

            }],

            measures: [{

                name: 'Revenue',

                value: '{Revenue}'

            }],

            data: {

                path: "/book"

            }

        });

oVizFrame.setDataset(oDataset);

oVizFrame.setModel(oModel);

        var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

                'uid': "valueAxis",

'type': "Measure",

                'values': ["Revenue"]

            }),

feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

                'uid': "categoryAxis",

'type': "Dimension",

'values': ["Item Category"]

            }),

            feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({

                'uid': "color",

'type': "Dimension",

'values': ["City"]

            });

oVizFrame.setVizProperties({

            valueAxis: {

                label: {

formatString: 'u'

                }

            },

            plotArea: {

dataLabel: {

visible: true,

formatString: "#,##0"

                }

            },

            legend: {

                title: {

visible: false

                }

            },

            title: {

visible: true,

                text: 'Revenue by City and Item Category'

            }

              

        });

      

oVizFrame.addFeed(feedValueAxis);

oVizFrame.addFeed(feedCategoryAxis);

oVizFrame.addFeed(feedColor);

oPopover.connect(oVizFrame.getVizUid());

      

      var iTBar = new sap.m.IconTabBar({

expandable: false,

            items: [

                 new sap.m.IconTabFilter({

                  key : "purchase",

                  icon : "sap-icon://world",

content : [

oScrollContainer

]

              }),

              new sap.m.IconTabFilter({

                  key : "purchase",

                  icon : "sap-icon://product",

content : [

                        new sap.m.Label({text:"tab: 2"})

]

              }),

              new sap.m.IconTabFilter({

                  key : "purchase",

                  icon : "sap-icon://customer",

content : [

new sap.m.Label({text:"tab: 3"})

]

              })

            ]

        });

      

oPage.removeAllContent();

oPage.addContent(iTBar);

      

},

onPressCBD: function(){

oPage.removeAllContent();

}

});

Regards

Dhananjay

Private_Member_15166
Active Contributor
0 Kudos

And also don't forget to include this library in your index.html file.

Former Member
0 Kudos

Hi Dhananjay, currently i am working with the code that you suggested me. I will raise the problems again in here if i encounter it.

Thanks ya

Former Member
0 Kudos

Hi Dhananjay, how do you define the variable globally? Accoding to your code, oPage and oModel should be local variable, right? If yes, i should declare it outside the OnInit function, right?

onInit: function() {

            oPage = this.getView().byId("idPage");          // Global Variable

            oModel = new sap.ui.model.json.JSONModel("https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/demokit/dataset/bookstore_fiori/ByItemCi...");  // Defined Globally

                },

santhu_gowdaz
Active Contributor
0 Kudos

No you given Id for the page in Component.js so "idPage" global to all your view's and controller with in that application.

  var oPage= this.getView().byId("idPage");     // Global Variable

   var  oModel = new sap.ui.model.json.JSONModel("https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/demokit/dataset/bookstore_fiori/ByItemCi...");  // Defined Globally

sap.ui.controller("Your NameSpace", {

onInit: function() {

});

now  oPage and oModel are the global for this controller only.means you can access any methods inside this controller.

Private_Member_15166
Active Contributor
0 Kudos

Hi LOH,

If you will not include var infront of a variable then it will be global. These are javascript local/global scope concepts.

See this link for reference.

Chapter 16. Variables: Scopes, Environments, and Closures

santhu_gowdaz
Active Contributor
0 Kudos

If you will not include var infront of a variable then it will be global?? Is it true??

Former Member
0 Kudos

Is it the right way as the screen shot shown according to you mentioned?

santhu_gowdaz
Active Contributor
0 Kudos

yes but it will be global for this particular controller only.

Private_Member_15166
Active Contributor
0 Kudos

Yes. not for another file. For the same file. In this case for this controller only.

This is a javascript concept.

See this video for reference. SAPUI5 - Data Binding (one-way/two-way) - YouTube

Former Member
0 Kudos

Hi Santhosh, what is the difference between these 2 ways?

1st way:

onInit: function() {

      oPage = this.getView().byId("idPage");          // Global Variable

      oModel = new sap.ui.model.json.JSONModel("bar.json");

            },

2nd way:

as the screenshot shown previously

Private_Member_15166
Active Contributor
0 Kudos

Yes it is right.

Former Member
0 Kudos

Hi Dhananjay, okay thanks, may i know what is the difference between these 2 ways? Both ways seems no difference??

1st way:

onInit: function() {

      var oPage = this.getView().byId("idPage");          // Global Variable

      var oModel = new sap.ui.model.json.JSONModel("bar.json");

            },

2nd way:

as the screenshot shown previously

Private_Member_15166
Active Contributor
0 Kudos

I don't see any changes. Is there any change in both of your code??

santhu_gowdaz
Active Contributor
0 Kudos

1. Declaring inside init() method so it local for that method means ouside this onInit() you can't access these variables.

2. It is declared outside, before your Controller. so it is global and you can access through out your controller.

Former Member
0 Kudos

ya, it comes out errors if i am using 1st way. The 2 screenshot are attached for you to refer

Private_Member_15166
Active Contributor
santhu_gowdaz
Active Contributor
0 Kudos

1. Declaring inside init() method so it local for that method means ouside this onInit() you can't access these variables.

2. It is declared outside, before your Controller. so it is global and you can access through out your controller.

Private_Member_15166
Active Contributor
0 Kudos

When you will declare var then you can only access that variable in your onInit method.

Here in my app you will see that i have not written var because i am using this same variable in all the three methods that is oPage. In the same way you may use oModel also. In my case this is globally declared but if var will be written in front of it then it's scope will be local to onInit method only. Change my code from oPage = to var oPage and you may see the changes.

santhu_gowdaz
Active Contributor
0 Kudos

This is not error, warning. in onInit() you are using these 2 variables right?with out using it why you are initialize so better to remove unused variable's.

Former Member
0 Kudos

HI Santhosh, oh i see, so can i conclude the 2 ways shown in below is the way declaring global variable?

1st :

var oPage = this.getView().byId("idPage");          // Global Variable

var oModel = new sap.ui.model.json.JSONModel("bar.json");

sap.ui.controller("view.tesy", {

             // Defined Globally

  onInit: function() {

            },

2nd:

var oPage;          // Global Variable

var oModel;

sap.ui.controller("view.tesy", {

             // Defined Globally

  onInit: function() {

                    oPage = this.getView().byId("idPage");

                     oModel = new sap.ui.model.json.JSONModel("bar.json");  

            },

santhu_gowdaz
Active Contributor
0 Kudos

ya the difference is,

1. you are initialize that variable while declaring.

2. you are declared Globally but initialize in onInit().

Private_Member_15166
Active Contributor
0 Kudos

First image is only showing error because it has not been used in that method. So basically this is unused variable.

In second image this is showing error because this particular line is searching for oModel variable in that particular method which is not there. But you are trying to access that so this is error.

You may handle this situation in two way.

1. Declare oModel in that method.

2. As i have done. Make it global.

I have done it in second way because it will take few seconds to display the bar diagram.

In first case, Whenever you will click on Tab then this variable will be initialized and will be loaded everytime and which will cause the delay.

So why to do so.

In project of SAPUI5 onInit method is executed first and once. So this will load the model and may be used everywhere.

And our model has been loaded already so when you will click on your tab to display the bar diagram, it will not take much time.

Regards

Dhananjay

Former Member
0 Kudos

Hi Santhosh, thanks for your explanation. Your explanation made me more clearer.

Former Member
0 Kudos

Hi Dhananjay,

thanks for your explanation. Now i understood about it. But i have followed the ways u suggested but when i pressed the PA(profitability analysis) button, it showed me ntg.

Is it it is working fine at your side?


Regards,

Loh

Private_Member_15166
Active Contributor
0 Kudos

LOH CHUN WOOI wrote:

Hi Dhananjay,

thanks for your explanation. Now i understood about it. But i have followed the ways u suggested but when i pressed the PA(profitability analysis) button, it showed me ntg.

Is it it is working fine at your side?

What is ntg here?

Yes the example i have provided to you is working fine at my side.

Former Member
0 Kudos

It just appeared the 3 buttons as shown. Do you put any code between <content>...</content> in your view.xml there?

Former Member
0 Kudos

Hi Dhananjay, i forgot to match the page id. Now it is working fine

Private_Member_15166
Active Contributor
0 Kudos

OnClick of profitability Analysis, you will see IconTab. In this on first Tab you will get the BAR diagram.

Are you not able to see anything on click of Profitability Analysis button??

What is your press event name?

Are you using the same name in controller.

No i don't have used any content in page in my view declaration.

If you are unable to solve the issue then paste your code of view and controller here.

have you included sap.viz library in your index.html file?

Are you getting any error in your browser?

Regards

Dhananjay

Private_Member_15166
Active Contributor
0 Kudos

Good.

Former Member
0 Kudos

Hi Dhananjay, i placed the scrollcontainer and form codes as shown below inside the <content>..<content> in the view.xml there, may i know do you have idea how to set the form content so that it can display at the centre?

<content>

            <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

                <viz:Popover id="idPopOver"></viz:Popover>

                <viz:VizFrame height="1700px" id="idVizFrameBar" uiConfig="{applicationSet:'fiori'}" vizType="bar" width="100%"></viz:VizFrame>

            </ScrollContainer>

           

            <form:SimpleForm  layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2" editable="false" labelSpanL="3" labelSpanM="3" emptySpanL="6" emptySpanM="5" columnsL="10" columnsM="10" >

            <form:content>

            <Label text="Year To Date" />

            <Text text="" />

           

            <Label text="Revenue" />

            <Text text="{}" />

           

            <Label text="Year To Date" />

            <Text text="{}" />

           

            <Label text="Expense" />

            <Text text="{}" />

           

            <Label text="Year To Date" />

            <Text text="{}" />

           

            <Label text="Period to Profit Changed" />

            <Text text="{}" />

           

            </form:content>

            </form:SimpleForm>

        </content>

Private_Member_15166
Active Contributor
0 Kudos

have you written this xmlns:form="sap.ui.layout.form"  ??

Former Member
0 Kudos

sure, i have written it. The display slightly near to left side, i intend to let it display in middle but not sure whether it could make it or not.

santhu_gowdaz
Active Contributor
0 Kudos

using,labelSpanL="5" labelSpanM="5" labelSpanS="5" emptySpanL="6" emptySpanM="5" columnsL="10" columnsM="10" columnsS="10" properties you can adjust.

SAPUI5 Explored

Private_Member_15166
Active Contributor
0 Kudos

ohh Sorry.. do some changes in your Spans as suggested by santosh.

Former Member
0 Kudos

Thanks Santosh.

Former Member
0 Kudos

Hi Dhananjay, is okay. I got 2 questions need to consult from you.

1st question:

As i shown you just now, i placed scrollcontainer inside the <content>...</content>. I assumed that graph that i going to display before press any button is main graph. let say after i pressed a few button, i wish to go back to the main graph, is it possible to create such button or icon (maybe call home) so that it is able direct me to the main graph?

2nd question: how to write code about back arrow? I wish to navigate back to previous page.

santhu_gowdaz
Active Contributor
0 Kudos

1. based on your requirement do visible=true or false.

Means for Graph visible set true or false.

santhu_gowdaz
Active Contributor
0 Kudos

2.

in view,

<Page class="marginBoxContent"
   showNavButton='true' navButtonPress="onBack">

In controller,

onBack:function()

    {

  

var  oApp= sap.ui.getCore().byId("idApp");

//"idApp is the id of your sap.m.app, which you add the views in the Component.js

   oApp.back();

    },

Former Member
0 Kudos

Santhose, the graph i still want to display, just after i pressed the 3 buttons, it is hard for me to press the back button 3 times in order to reach the main graph.

santhu_gowdaz
Active Contributor
0 Kudos

create id for that graph. and press on the button,

this.getView().byId("GraphID").setVisible(true);

//If you want to display it or else if you want to disable then setVisible(false).

Private_Member_15166
Active Contributor
0 Kudos

Add this in your view.

<Page id="bar" showNavButton='true' navButtonPress="onBack">

In Controller write

onBack: function(){

// The way you are displaying the graph

}

Former Member
0 Kudos

Hi Santhosh, thanks

Former Member
0 Kudos

Dhananjay, thanks, I get it. For the simple form, can i write in this way in controller there?

var SForm = new sap.ui.layout.form.SimpleForm({

           maxContainerCols:"2",

           labelSpanL:"4" ,

           labelSpanM:"5" ,

           emptySpanL:"1" ,

           emptySpanM:"1" ,

           columnsL:"1",

           columnsM:"1",

           columnsS:"1",

           content:[new sap.m.Label({

                  text: "Year To Date "

              }),

              new sap.m.DatePicker({

                

              }),

              new sap.m.Label({

                  text: "Revenue "

                  }),

              new sap.m.Text({

                  text: ""

              }),

              new sap.m.Label({

                  text: "Year To Date "

              }),

              new sap.m.DatePicker({

                

              }),

              new sap.m.Label({

                  text: "Expense "

                  }),

              new sap.m.Text({

                  text: ""

              }),

             

              new sap.m.Label({

                  text: "Year To Date"

              }),

              new sap.m.DatePicker({

                

              }),

             

              new sap.m.Label({

                  text: "Period to Profit Changed "

                  }),

              new sap.m.Text({

                  text: ""

              })]

           });

Private_Member_15166
Active Contributor
0 Kudos

Yes you can write this but don't forget to include that library package in your index.html file ie sap.ui.layout

Answers (0)