Dynamically populate a SAPUI5 form with labels and input fields, assigning unique IDs to the input fields without implementing any

While developing my application, I encountered a challenge with enabling users to dynamically add new labels and inputs into a form. The issue arises when the id for the new input is set as disabled by the user, but upon clicking the edit button, the enablement does not change to true. Consequently, the application fails to recognize the dynamically added input id in the form.

Below is a snippet of my code demonstrating this issue:

Add a new label and input to the existing form:

var _oSF2 = this.getView().byId("Extension_Form");
_oSF2.addContent(new sap.m.Label({
        text: "Classification"
    }));
_oSF2.addContent(new sap.m.Input({
              id : "idExtensionInput1",
              text : "text",
              enabled: false
        }));

Attempt to enable the new input:

handleEditPress: function () {
    this.getView().byId("idExtensionInput1").setEnabled(true);
}

Answer №1

When adding an input, make sure it is added to the correct view. You can access the input using

sap.ui.getCore().byId("idExtensionInput1")
, but the recommended way is to use this.getView().createId().


    var _oSF2 = this.getView().byId("Extension_Form");
    _oSF2.addContent(new sap.m.Label({
            text: "Classification"
    }));
    <!-- language: lang-js -->

    _oSF2.addContent(new sap.m.Input({
        id : this.getView().createId("idExtensionInput1"), //Use createId() for this.getView()
        text : "text",
        enabled: false
    }));

    handleEditPress: function () {
       this.getView().byId("idExtensionInput1").setEnabled(true);
    }

A helpful tip: Remember that the first parameter for a new sap.m.Input is the id. So write:

       
    _oSF2.addContent(new sap.m.Input(this.getView().createId("idExtensionInput1"), {
            text : "text",
            enabled: false
        }));

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 causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

I am currently working on obtaining images that are saved by their URL within a PHP file. These images are located within a directory named "images."

My code is incomplete and not functioning as expected. $.get("museums.php",function(data,status){ var response=''; //console.log(data); var json = $.parseJSON(data); museums = json.museums; for(let m in museums) { $("#na ...

Enable the icon click functionality in the text field, separate from the input field

I am looking to add an input field that users can unlock if necessary. My idea is to have a button visually connected to the input field, either placed inside or outside of it. To achieve this, I have utilized the Vuetify Text Field's append-outer-i ...

Transforming jQuery script into AngularJS

I am currently working on a project with the Ionic framework that utilizes AngularJS. I am wondering if it is possible to rewrite the following code from jQuery to AngularJS? jQuery(function($) { var states = { 'USA': ['Arizona ...

Sending an array from the front-end to the back-end in Laravel with JavaScript

I am experiencing difficulty passing a objs array to a function in a Laravel controller using ajax. Unfortunately, I am not receiving any data after the post request. <script> var itemCount = 0; var objs=[]; $(document).read ...

Using the PrimeNG checkbox alongside a reactive form with an array

I am attempting to populate my array of objects in order to map the Primeng checkbox and retrieve the values for selected check boxes. I have experimented with FormControlName, but it is returning undefined after submission. Below is a basic code snippet ...

Position control in the Google Maps V2 interface

I am currently utilizing Google Maps API v2 with the default UI because I find the controls to be more visually appealing when set to default. <script type="text/javascript"> var map = null; function load() { map = new GMap2(document.get ...

What is the best way to pass an input value into a function when a form is submitted in Angular 6?

When I press enter, my code works perfectly and the performSearch function runs successfully. However, when I attempt to run the function by clicking the submit button, I encounter the following error: Error: cannot read property of undefined This is m ...

How can I apply styling to Angular 2 component selector tags?

As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...

Guide on changing image source using a function

I am looking to dynamically set the img src="" attribute using a JavaScript function that changes the image based on a variable and checks its values: Here is the JavaScript code in the file: function myFunctionstatus(){ var ledactual = document.getE ...

Updating the options list of an Autocomplete component post-render: A step-by-step guide

I've encountered an issue with a function that retrieves a JSON array from a URL containing a list of options to be displayed in my Autocomplete component. function DisplayOptions() { async function GetOptions() { options_list = await fetc ...

How can you identify when a Vuetify radio button is re-selected?

Currently, I am developing a wizard that involves triggering navigation when a radio button is selected. Users should also be able to go back and change their previous choices. However, one issue I have encountered is the difficulty in detecting a re-selec ...

Is it possible to combine two HTML tables by using JavaScript Objects as the source of data?

I have an array containing multiple arrays, and I want to create objects from each sub-array and then combine them into a single table. While I've been able to accomplish this, I'm looking for assistance on how to use these objects to create one ...

Explore linked MongoDB collections using Node.js and Handlebars to access relevant documents

As a novice web developer, I've taken on the challenge of creating a bug-tracking platform for my project. The main issue I'm facing is displaying the user's name instead of their user ID in the "Reported by" column on the dashboard screensh ...

`Storing modified PDF containing interactive form elements using integrated Chrome viewer and transferring it to a remote server`

Our current setup utilizes the default embedded Chrome PDF viewer to showcase a PDF document with interactive form fields, enabling users to conveniently fill out the form. Once completed, they can click on the download button to save the form with or with ...

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

I am currently working with Material UI and React Grid from DevExtreme to build a table that includes an input field of type date. However, when I attempt to enter the date, it does not register the change in value until I reach the year field, at which po ...

Unable to execute ajax on dom ready in Internet Explorer 9

Here is some code that needs to be executed on DOM ready without any user interaction: if($.browser.msie){ console.log("Using getJSON"); $.getJSON(baseUrl,function(){ alert('hi'); }); }else{ setTimeou ...

Trouble with PUT request for updating user password using Express.js with mongoose

I've encountered a puzzling issue while working on my Express.js application. Specifically, I have created an endpoint for updating a user's password. Surprisingly, the endpoint functions flawlessly with a POST request, but fails to work when swi ...

Discover the autocomplete features derived from concealed links within the webpage

Is it feasible to dynamically pass 300 or fewer strings from anchor tags on a page to jQuery's array of availableTags? var availableTags = [ "my tag", "my tag1" ]; List of Tags The server provides me with a list of tags in a specific format, limit ...

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...