如何在语义详细信息页面中更改视图

时间:2017-03-06 09:28:58

标签: javascript xml sapui5

My one page application 嗨,专家!我想仅在语义详细信息页面中显示另一个视图 并且不要更改母版页! 任何想法?!

3 个答案:

答案 0 :(得分:0)

您只需使用Routing即可实现此目的。您将有三个视图(Base App视图,Master& Detail)。您必须为详细信息页面(Charts.view.xml)创建一个新视图。

添加目标,路线manifest.json

"routes": [
            {
                "pattern": "",
                "name": "master",
                "target": [
                    "detail",
                    "master"
                ]
            },
            {
                "pattern": "Charts",
                "name": "charts",
                "target": [
                    "detail",
                    "charts"
                ]
            }
        ],
        "targets": {
            "master": {
                ....
            },
            "charts":{
                "viewName": "Charts",
                "viewLevel": 2,
                "viewId": "charts",
                "controlAggregation": "detailPages"
            },
            "detail": {
                ...
            }
        }

在某个活动中,您可以使用

导航到新视图
onSemanticButtonPress : function(){
    this.getOwnerComponent().getRouter().navTo("charts");
}

答案 1 :(得分:0)

实际上,我修改了这个逻辑!我只使用了母版页! 我添加了一个包含详细信息的嵌套视图 如果我点击按钮,我想将此视图更改为图表!我希望我澄清问题

    xmlns:u="sap.ui.unified"
        xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.m.semantic">
<core:Fragment fragmentName="query.sap.view.shell" type="XML"/>   
<SplitContainer>
    <masterPages>
        <semantic:MasterPage title="Master Page Title">
    <semantic:content>           

            <List   id="table"
            width="auto"
            class="sapUiResponsiveMargin"
            items="{
                path: '/Queries',
                sorter: {
                    path: 'QueryName',
                    descending: false
                }
            }"

        growingScrollToLoad="true">
    <headerToolbar>
        <Toolbar>
            <ToolbarSpacer/>
            <SearchField width="auto" search="onFilterSales"/>
        </Toolbar>
    </headerToolbar>
    <items>
        <ObjectListItem title="{QueryName}"   
            intro="Info Provider  : {CubeName}"

        > 
    <firstStatus>
        <ObjectStatus text="{GenerationTime}"/>
    </firstStatus>   

    </ObjectListItem>
    </items>
    </List>  

        </semantic:MasterPage>
    </masterPages>

    <detailPages>
        <semantic:DetailPage
                title="Detail Page Title">
         <mvc:XMLView viewName="query.sap.view.Table"/> 
        </semantic:DetailPage>

    </detailPages>
</SplitContainer>

以下代码适用于嵌套视图

<mvc:View
controllerName="query.sap.controller.Table"
xmlns:l="sap.ui.layout"
xmlns:model="sap.ui.model"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Table id="productsTable"
    items="{/ProductCollection}">
    <headerToolbar>
        <OverflowToolbar>
            <Title text="Products" level="H2"/>

            <ToolbarSpacer></ToolbarSpacer>
                    <Button icon="sap-icon://sort" press="onSortButtonPressed" />
            <!--  Add the Personalization button -->
            <!--<CheckBox text="Enable Personalization Grouping" select="onTableGrouping" />-->
            <!--  Add the Personalization button -->
            <Button icon="sap-icon://action-settings" press="onPersoButtonPressed" >
                <layoutData>
                    <OverflowToolbarLayoutData priority="NeverOverflow" />
                </layoutData>
            </Button>
        </OverflowToolbar>

    </headerToolbar>
    <columns>
        <Column id="productCol" width="12em"><Text text="Product" /></Column>
        <Column id="supplierCol" minScreenWidth="Tablet" demandPopin="true"><Text text="Supplier" /></Column>
        <Column id="dimensionsCol" minScreenWidth="Tablet" demandPopin="true" hAlign="Right"><Text text="Dimensions" /></Column>
        <Column id="weightCol" minScreenWidth="Tablet" demandPopin="true" hAlign="Center"><Text text="Weight" /></Column>
        <Column id="priceCol" hAlign="Right"><Text text="Price" /></Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier title="{Name}" text="{ProductId}" class="sapMTableContentMargin" />
                <Text text="{SupplierName}" />
                <Text text="{Width} x {Depth} x {Height} {DimUnit}" />
                <ObjectNumber number="{WeightMeasure}" unit="{WeightUnit}"
                    state="{
                        path: 'WeightMeasure',
                        formatter: 'query.sap.controller.Formatter.weightState'
                    }" />
                <ObjectNumber
                        number="{
                            parts:[{path:'Price'},{path:'CurrencyCode'}],
                            type: 'sap.ui.model.type.Currency',
                            formatOptions: {showMeasure: false}
                        }"
                        unit="{CurrencyCode}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

我想在此视图中添加一个按钮以显示图表

答案 2 :(得分:0)

您可以使用片段来显示内容。