CODEWITHSUNDEEP
xmlsapui5
Kiri
Kiri

Reputation: 3

sapui5 Vizframe and IconTabBar

I want to develop a sapui5-view with a Tab-View. On the first tab there have to be two donut-charts (sap.viz.ui5.controls). For Tab-View I'm using the IconTabBar.

I can display the charts without the IconTabBar but when I implement the chart-view in the tab-view everthing is empty.

Also when I put the two donut-charts in a HorizontalLayout.

Has anyone an idea? kind regards Kirsten

Tab-View:

<Page id="detail_Tab" title="{i18n>Title}" showNavButton="false" >
        <IconTabBar>
            <items>
                <IconTabFilter text="Overview">
                    <mvc:XMLView viewName="{...}.view.Detail_Overview"/>
                </IconTabFilter>

            </items>
        </IconTabBar>
    </Page>

Detail_Overview:

    <viz:VizFrame 
        id="idDonutChartPriority" 
        height="100%" 
        width="100%"></viz:VizFrame>

Upvotes: 0

Views: 1582

Answers (3)

Zero
Zero

Reputation: 1646

I am going to take a guess, that you made the same mistake I did and copied the sample code blindly, without realizing that some of the properties are meant to be used with layout elements.

Unless you are using another container for the VizFrame simply remove the height="100%" property from VizFrame and it will adapt on its own.

Upvotes: 0

Geetha
Geetha

Reputation: 1

 <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" controllerName="view1">
<IconTabBar>
          <items>
              <IconTabFilter text="Overview">
                  <viz:VizFrame 
                    id="sample" 
                    height="500px" 
                    width="100%"></viz:VizFrame>
              </IconTabFilter>
          </items>
      </IconTabBar>
</mvc:view>

Upvotes: 0

schnoedel
schnoedel

Reputation: 3948

I would guess that you have a problem with the height="100%" property of your VizFrames. Try setting them to a px size. You can try that here on JSBin.

The height of the IconTabBar is fitted to its contents. If your Content has a height of 100% it will result into 100% of zero.

If you want to use 100% you could try to set stretchContentHeight="true" on your IconTabBar. It determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.

Upvotes: 3

Related Questions