cancel
Showing results for 
Search instead for 
Did you mean: 

Is it possible to place the code of chart container provided in SAPUI5 Demo Kit between <content>....</content>?

Former Member
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

santhu_gowdaz
Active Contributor
0 Kudos

Directly for page you can't add.

try like this,

<Page title="Bar">

<ChartContainer>

  <content>


</content>

</ChartContainer>

  </Page>

Former Member
0 Kudos

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>

santhu_gowdaz
Active Contributor
0 Kudos

any error in console?

Former Member
0 Kudos

Hi Santhosh, the screen shots is as shown below

santhu_gowdaz
Active Contributor
0 Kudos

By default its "sap.suite.ui.commons",

  xmlns="sap.suite.ui.commons"
  xmlns:m="sap.m"
  xmlns:vbm="sap.ui.vbm"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:viz="sap.viz.ui5.controls"
  xmlns:layout="sap.ui.layout"
  xmlns:core="sap.ui.core"


so use <m.Page>

Former Member
0 Kudos

Hi Santhosh, may i know why need to add 'm.' in front page? Do i need add this xmlns:vbm="sap.ui.vbm" as i didnt see it in responsive chart containner.

santhu_gowdaz
Active Contributor
0 Kudos

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
Private_Member_15166
Active Contributor
0 Kudos

<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>



Private_Member_15166
Active Contributor
0 Kudos

What are the codes in your view? Above <Page tags.

Paste it here.

Former Member
0 Kudos

Hi Dhananjay, the code is same as the code u pasted here. Now it is working fine already. Thanks for your explanation and suggestions

Former Member
0 Kudos

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


santhu_gowdaz
Active Contributor
0 Kudos

     1.you can put xmlns:suite="sap.suite.ui.commons" and xmlns:m="sap.m" at the same time.

It means "suite" is refering "sap.suite.ui.commons" and "m" is refering "sap.m". of Course all the API's in sap will related to each other means See the first word "sap". It's belongs to "sap".

santhu_gowdaz
Active Contributor
0 Kudos

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

santhu_gowdaz
Active Contributor
0 Kudos

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

santhu_gowdaz
Active Contributor
0 Kudos

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.

Former Member
0 Kudos

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

Former Member
0 Kudos

For question 2, if i used the way

xmlns:suite="sap.suite.ui.commons"

  , xmlns="sap.m"

and i have added ':suite ' in front of ChartContainer, dimensionSelectors,
content and ChartContainerContent, yet it did not work.

Former Member
0 Kudos

ya i knew it but i didnt see dimensionSelectors and content are belong to sap.suite.ui commons, i only saw chartContainer and chartContainerContent.

santhu_gowdaz
Active Contributor
0 Kudos

See my answer again,if you use reference for that API then you should use that referance name to access the package belogs to that API.

santhu_gowdaz
Active Contributor
0 Kudos

It should work. may be you missed some thing with out refer to "suite".

Former Member
0 Kudos

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>


Former Member
0 Kudos

Hi Santhosh, do you mind to point me out where is/are wrong as i have no idea where i did it wrong?

santhu_gowdaz
Active Contributor
0 Kudos

"dimensionSelectors" and "Content" is belongs to "sap.suite.ui.commons.ChartContainer" so you can use like this,

<suite:ChartContainer
  id="idChartContainer"
  showFullScreen="true"
  showPersonalization="true"
  autoAdjustHeight="true"
  showLegend="true"
  personalizationPress="attachPersonalizationPress"
  contentChange="attachContentChange">

  <dimensionSelectors>

</dimensionSelectors>

<content>

</content>

</suite:ChartContainer>

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.suite.ui.commons.ChartCont...

Former Member
0 Kudos

Santhosh, is there any difference between xlms:suite=sap.suite.ui.commons and xlms=sap.suite.ui.commons?

santhu_gowdaz
Active Contributor
0 Kudos

yes if you use "xlms:suite=sap.suite.ui.commons" then you should use "suite" infront to its relative methods.

ex: <suite:ChartContainer>

if you use "xlms=sap.suite.ui.commons" then by default this page is referring to this. so directly you can access its methods.

ex: <ChartContainer>

Former Member
0 Kudos

               <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?

santhu_gowdaz
Active Contributor
0 Kudos

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>

Former Member
0 Kudos

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>

santhu_gowdaz
Active Contributor
0 Kudos

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>

Former Member
0 Kudos

Santhosh, i can run it as u posted the code just now. I just tried to test the another way by using xmlns="sap.m and xmlns:suite="sap.suite.ui.commons but this ways i still failed to display it..haha

Private_Member_15166
Active Contributor
0 Kudos

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

Private_Member_15166
Active Contributor
0 Kudos

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">

santhu_gowdaz
Active Contributor
0 Kudos

Dear LOH CHON,

Here most of the methods are coming from SUITE so make it as default. and only select and Page are from sap.m so add ref for that.

Former Member
0 Kudos

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.

Former Member
0 Kudos

Hi Santhosh, really thanks for your suggestion

Private_Member_15166
Active Contributor
0 Kudos

Yes exactly LOH. Cheers..!!

Answers (1)

Answers (1)

Former Member
0 Kudos

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.