how to change segmented button to next on clicked

问题

The segmented button is as follows:

<SegmentedButton width="98%">
    <items>
        <SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
        <SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
        <SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
    </items>
</SegmentedButton>

and Next button as:

<Button text="Next" press="onPressNext" enabled="true"></Button>

previous button as:

<Button text="Previous" press="onPressPrevious" enabled="true"></Button>

How to write the JS code so that when Next is pressed INDICATOR2 should be active and on second press INDICATOR3 should be active

And when on INDICATOR2 if Previous is pressed both INDICATOR2 and INDICATOR1(which is current one) should be active

I have no knowledge on JS at least to try , any help so that I would go through it and learn, TIA

回答1:

You can grab the list of items from the SegmentedButton, get the next or previous item respecitively, and set it as the selected item.

(I added an id to the SegmentedButton in below example)

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("myController", {
    onPressNext: function() {
      var sb = this.byId("segmentButton1");
      var items = sb.getItems().map(function(itm) { return itm.getId() });
      var idx = items.indexOf(sb.getSelectedItem()) + 1;
      if(idx < items.length) {
        sb.setSelectedItem(items[idx]);
      }
    },
    
    onPressPrevious: function() {
      var sb = this.byId("segmentButton1");
      var items = sb.getItems().map(function(itm) { return itm.getId() });
      var idx = items.indexOf(sb.getSelectedItem()) - 1;
      if(idx > -1) {
        sb.setSelectedItem(items[idx]);
      }
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

<html>

<head>
  <meta charset="utf-8">
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_fiori_3' data-sap-ui-libs='sap.m'></script>
  <script id="myView" type="sapui5/xmlview">
    <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController">

      <SegmentedButton width="98%" id="segmentButton1">
        <items>
          <SegmentedButtonItem text="INDICATOR1" class="progress" id="before" />
          <SegmentedButtonItem text="INDICATOR2" class="progress" id="present" />
          <SegmentedButtonItem text="INDICATOR3" class="progress" id="after" />
        </items>
      </SegmentedButton>

      <Button text="Previous" press="onPressPrevious" enabled="true" />

      <Button text="Next" press="onPressNext" enabled="true" />

    </mvc:View>
  </script>
</head>

<body class='sapUiBody'>
  <div id='content'></div>
</body>

</html>

回答2:

I think you create event like onclick and change OR add style class for example active attribute

<items>
        <SegmentedButtonItem text="INDICATOR1" class="progress active" id="before"/>
        <SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
        <SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>

and when you click next then you have to remove active class from INDICATOR1 and then append active class to next indicator

<items>
        <SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
        <SegmentedButtonItem text="INDICATOR2" class="progress active" id="present"/>
        <SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>

回答3:

Please write an onclick function for the next button something like below

function onNextClick(){
//Make the css of INDICATOR1 normal and INDICATOR2 || INDICATOR3 active
}

来源：https://stackoverflow.com/questions/58503375/how-to-change-segmented-button-to-next-on-clicked

标签

sapui5

progress