Selecting Segmented Button Options using SAPUI5

In my custom SAUI5 application, I have implemented two Segmented button items - Delivery and Collection. To differentiate between the two buttons and determine which one is clicked, I aim to pass "D" as a flag for Delivery and "C" as a flag for Collection from the front end. Each button contains a set of fields for data entry. However, being new to Custom SAUI5 applications, I am unsure how to achieve this separation. I would greatly appreciate expert assistance. Below is a snippet of my code:

 <SegmentedButton selectedKey="small" id="idSegment">
   <items>
     <SegmentedButtonItem id="idSegDel" text="Delivery" key="delKey" press="handleDelivery" />
     <SegmentedButtonItem id="idSegColl" text="Collection" key="colKey" press="handleCollection" enabled="true" />
   </items>
 </SegmentedButton>

handleCollection: function() {
    this.byId("idPanelDimension").setVisible(true);
    this.byId("idPanelDimension1").setVisible(true);
},

handleDelivery: function() {
    this.byId("idPanelDimension").setVisible(false);
    this.byId("idPanelDimension1").setVisible(false);
    this.byId("idWeight").setValue("");
    this.byId("idLength").setValue("");
    this.byId("idBreadth").setValue("");
    this.byId("idHeight").setValue("");
},
  OnCreate : function(){
   var oflagSeg = "D";  
   var oEntry = {Flag: oflagSeg,}   
}

Answer №1

A more efficient way to handle button events is by utilizing the "Select" event in the Segmented Button control instead of setting up individual press events for each button. This allows for a centralized control of all buttons within the segmented group. Check out the code I've written in the link provided below for a better understanding.

Answer №2

Thank you for your suggestion, I implemented it and everything is working perfectly. Here is the code I used:

var flagSegment = "";
    var segment = sap.ui.getCore().byId("idRetDel1--idSegment").getSelectedKey();
    if(segment == "keyDel"){
        flagSegment = "D";
    }else if(segment == "keyCol"){
        flagSegment = "C";

    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to iterate through a JSON array of various cookies using a for...in loop to extract the key value pairs?

I could be approaching this in the wrong way, so I welcome any feedback and suggestions... My current approach involves saving panel states in a custom UI by utilizing cookies during the click function with the js-cookie (formerly jquery-cookie) plugin. T ...

Implementing a Filter to Sort Text Files by Number in AngularJS

I am facing an issue with the filter in AngularJS. I am trying to display data where the condition is ordering=1 (a field in my file), but unfortunately, my code is not working. Below is my code: <script> function DanhMucController($scope, $http) ...

Encountering an error in Django: "Reverse for 'book' with the argument '(1,)' could not be found. Attempted pattern: '<int:flight_id/book\Z'"

Currently, I am in the process of learning the Django framework. Today, I experimented with retrieving a URL in an HTML template using the following code snippet: <form action="{% url 'book' flight.id %}" method="post"> ...

What is the best way to add a URL dynamically when a click event occurs?

Here is the code where I am making an API call: export const filteredProducts = (e) => { const radio = e.target.checked; return dispatch => { dispatch({type: actionTypes.TOGGLE_LOAD}); axios.get(radio ? `/store?limit=9&skip=0&subc ...

Utilizing Axios to pass multiple values through a parameter as a comma-separated list

Desired query string format: http://fqdn/page?categoryID=1&categoryID=2 Axios get request function: requestCategories () { return axios.get(globalConfig.CATS_URL, { params: { ...(this.category ? { categoryId: this.category } : {}) } ...

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

I have a dropdown with two options: Indian and Others. When I select Others, I want to display three textboxes - two with date pickers and one with a simple text input field. I have tried writing the following HTML code but I am unable to get the date pick ...

Choosing elements that are visible on the webpage using CSS selectors or XPath

The CSS selector for the parent element (which is always visible) can be found at this XPath: /html/body/section/div/div[2] After a few seconds (due to some JavaScript), one of its children will become visible. I need to locate and select this visible ...

The occurrence of a newline after the <br> tag can be witnessed in the saveHTML() method of

My PHP DOM API usage to generate markup seems to be running smoothly, except for an issue where a newline \n pops up after <br> tags in certain scenarios. I've created a reprex to showcase this: $document = new DOMDocument(); $document-> ...

How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Is there a more stylish approach to styling this HTML table using CSS display: table with Sass? Instead of using traditional table elements, I have created a table layout using display: table CSS styles applied to div elements: <div style="display: ...

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

Use JavaScript and Handlebars to compile any templates that have not yet been compiled

I have an HTML file containing various templates that I want to compile when the page loads. I'm looking for a way to either compile and store all templates in an array upfront, or compile templates on the fly as users navigate through the SPA. I am u ...

Guide to configuring an x-axis scroll bar for a handsontable

Utilizing the JarvisWidget library to create widgets, I encountered an issue with a table exceeding the width of the widget when using the handsontable library. I attempted to add a scrollbar by setting the CSS width to 100% and adding overflow-x:scroll, b ...

JavaScript - Adjusting Size of Images in Slideshow

My current project involves creating a slideshow in JavaScript where I only want to display half of the images. However, I have encountered an issue with some images having a width and height equal to 0 specifically in Chrome and Opera browsers. What could ...

Having issues with Vue.js v-repeat not displaying any content

I have just started learning about vue.js. I attempted to display a simple list, but it is not showing anything. Here is my code: <html> <head> <title>VUE Series</title> <link rel="stylesheet" type="text/css" ...

What distinguishes defining a function through a prototype versus as a class property?

Check out this code snippet: Apple defines its function using a prototype. Banana defines its function using a class property. var Apple = function(){} Apple.prototype.say = function(){ console.debug('HelloWorld'); } var Banana = functio ...

How to access variables with dynamic names in Vue.js

I'm curious if it's possible to dynamically access variables from Vue’s data collection by specifying the variable name through another variable. For instance, consider the following example: Here are some of the variables/properties: var sit ...

Is it possible to utilize hooks such as 'useState' within an async/await server component?

'use client' async function Teachers (){ const response = await fetch('http://localhost:8000/teachers', }) const data = await response.json(); const [showNames , setShowNames] = useState(false); // Unable t ...

Is it a good practice to whitelist inputs for preg_replace()?

How can whitelisting be implemented for input fields to prevent HTML and XSS injection? It seems like using preg_replace with regular expressions is a good initial step. Are there any other methods worth exploring? ...

Having trouble with the overflow-x function in Wordpress Twenty Thirteen theme?

Currently, I am facing an issue while trying to insert code into one of my blog posts. To maintain the formatting, I decided to enclose the code within <pre> tags. However, due to Twenty Thirteen's fixed width template, the <pre> tags get ...

Error in Bootstrap V5 Sass: Mixin not defined - when transitioning from @import to @use module system

Transitioning to the new SASS module system with @use from @import has presented some challenges, especially when working with bootstrap v5: https://i.sstatic.net/8Hy7W.png Old way: @import "~bootstrap/scss/bootstrap"; @import "~bootstrap/ ...