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>

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

假设我想为第一步添加日期选择器，为第二步添加表等等。

我该怎么做？

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中，您使用正确的步骤ID递增/递减路线图的selectedStep媒体资源，然后执行nav.to(target)或nav.back()

有关NavContainer

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

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

1 个答案: