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

嗨，专家们！我只想在语义详细信息页面中显示另一个视图 不要更改母版页！

---

有什么想法吗

您只需简单地使用。您将有三个视图（基本应用程序视图、主视图和详细视图）。您必须为详细信息页面创建一个新视图（Charts.View.xml）

在你身上添加一个目标、路线

在某个特定事件中，您可以使用

onSemanticButtonPress : function(){
    this.getOwnerComponent().getRouter().navTo("charts");
}

---

事实上，我修改了这个逻辑！我只使用了母版页！ 我在中添加了一个嵌套视图，其中包含详细信息
如果我点击一个按钮，我想把这个视图变成一个图表！我希望我能澄清这个问题

xmlns:u=“sap.ui.unified”
xmlns:core=“sap.ui.core”
xmlns:mvc=“sap.ui.core.mvc”
xmlns:semantic=“sap.m.semantic”>

下面的代码用于嵌套视图

<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>

---

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

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

您想导航到详细信息部分的新视图吗？您好stephen谢谢您的帮助yess！确切地说，我想在详细信息页面中显示图表，我可以删除旧内容并显示新内容吗？是的，您可以重复使用相同的片段并更改其聚合。查看此链接，您可能会对其有所了解

    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>