Search code examples
sapui5progress

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>

enter image description here

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

Solution

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