如何銷燬和顯示SAPUI5中的內容？

Question

專家，我想開發一個按鈕，銷燬一張桌子並在同一視圖中顯示一個圖表。我怎樣才能做到這一點？

Answer 1

A ChartContainer控制將最適合您在這種情況下的需求。該控件允許您在圖表&和其他一些很酷的功能之間進行切換。控件中的切換按鈕將允許您在表格&圖表視圖之間切換。

這裏有一個簡單的例子

<mvc:View 
controllerName="com.sap.app.controller.Detail" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns:sc="sap.suite.ui.commons" 
xmlns:layout="sap.ui.layout" 
xmlns:u="sap.ui.unified" 
xmlns:core="sap.ui.core" 
xmlns:viz="sap.viz.ui5.controls" 
xmlns="sap.m"> 
    <sc:ChartContainer 
     id="chartContainer" 
     showFullScreen="true" 
     showPersonalization="false" 
     autoAdjustHeight="true" 
     showLegend="true" 
     contentChange="attachContentChange" 
     title="My Products"> 
     <sc:content> 
      <sc:ChartContainerContent 
       icon = "sap-icon://line-chart" 
       title = "Line Chart"> 
       <sc:content> 
        <viz:VizFrame id="chartContainerVizFrame" height="100%" width="100%" uiConfig="{applicationSet:'fiori'}"></viz:VizFrame> 
       </sc:content> 
      </sc:ChartContainerContent> 
      <sc:ChartContainerContent 
       icon = "sap-icon://table-view" 
       title = "Table"> 
       <sc:content> 
        <Table id="chartContainerContentTable" items="{/Products}"> 
        <columns> 
         <Column 
          width="12em"> 
          <Text text="Product" /> 
         </Column> 
         <Column 
          hAlign="Right"> 
          <Text text="Price" /> 
         </Column> 
        </columns> 
        <items> 
         <ColumnListItem> 
          <cells> 
           <Text 
            text="{ProductName}" /> 
           <Text 
            text="{UnitPrice}" /> 

          </cells> 
         </ColumnListItem> 
        </items> 
        </Table> 
       </sc:content> 
      </sc:ChartContainerContent> 
     </sc:content> 
    </sc:ChartContainer> 

</mvc:View> 

控制器代碼

onInit: function() { 


     var oVizFrame = this.getView().byId("chartContainerVizFrame"); 
     var oTable = this.getView().byId("chartContainerContentTable"); 

     var oModel = new sap.ui.model.json.JSONModel({ 
      Products : [ 
       {ProductName:"Laptop", UnitPrice:50}, 
       {ProductName:"Desktop", UnitPrice:20}, 
       {ProductName:"Mobile", UnitPrice:30} 
      ] 
     }); 
     var oDataset = new sap.viz.ui5.data.FlattenedDataset({ 
      dimensions: [{ 
       name: "Name", 
       value: "{ProductName}" 
      }], 
      measures: [{ 
       name: 'Price', 
       value: '{UnitPrice}' 
      }], 
      data: { 
       path: "/Products" 
      } 
     }); 

     oVizFrame.setDataset(oDataset); 
     oVizFrame.setModel(oModel); 
     oTable.setModel(oModel); 

     var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ 
      'uid': "valueAxis", 
      'type': "Measure", 
      'values': ["Price"] 
     }), 
     feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ 
      'uid': "categoryAxis", 
      'type': "Dimension", 
      'values': ["Name"] 
     }); 

    oVizFrame.setVizProperties({ 
     valueAxis: { 
      label: { 
       formatString: 'u' 
      } 
     }, 
     plotArea: { 
      dataLabel: { 
       visible: true, 
       formatString: "#,##0" 
      } 
     }, 
     legend: { 
      title: { 
       visible: false 
      } 
     }, 

     title: { 
      visible: true, 
      text: 'Product Price' 
     } 
    }); 



    oVizFrame.addFeed(feedValueAxis); 
    oVizFrame.addFeed(feedCategoryAxis); 


    },