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

[Former Member]

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;
		}

[SergioG_TX]

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

[Former Member]

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

[former_member484715]

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