OnExpand Expand table
<content>
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<Link
text="Open image"
press="onPress"
/>
<Panel id="panel1" expandable="true" expanded="false" >
<content>
<Table id="tableId1" items="{/data}">
<columns>
<Column>
<Text text="column 1"/>
</Column>
<Column>
<Text text="column 2"/>
</Column>
<Column>
<Text text="column 3"/>
</Column>
<Column>
<Text text="column"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<l:VerticalLayout>
<l:content>
<ActionSelect
id="select1"
class="compact"
items="{/data}">
<items>
<core:Item key="{column}" text="{column}" />
</items>
</ActionSelect>
</l:content>
</l:VerticalLayout>
</cells>
</ColumnListItem>
</items>
</Table>
</content> </Panel>
<Panel id="panel2" expandable="true" expanded="false" >
<content>
<Table id="tableId2" items="{/data}">
<columns>
<Column>
<Text text="column 1"/>
</Column>
<Column>
<Text text="column 2"/>
</Column>
<Column>
<Text text="column 3"/>
</Column>
<Column>
<Text text="column"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<l:VerticalLayout>
<l:content>
<ActionSelect
id="select2"
class="compact"
items="{/data}">
<items>
<core:Item key="{column}" text="{column}" />
</items>
</ActionSelect>
</l:content>
</l:VerticalLayout>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
<Panel id="panel3" expandable="true" expanded="false" >
<content>
<Table id="tableId3" items="{/data}">
<columns>
<Column>
<Text text="column 1"/>
</Column>
<Column>
<Text text="column 2"/>
</Column>
<Column>
<Text text="column 3"/>
</Column>
<Column>
<Text text="column"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<l:VerticalLayout>
<l:content>
<ActionSelect
id="select3"
class="compact"
items="{/data}">
<items>
<core:Item key="{column}" text="{column}" />
</items>
</ActionSelect>
</l:content>
</l:VerticalLayout>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</l:content>
</l:VerticalLayout>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button type="Emphasized" text="Expand" press="onExpand" />
</Toolbar>
</footer>
Controller.js :
sap.ui.controller("download.s1", {
onInit: function() {
var a=this.getView().byId("tableId1");
var a1=new sap.ui.model.json.JSONModel("Model/data.json");
a.setModel (a1);
var c=this.getView().byId("tableId2");
var C1=new sap.ui.model.json.JSONModel("Model/data.json");
c.setModel (C1);
var d=this.getView().byId("tableId3");
var d1=new sap.ui.model.json.JSONModel("Model/data.json");
d.setModel (d1);
},
onPress: function(oEvent) {
window.open('images/img.png', 'Download');
var download = this.getView().byId("link");
download.downloadItem();
},
onExpand: function(oEvent) {
if(this.getView().byId("panel1").getExpanded())
this.getView().byId("panel1").setExpanded(false);
else
this.getView().byId("panel1").setExpanded(true);
if(this.getView().byId("panel2").getExpanded())
this.getView().byId("panel2").setExpanded(false);
else
this.getView().byId("panel2").setExpanded(true);
if(this.getView().byId("panel3").getExpanded())
this.getView().byId("panel3").setExpanded(false);
else
this.getView().byId("panel3").setExpanded(true);
}
});
Model/data.json :
{
"data" :[
{
"column1":"c1",
"column2":"c2",
"column3":"c3",
"column":""
},
{
"column1":"d1",
"column2":"d2",
"column3":"d3",
"column":"purple"
},
{
"column1":"e1",
"column2":"e2",
"column3":"e3",
"column":"orange"
}
]
}
1. Normal View :
2. when Click on Expand Button :
thanks..!