1

I want to add a button property to an entry. For example;

I have an input field that cannot be edited:

Screenshot1

When I press the keyboard button it becomes editable:

Screenshot2

When the user clicks on the entry field without the need for a different button, it must run a different function. For example barcode scanner. Can an input that is not editable trigger a function? Or can an editable input trigger any function? How do I do this?

As in this application, the barcode event should be triggered by the input field, not the button.

3
  • > I want to trigger an event when I click ... --> Is that what you want? Or do the target users want this - being aware that this "feature" deviates from the common Fiori UX design? How should the user know that an uneditable field is clickable without experimenting with the mouse? Dec 11, 2020 at 19:48
  • Let me ask my question more accurately. What I want to do is create a barcode reader. When the user clicks on the input field, the barcode scanner must first be opened. If the user wants to enter a barcode number manually, they must make the field editable with the keyboard button next to the entry. I'm editing my question.*
    – user14647090
    Dec 11, 2020 at 19:56
  • 1
    The issue is that users might have difficulties to discover that the non-editable input field is actually clickable in the first place. And since non-editable input fields cannot even show a placeholder, your scanner feature becomes completely hidden behind an obscured click event somewhere. It gets worse if the app is running in a mobile device since there is no hand-indicator from the mouse. I added an alternative solution below: stackoverflow.com/a/65259716/5846045 Dec 11, 2020 at 23:16

3 Answers 3

3

As mentioned in my comment, the UX of the current approach in the question is highly questionable:

  • It's missing a signifier. There is no clear indication that only that non-editable field - in contrast to all other non-editable ones - triggers something once clicked.
  • Users, who'd prefer entering the barcode manually, would need to click on the keyboard-button first to make the input field editable, and then, once again, click on the input field to enter data.

Instead, consider to offer both options (entering manually and triggering the camera to scan) within a single input field via its value-help (F4) action:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment"
], async (Fragment) => {
  "use strict";
  
  const control = await Fragment.load({
    definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form"
      xmlns="sap.m"
      editable="true"
      layout="ColumnLayout">
      <Label text="Barcode Number" />
      <Input width="12rem"
        textAlign="Center"
        placeholder="XXXXXXXXX"
        showValueHelp="true"
        valueHelpIconSrc="sap-icon://bar-code"
        valueHelpRequest="alert('Scanner triggered!')"
      />
    </form:SimpleForm>`,
  });
  
  control.placeAt("content");
}));
<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>

UI5: sap.m.Input with barcode scanner as a value help icon

The value help icon can be set to a barcode one by assigning "sap-icon://bar-code" to the valueHelpIconSrc property (available since v1.84.0) in sap.m.Input.

This approach is beneficial for both - users and developers - because the behavior is now consistent with common user input scenarios, improving familiarity, and for developers, it highly reduces maintenance costs since there is less customization.


If the target UI5 version is lower than 1.84.0 or if the barcode has a fixed length, the control needs to be extended with the method addEndIcon. I explained this in another answer. Here is an example with an extended sap.m.MaskInput:

UI5: Extended sap.m.MaskInput with barcode scanner as a value help icon
See https://embed.plnkr.co/EzlF2tkvalJWvSEn?preview

2
  • This example doesn't work for version 1.52.13. Is a different control possible for the lower version?
    – user14647090
    Dec 13, 2020 at 14:59
  • @shrgrl The API addEndIcon is available since 1.58. According to the version overview, support for 1.52 ends this year. I could, of course, edit my answer just for the soon-to-be-deprecated version, but I'd rather encourage upgrading the UI5 version to the latest LTS-version (1.84) to benefit from overall performance improvements, stability, and security. UI5 takes backwards compatibility very seriously so that upgrading won't break existing applications. Dec 13, 2020 at 20:10
0

If your non-editable input is non-editable because it has a disabled attribute, you can't attach mouse events to it. (Actually you can, but it won't fire mouse events.)

If you want to fire a click event, you can add the event listener to a parent element, like a div in my example below.

Although it works in Chrome without it, you also need to set pointer-events to none on the input to make the clicks fall through to the parent element in Firefox.

const parentDiv = document.querySelector("div");
const input = document.querySelector("input");

parentDiv.addEventListener("click", (e) => {
  input.removeAttribute("disabled");
  input.focus();
  // or you can open the barcode scanner, etc.
});
input {
  font-size: 2rem;
  padding: 0.5rem 1rem;
}

input[disabled] {
  pointer-events: none;
}
<div>
  <input type="text" value="disabled field" disabled>
</div>

It could also work with label if the label contains the input:

<label>Barkod No:
  <input type="text" value="disabled field" disabled>
</label>
2
  • Thanks for the reply. But that's not what I want. I'll check it the editable event with the button. But when I click on the input field, I want to trigger a different function. eg. barcode scanner
    – user14647090
    Dec 11, 2020 at 20:03
  • Well, you can do anything inside the event handler. Dec 11, 2020 at 20:08
-1

Try this, replacing the displayDate funcion with your own enable function:

document.getElementById("myBtn").addEventListener("click", displayDate); 

Which then calls the CSS change:

input[type="text"]:enabled {

}

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

3
  • They want to trigger an event when someone clicks on the not-editable input field, not the button. Dec 11, 2020 at 18:44
  • It's the same. Just change the "myBtn" to the ID of your input field
    – Jayson
    Dec 11, 2020 at 19:17
  • It's not the same. Disabled elements don't fire mouse events. Check my answer. Dec 11, 2020 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.