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

Question

我希望将视图（或工作流）添加到 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>

这将在我的申请中显示三个步骤。我想要的是为每个步骤添加视图。

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

我该怎么做？

Answer 1

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

编辑：它可以像这样简单（我使用 XMLView 表示法，因为我发现这些更容易编写，但同样适用于 JSViews 当然）：

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

在 doNext 和 doPrevious 中，然后 increment/decrement 路线图的 selectedStep 属性使用正确的步骤 ID，然后执行 nav.to(target) 或 nav.back()

有关 NavContainer

中的信息，请参阅 https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.NavContainer/preview

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

How to add views to the steps of a roadmap in sapui5

sapui5