SAPUI5 Horizantal Scroll Problem

[ozturq]

Hi experts,

We have problem to show horizontal scrollbar on ui.table. The need is like this; We want the horizontal scrollbar feature to be visible without having to scroll to the bottom of the page. We've tried scrollcontainer but i does not work.

There is an attachment of view file.

We want your help please.

Regards.mainview.xml

****View code****

<mvc:View controllerName="com.tofas.hrZHR_PS.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

xmlns:micro="sap.suite.ui.microchart" displayBlock="true" xmlns="sap.m" xmlns:t="sap.ui.table" xmlns:l="sap.ui.layout"

xmlns:form="sap.ui.layout.form" xmlns:commons="sap.ui.commons" xmlns:core="sap.ui.core"

xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" height="100%">

<App id="app">

<pages>

<Page title="{i18n>title}" enableScrolling="true" class="sapUiContentPadding">

<content>

<OverflowToolbar>

<ToolbarSpacer/>

<MenuButton text="Dil / Language">

<menu>

<Menu>

<MenuItem text="Türkçe" press="onPressTurkish"/>

<MenuItem text="English" press="onPressEnglish"/>

</Menu>

</menu>

</MenuButton>

</OverflowToolbar>

<form:SimpleForm id="SimpleFormChange354wideDual" layout="ColumnLayout">

<form:content>

<core:Title text=""/>

<Label text="{i18n>ToplamPrim}" design="Bold"/>

<Input enabled="false" value="{ path: 'FormModel>/ToplamPrim', formatter: 'roundInt' }" width="300px"/>

<Label text="" design="Bold"/>

<Text text="" width="300px"/>

<Label text="{i18n>Butce}" design="Bold"/>

<Input enabled="false" value="{ path: 'FormModel>/Butce', formatter: 'roundInt' }" width="300px"/>

<Label text="{i18n>ButceKullanilan}" design="Bold"/>

<Input enabled="false" value="{ path: 'FormModel>/ButceKullanilan', formatter: 'roundInt' }" width="300px"/>

<Label text="{i18n>ButceKalan}" design="Bold"/>

<Input enabled="false" value="{ path: 'FormModel>/ButceKalan', formatter: 'roundInt' }" width="300px"/>

<core:Title text=""/>

<Label text="{i18n>BarPercent1}" design="Bold"/>

<ProgressIndicator class="sapUiSmallMarginBottom" percentValue="{FormModel>/BarPercent1}" displayValue="%{FormModel>/BarDisplay1}"

showValue="true" state="Error" width="400px"/>

<Label text="{i18n>BarPercent2}" design="Bold"/>

<ProgressIndicator class="sapUiSmallMarginBottom" percentValue="{FormModel>/BarPercent2}" displayValue="%{FormModel>/BarDisplay2}"

showValue="true" state="None" width="400px"/>

<Label text="{i18n>BarPercent3}" design="Bold"/>

<ProgressIndicator class="sapUiSmallMarginBottom" percentValue="{FormModel>/BarPercent3}" displayValue="%{FormModel>/BarDisplay3}"

showValue="true" state="Success" width="400px"/>

</form:content>

</form:SimpleForm>

<Panel expandable="false" expanded="true" class="sapUiContentPadding" stickyHeader="true">

<headerToolbar>

<OverflowToolbar>

<Title text="{i18n>title2}"/>

<Link text="{i18n>file}" href="https://TOFASPORTAL.TOFAS.COM.TR:443/sap/opu/odata/sap/ZHR_PS_SRV/FileSet('')/$value"/>

<ToolbarSpacer/>

<MenuButton text="{i18n>menu}">

<menu>

<Menu>

<MenuItem text="{i18n>menuItem1}" press="onPressSummary"/>

<MenuItem text="{i18n>menuItem2}" press="onPressDetail"/>

</Menu>

</menu>

</MenuButton>

</OverflowToolbar>

</headerToolbar>

<content>

<t:Table id="id_FormsTable" selectionMode="None" rows="{FormModel>/List}" enableCellFilter="true" alternateRowColors="true"

fixedColumnCount="2" stick="ColumnHeaders" visibleRowCount="{= ${FormModel>/List}.length}">

<t:columns>

<t:Column width="100px" visible="true" hAlign="Center" height="100px">

<Label text="{i18n>Photourl}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Image src="{FormModel>Photourl}" width="65%"></Image>

</t:template>

</t:Column>

<t:Column sortProperty="Adsoyad" filterProperty="Adsoyad" width="100px" visible="true">

<Label text="{i18n>Adsoyad}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Adsoyad}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Pozmetni" filterProperty="Pozmetni" width="100px" visible="true" height="100px">

<Label text="{i18n>Pozmetni}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Pozmetni}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Unvant" filterProperty="Unvant" width="80px" visible="true" height="100px">

<Label text="{i18n>Unvant}" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Unvant}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Direktorluktnm" filterProperty="Direktorluktnm" width="100px" visible="true">

<Label text="{i18n>Direktorluktnm}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Direktorluktnm}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Mudurluktnm" filterProperty="Mudurluktnm" width="100px" visible="true" height="100px">

<Label text="{i18n>Mudurluktnm}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Mudurluktnm}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Yoneticiliktnm" filterProperty="Yoneticiliktnm" width="100px" visible="true" height="100px">

<Label text="{i18n>Yoneticiliktnm}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Yoneticiliktnm}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Amiradsoyad" filterProperty="Amiradsoyad" width="100px" visible="true" height="100px">

<Label text="{i18n>Amiradsoyad}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Amiradsoyad}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Kisittxt" filterProperty="Kisittxt" width="140px" visible="{FormModel>/columnVisible}" height="100px">

<Label text="{i18n>Kisittxt}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Kisittxt}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Trfst" filterProperty="Trfst" width="100px" visible="true" height="100px">

<Label text="{i18n>Trfst}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Trfst}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Mevcutucret" filterProperty="Mevcutucret" width="100px" visible="true" height="100px">

<Label text="{i18n>Mevcutucret}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{ path: 'FormModel>Mevcutucret', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Katsayisirket" filterProperty="Katsayisirket" width="180px" visible="{FormModel>/columnVisible}" height="100px">

<Label text="{i18n>Katsayisirket}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Katsayisirket}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Katsayikd" filterProperty="Katsayikd" width="180px" visible="{FormModel>/columnVisible}" height="100px">

<Label text="{i18n>Katsayikd}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Katsayikd}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Hedefprimsirket" filterProperty="Hedefprimsirket" width="170px" visible="{FormModel>/columnVisible}" height="100px">

<Label text="{i18n>Hedefprimsirket}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{ path: 'FormModel>Hedefprimsirket', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Sirketperformanspuani" filterProperty="Sirketperformanspuani" width="100px" visible="{FormModel>/columnVisible}" height="100px">

<Label text="{i18n>Sirketperformanspuani}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Sirketperformanspuani}" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Gerceklesenprim" filterProperty="Gerceklesenprim" width="140px" visible="true" height="100px">

<Label text="{i18n>Gerceklesenprim}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{ path: 'FormModel>Gerceklesenprim', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Performanshedeftxt" filterProperty="Performanshedeftxt" width="120px" visible="true" height="100px">

<Label text="{i18n>Performanshedeftxt}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<ObjectStatus class="fontSize" text="{FormModel>Performanshedeftxt}" inverted="true"

state="{ parts: [{path: 'FormModel>Performanshedef'}], formatter: 'setColorPerformance' }"/>

</t:template>

</t:Column>

<t:Column sortProperty="Performansdavranistxt" filterProperty="Performansdavranistxt" width="150px" visible="true" height="100px">

<Label text="{i18n>Performansdavranistxt}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<ObjectStatus class="fontSize" text="{FormModel>Performansdavranistxt}" inverted="true"

state="{ parts: [{path: 'FormModel>Performansdavranis'}], formatter: 'setColorPerformance' }"/>

</t:template>

</t:Column>

<t:Column sortProperty="Hedefprimkd" filterProperty="Hedefprimkd" width="160px" visible="true" height="100px">

<Label text="{i18n>Hedefprimkd}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{ path: 'FormModel>Hedefprimkd', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Minimumprim" filterProperty="Minimumprim" width="140px" visible="true" height="100px">

<Label text="{i18n>Minimumprim}" wrapping="true" textAlign="Center" width="100%" design="Bold"/>

<t:template>

<Text text="{ path: 'FormModel>Minimumprim', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Maksimumprim" filterProperty="Maksimumprim" width="140px" visible="true" height="100px">

<Label text="{i18n>Maksimumprim}" wrapping="true" textAlign="Center" width="100%" design="Bold"/>

