Skip to Content

How can I add css style to controls sapui5? (ComboBox, TextArea)

Hello guys,

I'm trying to add CSS style to control. Whenever the value inside combobox is selected, the value submitted into the textarea.

I want to add css style for selected value into textarea.

Any ideas how can I do this?

regards,

Sergey

XML
<ComboBox showSecondaryValues="true" filterSecondaryValues="true" value="{/comboBoxValue}" selectedKey="{/comboBoxKey}" width="500px">
					<items>
						<core:Item text="" key=""/>
						<core:Item text="Orange" key="Orange"/>
						<core:Item text="Apple" key="Apple"/>
						<core:Item text="Apricot" key="Apricot"/>
						<core:Item text="Banana" key="Banana"/>
					</items>
				</ComboBox>
				<TextArea id="textarea" cols="60" value="{parts: [{path: '/comboBoxValue'}, {path: '/comboBoxKey'}], formatter: '.fnFormatter'}"
					width="100%"/>
JS
onInit: function() {


			// set explored app's demo model on this sample
			var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/countriesCollection.json"));
			oModel.setProperty("/comboBoxValue", "");
			oModel.setProperty("/comboBoxKey", "");
			this.getView().setModel(oModel);
		},


		fnFormatter: function(text, key) {
			var sText = "";
			if (text && key) {
				sText += "Selected fruits: " + text;
			}


			return sText;
		}
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 08 at 01:32 PM
    -1

    Sergey,

    i do not think you can add css to the text inside the text area. instead you could use an html control and you could use css / styles there instead

    https://sapui5.hana.ondemand.com/#/entity/sap.ui.core.HTML

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 20 at 05:59 AM

    Hi Sergey Easen,

    You can make use of the method addStyleClass(), and pass your css class as a string as parameter to the method, to set custom styles to your control.

    Regards,

    Arjun Biswas

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 28 at 06:23 AM

    Hi Sergey,

    All you need to do is add something like

    this.byId('textarea').addStyleClass(text);

    to your fnFormatter function and then add some custom CSS classes with the same names as the values in your ComboBox to your project.

    Best Regards,

    Hunter Young

    Add comment
    10|10000 characters needed characters exceeded