combobox

SAP UI5 combo box - disable editing in the control

Pre-requisites

1.sapui5 framework
2.basic javascript knowledge

What we are going to do is simple.We will create a combobox and then we will access HTML DOM and disable the input field that is contained in the combobox.



Steps
1.Create ComboBox control and place it in the page.


var comboboxName = new sap.m.ComboBox("comboboxId", {
    items: [sap.ui.core.Item({
        text: "item1"
    })]
});
2.Access HTML DOM inside onAfterRendering method and disable input field of combobox.


comboboxName.onAfterRendering = function() {
    if (sap.m.ComboBox.prototype.onAfterRendering) {
        sap.m.ComboBox.prototype.onAfterRendering.apply(this);
    }
    document.getElementById("comboboxId-inner").disabled = true;
}
See it in action below

ComboBox Editing Disabled

This method is not recommendable.But I didnt find any other way to achieve this.Also keep in mind that if sapui5 development team change innerworking of combobox this code may not work if sapui5 libraries are updated.
If you enjoyed this post, Please Share!!

2 comments :

  1. This approach is not recommended by sapui5.

    ReplyDelete
    Replies
    1. This is not recommended approach.This is just a workaround. You may use sap.m.Select if you dont want the user to type in inputs.

      Delete

Powered by Blogger.