如何在sapui5中将视图添加到路线图的步骤中

我希望在sapui5中将视图（或工作流）添加到路线图步骤中。我是sapui5的新手，有人能帮我解决这个问题吗

我的代码：

<script>
    //create the RoadMap control
    var oRMap = new sap.ui.commons.RoadMap("rMap");

    //create the RoadMap steps
    var oStep1 = new sap.ui.commons.RoadMapStep("step1", {label: "Step 1"});
    var oStep2 = new sap.ui.commons.RoadMapStep("step2", {label: "Step 2"});
    var oStep3 = new sap.ui.commons.RoadMapStep("step3", {label: "Step 3"});

    //add steps to the RoadMap
    oRMap.addStep(oStep1);
    oRMap.addStep(oStep2);
    oRMap.addStep(oStep3);

    //Set the first step as selected
    oRMap.setSelectedStep("step1");

    //Set the number of visible steps
    oRMap.setNumberOfVisibleSteps(3);

    //Place the control on the UI   
    oRMap.placeAt("sample1");
</script>

//创建路线图控件
var oRMap=new sap.ui.commons.RoadMap（“rMap”）；
//创建路线图步骤
var oStep1=new sap.ui.commons.Roadmap步骤（“步骤1”，{label:“步骤1”}）；
var ostp2=new sap.ui.commons.Roadmap步骤（“步骤2”，{label:“步骤2”}）；
var oStep3=new sap.ui.commons.Roadmap步骤（“步骤3”，{label:“步骤3”}）；
//为路线图添加步骤
oRMap.addStep（oStep1）；
oRMap.addStep（oStep2）；
oRMap.addStep（oStep3）；
//将第一步设置为选中状态
oRMap.SETSELECTED步骤（“步骤1”）；
//设置可见步数
oRMap.setNumberOfVisibleSteps（3）；
//将控件放在UI上
oRMap.placeAt（“样本1”）；

这将显示我的应用程序中的三个步骤。我想要的是为每个步骤添加视图

假设我想为第一步添加一个日期选择器，为第二步添加一个表，依此类推

---

我如何才能做到这一点？

您可以通过多种方式实现这一点。我将在路线图下方创建一个容器，在其中显示不同的视图，每个步骤一个。您可以使用NavContainer来处理导航

---

编辑：可以这么简单（我使用了XMLView符号，因为我发现编写这些符号要容易得多，但JSVIEW当然也是如此）：

在

doNext

和

doPrevious

中，然后使用正确的步骤ID递增/递减路线图的

selectedStep

属性，然后执行

nav.to（target）

或

nav.back（）

有关导航容器中的信息，请参见
您能否帮助我编写一些代码，因为我对这方面非常陌生@资格。
<VBox>
    <c:RoadMap id="roadMap">
        <c:steps>
            <c:RoadMapStep id="step1" label="Step 1" />
            <c:RoadMapStep id="step2" label="Step 2" />
            <c:RoadMapStep id="step3" label="Step 3" />
        </c:steps>
    </c:RoadMap>
    <NavContainer width="100%" height="20rem">
        <Page title="Step 1">
            <DatePicker />
            <Button icon="sap-icon://feeder-arrow" text="Next step" press="doNext" />
        </Page>
        <Page title="Step 2">
            <Text text="Some data"/>
            <Button icon="sap-icon://nav-back"     text="Previous step" press="doPrevious" />
            <Button icon="sap-icon://feeder-arrow" text="Next step"     press="doNext" />
        </Page>
        <Page title="Step 3">
            <Text text="Some more data"/>
            <Button icon="sap-icon://nav-back"     text="Previous step" press="doPrevious" />
            <Button icon="sap-icon://feeder-arrow" text="Next step"     press="doNext" />
        </Page>
    </NavContainer>
</VBox>