2015-04-08 29 views
1

我正在尋找將視圖(或工作流)添加到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> 

這將顯示在我的應用程序三個步驟。我想要的是爲每個步驟添加視圖。

說我要添加日期選擇器的第一步,表第二步等..

我怎樣才能做到這一點?

回答

0

您可以通過多種方式實現此目的。我會在路線圖下面創建一個容器,在其中顯示不同的視圖,每個步驟一個。你可以使用一個NavContainer其處理導航


編輯:(因爲我發現這些遠更容易編寫,但同樣適用於當然JSViews我用xmlView中表示)也可以是這樣簡單:

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

doNextdoPrevious然後你增加/用正確的一步ID遞減路線圖selectedStep財產,並執行一個nav.to(target)nav.back()

請參閱https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.NavContainer/preview瞭解NavContainer中的信息

+0

請問您可以幫我解決一些問題,因爲我對此很新... @qualiture。 –

+0

查看更新的答案 – Qualiture

相關問題