<t:template>

<Text text="{ path: 'FormModel>Maksimumprim', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Gerceklesenprimyonetici" filterProperty="Gerceklesenprimyonetici" width="140px" visible="true" height="100px">

<Label text="{i18n>Gerceklesenprimyonetici}" wrapping="true" textAlign="Center" width="100%" design="Bold"/>

<t:template>

<Input enabled="true" value="{FormModel>Gerceklesenprimyonetici}" change="onChangeGerceklesenprimyonetici" width="100%"

editable="{ path: 'FormModel>Editable', formatter: 'checkEditable' }"/>

</t:template>

</t:Column>

<t:Column sortProperty="Primoranikd" filterProperty="Primoranikd" width="200px" visible="true" height="100px">

<Label text="{i18n>Primoranikd}" wrapping="true" textAlign="Center" width="100%" design="Bold"/>

<t:template>

<FlexBox height="100px" width="180px" renderType="Bare" direction="Column">

<FlexBox height="20px" width="180px" renderType="Div" direction="Row">

<Label text="{ path: 'FormModel>Performanshedef', formatter: 'setPrimOraniTargetText1' }" textAlign="Begin" width="70px" height="16px"/>

<Label text="{ path: 'FormModel>Performanshedef', formatter: 'setPrimOraniTargetText2' }" textAlign="End" width="110px" height="16px"/>

</FlexBox>

<micro:BulletMicroChart scale="%" targetValue="{ path: 'FormModel>Performanshedef', formatter: 'setPrimOraniTarget' }"

tooltip="Gerçekleşme Oranı" size="Responsive" showValueMarker="false" showThresholds="true">

<micro:actual>

<micro:BulletMicroChartData value="{ path: 'FormModel>Primoranikd', formatter: 'roundIntChart' }" color="Good"/>

</micro:actual>

<micro:thresholds>

<micro:BulletMicroChartData value="{ path: 'FormModel>Performanshedef', formatter: 'setPrimOraniVal1' }" color="Good" tooltip=""/>

<micro:BulletMicroChartData value="{ path: 'FormModel>Performanshedef', formatter: 'setPrimOraniVal2' }" color="Good" tooltip=""/>

<micro:BulletMicroChartData value="{ path: 'FormModel>Performanshedef', formatter: 'setPrimOraniVal3' }" color="Good" tooltip=""/>

</micro:thresholds>

</micro:BulletMicroChart>

</FlexBox>

</t:template>

</t:Column>

<t:Column sortProperty="Gerceklesenprimtoplam" filterProperty="Gerceklesenprimtoplam" width="140px" visible="true" height="100px">

<Label text="{i18n>Gerceklesenprimtoplam}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{ path: 'FormModel>Gerceklesenprimtoplam', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Oncekiyilprim" filterProperty="Oncekiyilprim" width="100px" visible="true" height="100px">

<Label text="{i18n>Oncekiyilprim}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{ path: 'FormModel>Oncekiyilprim', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Primdegisimorani" filterProperty="Primdegisimorani" width="100px" visible="true" height="100px">

<Label text="{i18n>Primdegisimorani}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="%{ path: 'FormModel>Primdegisimorani', formatter: 'roundInt' }" class="fontSize"/>

</t:template>

</t:Column>

<t:Column sortProperty="Onayciadsoyad" filterProperty="Onayciadsoyad" width="140px" visible="{FormModel>/columnVisible}" height="100px">

<Label text="{i18n>Onayciadsoyad}" wrapping="true" textAlign="Center" width="100%"/>

<t:template>

<Text text="{FormModel>Onayciadsoyad}" class="fontSize"/>

</t:template>

</t:Column>

</t:columns>

</t:Table>

</content>

</Panel>

</content>

<footer>

<OverflowToolbar>

<ToolbarSpacer/>

<Button enabled="{FormModel>/buttonEnabled}" type="Ghost" text="{i18n>onSave}" press="onSave" icon="sap-icon://save"/>

<Button enabled="{FormModel>/buttonEnabled}" type="Accept" text="{FormModel>/buttonApproveText}" press="onApprove" icon="sap-icon://accept"/>

</OverflowToolbar>

</footer>

</Page>

</pages>

</App>

</mvc:View>

[yogananda]

ozturq

Just thinking, you can use pagination with 20 records per page for scrollbar appears within the page

or introduce width to some 200px