I am working on sap fiori project which displays data in chart format. In a dual series chart, I want to remove the gap in between columns, which you can see below:
I tried searching for attributes for vizframe.
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Week"
value="{Week}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
<viz.data:MeasureDefinition name="Cost"
value="{Cost}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
values="Week" />
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
You can use the vizProperties and set plotArea => gap => innerGroupSpacing
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='column'
vizProperties="{ plotArea : {gap: {innerGroupSpacing:0}} }">
Related
I'm trying to add the custom data aggregation to a card control header. I've tried a lot of things but nothing seems to work, I'm always getting the same error:
Cannot add direct child without default aggregation defined for control sap.f.cards.Header
I also tried attaching the aggregation through the controller an it worked fine but I need it in my XML view.
This is my code:
<mvc:View controllerName="Dashboard2.Dashboard2.controller.View2" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
xmlns:f="sap.f" xmlns:w="sap.ui.integration.widgets" xmlns:card="sap.f.cards" xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core.customData" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz="sap.viz.ui5.controls">
<ScrollContainer height="100%" width="100%" vertical="true">
<f:GridContainer snapToRow="false" id="containerid">
<f:layout>
<f:GridContainerSettings rowSize="84px" columnSize="84px" gap="6px"/>
</f:layout>
<f:layoutXS>
<f:GridContainerSettings rowSize="70px" columnSize="70px" gap="6px"/>
</f:layoutXS>
<f:Card class="sapUiMediumMargin" width="300px" height="23rem" id="batchlectura">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
<f:header>
<card:Header title="{datos>Proceso}" subtitle="{path:'datos>Hora', formatter:'.formatter.Hour' }" iconSrc="sap-icon://insurance-house"
statusText="{path:'datos>Estatus', formatter:'.formatter.Estatus'}">
<customData>
<core:CustomData key="Name" value="Contactname"/>
</customData>
</card:Header>
</f:header>
<f:content>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{datos>/results}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Week" value="1"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Estimado" value="{datos>Estimado}"/>
<viz.data:MeasureDefinition name="Actual" value="{datos>Actual}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Estimado"/>
<viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Actual"/>
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week"/>
</viz:feeds>
</viz:VizFrame>
</f:content>
</f:Card>
</f:GridContainer>
</ScrollContainer>
</mvc:View>
Nothing seems to work.
I hope someone can help me.
I believe <customData> should be <card:customData> otherwise the default namespace which is sap/m will be used.
I got a problem with hirarchy grid, i am following this zk live demo,so i am using grid for header data and listbox for detail data, but when i am using the selectedItem property in listbox detail the second row detail become selected too,Here is my UI design
This is my code i am using mvvm
<grid model="#load(vm.headers )">
<columns>
<column width="40px" />
<column label="Nomor Part" sort="auto(name)" style="color:black"/>
<column label="Description" sort="auto(averageHigh)" align="center" style="color:black"/>
<column label="Hotline" sort="auto(averageVolume)" align="center" style="color:black"/>
</columns>
<template name="model" var="item" >
<row>
<custom-attributes details="${item.details}" hotline="${item.hotline}" partNumber="${item.partNumber}"/>
<detail open="false" fulfill="onOpen">
<!--<include src="/widgets/grid/hierarchy/season.zul" details="${details}" hotline="${item.hotline}"/>-->
<include src="/widgets/grid/hierarchy/season.zul" details="#bind(item.details)" hotline="#bind(item.hotline)" partNumber="#bind(item.partNumber)"/>
</detail>
<label value="${item.partNumber}" />
<label value="${item.partDescription}"/>
<checkbox checked="#bind(item.hotline)" onCheck="#command('checkHotline',hotline=item.hotline)"></checkbox>
</row>
</template>
</grid>
And here is my list detail code :
<vbox>
<listbox width="100%" height="300px" model="#load(details)" mold="paging" pageSize="5"
emptyMessage="no data found" >
<listhead style = "text-align: center">
<listheader label="Kode Dealer"/>
<listheader label="Nama Dealer"/>
<listheader label="Alamat"/>
<listheader label="Jarak"/>
<listheader label="Aksi"/>
</listhead>
<template name="model" var="dtl">
<listitem style = "text-align: center" >
<listcell label="#bind(dtl.dealerCode)"/>
<listcell label="#bind(dtl.dealerName)"/>
<listcell label="#bind(dtl.address)"/>
<listcell label="#bind(dtl.distance)"/>
<listcell>
<checkbox checked="#bind(dtl.selectedDealer)" oncheck="#command('onSelectDealer',partNumber)" visible="#load(not hotline)"/>
</listcell>
</listitem>
</template>
</listbox>
<div align="right">
<button label="Cancel" onClick="#command('onSelectDealer',partNumber=partNumber)"/>
</div>
</vbox>
It's hard to provide advice without seeing your code. I would pay careful attention to the row expander code (from the demo)
<!-- use custom-attributes to store quarters and stock in row,
so it can be accessed later when detail onOpen -->
<custom-attributes quarters="${each.quarters}" stock="${each}" />
<detail open="false" fulfill="onOpen">
<include src="/widgets/grid/hierarchy/season.zul"
stock="${stock}" quarters="${quarters}" />
</detail>
I am trying to make a line chart using Vizframe in an Object Page. Does anybody have an example how to do it? I searched the APIs and the sdn but find just samples with Layout element and not Object Page Layout element.
So when I test it within a simple Layout element (< layout > element) the line charts works fine. But when I try it with Object Page Layout elementt, the chart doesn't show and there is no errors in the console.
Thanks a lot,
Haylee N.
I joined the two different views here:
View.xml with Layout element ( that works )
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns:u="sap.uxap" xmlns:layout="sap.ui.layout" xmlns="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<Page title="SAPUI5 App">
<layout:FixFlex id='chartFixFlex' minFlexSize="250">
<layout:fixContent>
<Panel id='settingsPanel' class="panelStyle" expandable="true"
expanded="true" headerText="Summary" width="auto">
<content>
<HBox class='settingsHBox'>
<VBox width="200px">
<Label text='Reports' design="Bold" class='settingsLabel'></Label>
</VBox>
</HBox>
</content>
</Panel>
</layout:fixContent>
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Date"
value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</Page>
</mvc:View>
View.xml with Object Page Layout element ( that doesn't work )
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns="sap.uxap" xmlns:layout="sap.ui.layout" xmlns:m="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<m:Page showHeader="true" title="{i18n>appTitle}" showFooter="true"
showNavButton="false">
<ObjectPageLayout id="ObjectPageLayout"
enableLazyLoading="false" subSectionLayout="TitleOnLeft"
showTitleInHeaderContent="true" showHeaderContent="true">
<headerTitle>
<ObjectPageHeader objectTitle="Quality Monitor"
objectSubtitle="Reports based on errors processed"
isObjectIconAlwaysVisible="false" isObjectTitleAlwaysVisible="false"
isObjectSubtitleAlwaysVisible="false" isActionAreaAlwaysVisible="true"
id="ObjectPageLayoutHeaderTitle">
<actions>
</actions>
</ObjectPageHeader>
</headerTitle>
<sections>
<ObjectPageSection title="Charts">
<subSections>
<ObjectPageSubSection>
<blocks>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
name="Date" value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</m:Page>
</mvc:View>
Whoever may come here for an answer, giving the height of vizframe with pixels does the trick.
As pointed by people in this question some controls use adaptive containers that adapt height to fit their content. If that content uses "100%" of height (which is initially 0) the content efectively becomes 0px and those controls end up adapting their hight to 0px height of the content. For the same reason if you use fixed height instead of a percentage it actually works.
For me personally, this problem only occurred because I blindly copied sample code for VizFrame into IconTabBar container, without realizing the difference in containers used.
Solution to my problem: remove the height="100%" property from VizFrame, which will not force height and in turn will allow the height of VizFrame to be calculated based on its content (title, actual chart, legend and such), instead of container that VizFrame is placed into.
I am creating an XML view in SAPUI5, where i am using VizFrame Chart. I gave the Measure value a fixed name as i am not sure how to make it dynamic as per select. The use case is on select, the measure value/legend on the chart should change as per the selected item. [Image here][1]
The XML code:
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" vizProperties="{ title: {text : 'Energy', visible : true}, plotArea: {dataLabel:{visible: true} ,colorPalette : ['#eab64d','#cb8589'] }}"
height='100%' width="100%" vizType='line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/T_TABLE}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Timeline"
value="{
path: 'C_READINGTIMESTAMP',
type: 'sap.ui.model.type.Date',
formatOptions: {
pattern : 'dd/MM hh a'
}}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Value"
value="{C_READINGVALUE}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
values="Value" />
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
values="Timeline" />
</viz:feeds>
</viz:VizFrame>
Thanks for help. SOLVED IT. Used jQuery and made it dynamic on user click
I am using this sample
<viz:VizFrame id="oVizFrame" busy="false" busyIndicatorDelay="1000" visible="true" uiConfig="{ 'applicationSet': 'fiori' }" vizType="pie" legendVisible="true">
<viz:dataset>
<viz.data:FlattenedDataset data="{/book}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Item Category" value="{Item Category}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition group="1" name="Profit" value="{Profit}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<!-- sap.viz.ui5.data.Dataset -->
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="Profit"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="Item Category"/>
</viz:feeds>
</viz:VizFrame>
I am not able to add more book properties like City and Profit to the existing pie chart. Please guide me.
You can certainly add more dimensions to the pie chart but only one measure will be allowed.
<viz:VizFrame id="oVizFrame" busy="false" busyIndicatorDelay="1000" visible="true" uiConfig="{ 'applicationSet': 'fiori' }" vizType="pie" legendVisible="true">
<viz:dataset>
<viz.data:FlattenedDataset data="{/book}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Item Category" value="{Item Category}"/>
<viz.data:DimensionDefinition name="City" value="{City}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition group="1" name="Profit" value="{Profit}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<!-- sap.viz.ui5.data.Dataset -->
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="Profit"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="Item Category"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="City"/>
</viz:feeds>
</viz:VizFrame>