on 07-01-2015 4:56 AM
Dear Experts,
Is it possible to place the code of chart container provided in SAPUI5 Demo Kit between <content>....</content>? It cannot work after i run it.
<Page title="Bar">
<content>
</content>
</Page>
Regards,
Loh
Directly for page you can't add.
try like this,
<Page title="Bar">
<ChartContainer>
<content>
</content>
</ChartContainer>
</Page>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Santhosh, the way u suggested i think should be displayed as below, it failed to work after added <Page title="Bar"> and </Page>. If didnt added both, it work fine.
* Inside <Page>...</Page> is the code of chart container from SAPUI5 Demo Kit
<Page title="Bar">
<layout:Splitter width="100%" height="700px">
<layout:contentAreas>
<ChartContainer
id="idChartContainer"
showFullScreen="true"
showPersonalization="true"
autoAdjustHeight="true"
showLegend="true"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange">
<dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</dimensionSelectors>
<customIcons>
<core:Icon id="idoIcon1" width="2em"> </core:Icon>
<core:Icon id="idoIcon2" width="2em"> </core:Icon>
<core:Icon id="idoIcon3" width="2em"> </core:Icon>
</customIcons>
<content>
<ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</content>
</ChartContainerContent>
<ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</content>
</ChartContainerContent>
</content>
</ChartContainer>
</layout:contentAreas>
</layout:Splitter>
</Page>
page is belongs to sap.m But in explored by default it's referring xmlns="sap.suite.ui.commons" so its searching page in this. finally 404 error.
otherwise do like this,
xmlns:suite="sap.suite.ui.commons"
xmlns="sap.m"
so now <Page> will works fine but
ChartContainer,
dimensionSelectors,
content,
ChartContainerContent,etc
refere with "suite" name.
like this,
<
suite:ChartContainer>,
<
suite:
dimensionSelectors
>
,
<suite:
content
>
,<
suite:
ChartContainerContent
>
,etc
<Page title="Bar">
<layout:Splitter width="100%" height="700px">
<layout:contentAreas>
<ChartContainer
id="idChartContainer"
showFullScreen="true"
showPersonalization="true"
autoAdjustHeight="true"
showLegend="true"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange">
<dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</dimensionSelectors>
<customIcons>
<core:Icon id="idoIcon1" width="2em"> </core:Icon>
<core:Icon id="idoIcon2" width="2em"> </core:Icon>
<core:Icon id="idoIcon3" width="2em"> </core:Icon>
</customIcons>
<content>
<ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</content>
</ChartContainerContent>
<ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</content>
</ChartContainerContent>
</content>
</ChartContainer>
</layout:contentAreas>
</layout:Splitter>
</Page>
This is your code.
Whenever you will create a SAPUI5 application project using XML view then this will be automatically generated.
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="view.View1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
</content>
</Page>
</core:View>
In Layman language here xmlns="sap.m" means here you will see <Page title="Bar"> . Here page is starting just after opening tag. this means view is searching Page in sap.m library and this is correct.
But here Layout is from another library but this is searching for the same in sap.m library which is not there. So include this library in your view like this.
xmlns:layout="sap.ui.layout"
Now for using the same layout when designing the view write like this.
<layout: AnyElement like Splitter of this library ></layout: Splitter>
Hi Santhosh, I have 4 questions for you :
1) Is it possible to put xmlns:suite="sap.suite.ui.commons" and xmlns:m="sap.m" at the same time. As i tried, it either can put xmlns:suite="sap.suite.ui.commons" and xmlns="sap.m or xmlns="sap.suite.ui.commons" and xmlns:m="sap.m. Is it both of this library are related to each other?
2) I tried another method that you suggested me which is .
xmlns:suite="sap.suite.ui.commons"
, xmlns="sap.m"
Below is the code i pasted it for you to refer because it run errors, yet it run successfully by just added 'm' in front of page if i am using xmlns:suite="sap.suite.ui.commons" and xmlns:m="sap.m"
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:suite="sap.suite.ui.commons"
xmlns:layout="sap.ui.layout"
xmlns:viz="sap.viz.ui5.controls"
xmlns="sap.m"
controllerName="view.ChartContainer"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page id="bar">
<layout:Splitter width="100%" height="700px">
<layout:contentAreas>
<suite:ChartContainer
id="idChartContainer"
showFullScreen="true"
showPersonalization="true"
autoAdjustHeight="true"
showLegend="true"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange">
<suite:dimensionSelectors>
<Select id="idoSelect1"> </Select>
</suite:dimensionSelectors>
<suite:customIcons>
<core:Icon id="idoIcon1" width="2em"> </core:Icon>
<core:Icon id="idoIcon2" width="2em"> </core:Icon>
<core:Icon id="idoIcon3" width="2em"> </core:Icon>
</suite:customIcons>
<suite:content>
<suite:ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<suite:content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</suite:content>
</suite:ChartContainerContent>
<suite:ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<suite:content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</suite:content>
</suite:ChartContainerContent>
</suite:content>
</suite:ChartContainer>
</layout:contentAreas>
</layout:Splitter>
</Page>
</core:View>
3)"
refere with "suite" name.
like this,
<
suite:ChartContainer>,
<
suite:
dimensionSelectors
>
,
<
suite:
content
>
,
<
suite:
ChartContainerContent
>
,etc
According to your suggestion, where can i find and to know the 'suite:' needed to add to find in dimensionSelectors and content as i searched i only saw chartcontainer and chartcontainercontent in sap.suite.ui.commons?
4)As you said the SAPUI5 demo kit there, since it refer to xmlns="sap.suite.ui.commons" in explored by default, may i know why there is 'm' in front of select as i shown below?Why cant use the second way? If the new user is new beginner, how he/she is going to know 'm' is needed to add in front of select?
1st way:
<dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</dimensionSelectors>
2nd way:
<dimensionSelectors>
<Select id="idoSelect1"> </Select>
</dimensionSelectors>
Sorry for long questions, i just summarized it all the questions since yesterday.
Thanks.
Regards,
Loh
2. yes xmlns:m="sap.m" here "sap.m" is refering as "m". so page is available in "sap.m" package through its reference only you can access. see the below link to know what are all available in "sap.m" package.
JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m
3.Just copy and paste in google "sap.suite.ui.commons". you will find it.See the below link to know what are all available in "sap.suite.ui.commons"
JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.suite.ui.commons
4. well, actually per page you can refer only single package by default. Means xmlns="sap.suite.ui.commons" is the default package, with out any reference you can access this package in your view.
for example,
<dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</dimensionSelectors>
here "dimensionSelectors" is belongs to "sap.suite.ui.commons" but Select is available in "sap.m" package.
"xmlns" is used for naming convension, reference purpose.
Final, In your view, If you are using "sap.suite.ui.commons" package more then keep it as default. if you are using more "sap.m" package then make it as default.
very simple if you are initialize a package by it reference then call its functionalists by it's reference name.
Any doubts? let me know.
Hi Santhosh, for the 1st question i asked you, as i tried, it either can put xmlns:suite="sap.suite.ui.commons" and xmlns="sap.m or xmlns="sap.suite.ui.commons" and xmlns:m="sap.m. It appears red color (error) before i run the apps if i put xmlns:m="sap.m and xmlns:suite="sap.suite.ui.commons
For question 4, i am not really get what u meant. Perhaps i am slow learner. How to keep "sap.m" as default if i am using it more? Is it there is any setting to set it?
<dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</dimensionSelectors>
Based on this example, i just want point out it in two ways. Perhaps it may looks like more easily to be understand.
1st way: [based on SAPUI5 demo kit, it refer xmlns="sap.suite.ui.commons" and xmls:m = "sap.m" ], so it wrote in such way as shown above.
2nd way: [you suggested me that if i use xmlns:suite="sap.suite.ui.commons and xlms="sap.m"], i should write in such way as below, right?
<suite:dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</suite:dimensionSelectors>
From this code, i wonder whether i deleted the":m" in front of select since now is refer to xlms="sap.m" instead of xlms:m="sap.m", and wrote in such way:
<suite:dimensionSelectors>
<Select id="idoSelect1"> </Select>
</suite:dimensionSelectors>
"dimensionSelectors" and "
is belongs to "sap.suite.ui.commons.ChartContainer" so you can use like this,Content"
<suite:ChartContainer
id="idChartContainer"
showFullScreen="true"
showPersonalization="true"
autoAdjustHeight="true"
showLegend="true"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange">
<dimensionSelectors>
</dimensionSelectors>
<content>
</content>
</suite:ChartContainer>
<content>
<suite:ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</content>
</suite:ChartContainerContent>
<suite:ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</content>
</suite:ChartContainerContent>
</content>
Santhosh, the first (<content> and last line(</content> ), do i need to put ':suite" in front of it?
No it may looks like this,
if you add by default "sap.m"
xmlns:suite="sap.suite.ui.commons and xlms="sap.m"
<Page>
<content>
<suite:ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</content>
</suite:ChartContainerContent>
<suite:ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</content>
</suite:ChartContainerContent>
</content>
</Page>
Hi Santhosh, your explanation are awesome and clear. Now I fully understood what you are trying to explain. Really thanks for your guidance. If you feel free you are welcome try my below code as it still run errors.
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:suite="sap.suite.ui.commons"
xmlns:layout="sap.ui.layout"
xmlns:viz="sap.viz.ui5.controls"
xmlns="sap.m"
controllerName="view.ChartContainer"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page id="bar">
<layout:Splitter width="100%" height="700px">
<layout:contentAreas>
<suite:ChartContainer
id="idChartContainer"
showFullScreen="true"
showPersonalization="true"
autoAdjustHeight="true"
showLegend="true"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange">
<dimensionSelectors>
<Select id="idoSelect1"> </Select>
</dimensionSelectors>
<customIcons>
<core:Icon id="idoIcon1" width="2em"> </core:Icon>
<core:Icon id="idoIcon2" width="2em"> </core:Icon>
<core:Icon id="idoIcon3" width="2em"> </core:Icon>
</customIcons>
<content>
<suite:ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</content>
</suite:ChartContainerContent>
<suite:ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</content>
</suite:ChartContainerContent>
</content>
</suite:ChartContainer>
</layout:contentAreas>
</layout:Splitter>
</Page>
</core:View>
Your code works fine, small edit i did,
in index.html i added ,
data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.core,sap.ui.ux3,sap.ui.comp,sap.ca.ui,sap.suite.ui.commons"
and your modified code,
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.suite.ui.commons"
xmlns:layout="sap.ui.layout"
xmlns:viz="sap.viz.ui5.controls"
xmlns:m="sap.m"
controllerName="com.arteriatech.coldtl.CollectionDetail"
xmlns:html="http://www.w3.org/1999/xhtml">
<m:Page id="bar">
<layout:Splitter width="100%" height="700px">
<layout:contentAreas>
<ChartContainer
id="idChartContainer"
showFullScreen="true"
showPersonalization="true"
autoAdjustHeight="true"
showLegend="true"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange">
<dimensionSelectors>
<m:Select id="idoSelect1"> </m:Select>
</dimensionSelectors>
<customIcons>
<core:Icon id="idoIcon1" width="2em"> </core:Icon>
<core:Icon id="idoIcon2" width="2em"> </core:Icon>
<core:Icon id="idoIcon3" width="2em"> </core:Icon>
</customIcons>
<content>
<ChartContainerContent icon = "sap-icon://bubble-chart" title = "vizFrame Bubble Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame3"> </viz:VizFrame>
</content>
</ChartContainerContent>
<ChartContainerContent icon = "sap-icon://horizontal-stacked-chart" title = "vizFrame Stacked Bar Chart Sample">
<content>
<viz:VizFrame id="idoVizFrame5"> </viz:VizFrame>
</content>
</ChartContainerContent>
</content>
</ChartContainer>
</layout:contentAreas>
</layout:Splitter>
</m:Page>
</core:View>
Hi Loh,
Use this code and your view will work.
<core:View controllerName="view.View1" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:layout="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc" xmlns:suite="sap.suite.ui.commons" xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">
<Page id="bar">
<layout:Splitter height="700px" width="100%">
<layout:contentAreas>
<suite:ChartContainer autoAdjustHeight="true" contentChange="attachContentChange" id="idChartContainer"
personalizationPress="attachPersonalizationPress" showFullScreen="true" showLegend="true" showPersonalization="true">
<suite:dimensionSelectors>
<Select id="idoSelect1"></Select>
</suite:dimensionSelectors>
<suite:customIcons>
<core:Icon id="idoIcon1" width="2em"></core:Icon>
<core:Icon id="idoIcon2" width="2em"></core:Icon>
<core:Icon id="idoIcon3" width="2em"></core:Icon>
</suite:customIcons>
<suite:content>
<suite:ChartContainerContent icon="sap-icon://bubble-chart" title="vizFrame Bubble Chart Sample">
<suite:content>
<viz:VizFrame id="idoVizFrame3"></viz:VizFrame>
</suite:content>
</suite:ChartContainerContent>
<suite:ChartContainerContent icon="sap-icon://horizontal-stacked-chart" title="vizFrame Stacked Bar Chart Sample">
<suite:content>
<viz:VizFrame id="idoVizFrame5"></viz:VizFrame>
</suite:content>
</suite:ChartContainerContent>
</suite:content>
</suite:ChartContainer>
</layout:contentAreas>
</layout:Splitter>
</Page>
</core:View>
Are you expecting this output?
Regards
Dhananjay
and use your controller name ie controllerName="view.ChartContainer".
<core:View controllerName="view.ChartContainer" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:layout="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc" xmlns:suite="sap.suite.ui.commons" xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">
Yeah, Dhananjay. Your code is working. Really thanks for it, now I managed did it in both ways. Just one doubt need help from you, as i saw in sap.suite.ui.commos.chartcontainer there, there are some supported settings there. So based on your code if i put "suite:" in front of chart container (<suite:ChartContainer>), then the supported settings such as content, dimensionSelectors inside the chart container also need to added "suite:",right? This is what i observed based on your code.
To all who refer to this post, there are many correct answers in this post, yet only one correct answer can be clicked. So pls do not misunderstand that there is only one solution for this post.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
76 | |
10 | |
10 | |
7 | |
7 | |
6 | |
6 | |
6 | |
5 | |
5 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.