Hi everyone.
How to achieve column flexibilty (meaning: user should be able to decide which column he wants to hide/unhide. Note:please refer screenshot provided) in ui table.
I am able to achieve the settings button and ,inside it ok and cancel buttons using fragment, but i dont know how to get the column names ,can anyone help me to get it
<mvc:View controllerName="testproject1.controller.TestView1"
xmlns="sap.ui.table"
xmlns:mvc="sap.ui.core.mvc"
xmlns:u="sap.ui.unified"
xmlns:c="sap.ui.core"
xmlns:m="sap.m"
height="100%">
<m:Page id="_IDGenPage1"
showHeader="false"
enableScrolling="false"
class="sapUiContentPadding">
<m:content>
<m:Button id="_IDGenButton1" text="Settings" press="onOpenDialog"/>
<!-- <m:ScrollContainer id="_IDGenScrollContainer1"> -->
<Table id="UITab1"
rows="{/Acc_DOCSet}"
paste="onPaste"
ariaLabelledBy="title">
<extension>
<m:OverflowToolbar id="_IDGenOverflowToolbar1" style="Clear">
<m:Title id="title" text="Products"/>
</m:OverflowToolbar>
</extension>
<columns>
<Column id="_IDGenColumn1" width="11rem">
<m:Label id="_IDGenLabel1" text="Company Code" />
<template>
<m:Text id="_IDGenText1" text="{Bukrs}" wrapping="false" />
</template>
</Column>
<Column id="_IDGenColumn2" width="11rem">
<m:Label id="_IDGenLabel2" text="Documnet Number" />
<template>
<m:Text id="_IDGenInput1" text="{Belnr}"/>
</template>
</Column>
<Column id="_IDGenColumn3" width="6rem" hAlign="End">
<m:Label id="_IDGenLabel3" text="Fiscal Year" />
<template>
<m:Label id="_IDGenLabel4" text="{Gjahr}" />
</template>
</Column>
<Column id="_IDGenColumn4" width="6rem" hAlign="End">
<m:Label id="_IDGenLabel5" text="Document Type" />
<template>
<m:Label id="_IDGenLabel6" text="{Blart}" />
</template>
</Column>
<Column id="_IDGeColumn2" width="11rem">
<m:Label id="_IDGeLabel2" text="Document Date" />
<template>
<m:Text id="_IDGeInput1" text="{Bldat}"/>
</template>
</Column>
<Column id="_IDGenColun2" width="11rem">
<m:Label id="_IDGenabel2" text="Posting Date" />
<template>
<m:Text id="_IDGnInput1" text="{Budat}"/>
</template>
</Column>
<Column id="_IDGenColmn2" width="11rem">
<m:Label id="_IDGenLbel2" text="Period" />
<template>
<m:Text id="_IDenInput1" text="{Monat}"/>
</template>
</Column>
<Column id="_IDGenColum2" width="11rem">
<m:Label id="_IDGeLbel2" text="Entered at" />
<template>
<m:Text id="_IDGennput1" text="{Cputm}"/>
</template>
</Column>
<Column id="_IDGenCoumn2" width="11rem">
<m:Label id="_IDGebel2" text="Translatn Date" />
<template>
<m:Text id="_IDnInput1" text="{Wwert}"/>
</template>
</Column>
<Column id="_IGenColun2" width="11rem">
<m:Label id="_IDGenLabe2" text="User Name" />
<template>
<m:Text id="_IDennput1" text="{Usnam}"/>
</template>
</Column>
</columns>
</Table>
<!-- <m:ViewSettingsDialog id="settingsDialogCustomTab">
<m:customTabs>
<m:ViewSettingsCustomTab id="app-settings" icon="sap-icon://action-settings" title="Settings" >
</m:ViewSettingsCustomTab>
</m:customTabs>
</m:ViewSettingsDialog> -->
</m:content>
</m:Page>
</mvc:View>
code for controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/Fragment",
'sap/m/p13n/Engine',
'sap/m/p13n/SelectionController'
],
/**
* @Param {typeof sap.ui.core.mvc.Controller} Controller */
function (Controller,Fragment) {
"use strict";
return Controller.extend("testproject1.controller.TestView1", {
onInit: function () {
},
onOpenDialog: function() {
var oView = this.getView();
if(!this.byId("demoDialog")) {
Fragment.load({
id: oView.getId(),
name:"testproject1.view.Settings",
type: "XML",
controller: this
})
.then(function (oDialog) {
oView.addDependent(oDialog);
oDialog.open();
});
}
else {
this.byId("demoDialog").open();
}
},
onOKDialog: function (oEvent) {
this.byId("demoDialog").close();
var oInput = this.byId("idInput")
},
onCloseDialog: function (oEvent) { this.byId("demoDialog").close();
var oInput = this.byId("idInput")
}
});
});
code for fragment:
<core:FragmentDefinition xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns:u="sap.ui.table"
xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id="demoDialog" title="View Settings">
<content>
<Button id="btn" text="OK" press="onOKDialog"></Button>
<Button id="btn1" text="Cancel" press="onCloseDialog"></Button>
</content>
</Dialog>
</core:FragmentDefinition>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.