on 07-01-2015 5:14 AM
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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");
}
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?
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
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
},
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.
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.
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
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
See this link.
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.
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");
},
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
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.
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
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>
using,labelSpanL="5" labelSpanM="5" labelSpanS="5" emptySpanL="6" emptySpanM="5" columnsL="10" columnsM="10" columnsS="10" properties you can adjust.
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.
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: ""
})]
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.