What is the method for displaying specific text lines in italic format within the TextArea Tag in SAP Fiori Apps?



I need to format specific text lines in the "TextArea" tag of my SAP Fiori App in italic.

The data for my text area is retrieved from a SAP OData Service as an Array. I am currently displaying the data using a loop and setting it as follows in my JavaScript code:

var tempcomm = this.getView().byId("txtArea"); 
oModel.setData({
                text_listSet : data   //where 'data' contains the final data
            }); 
tempcomm.setModel(oModel);


Below is a sample of the XML View code:-

<TextArea id="txtArea" 
                        value="{/text_listSet}"
                        height="20rem" growing="true" editable="false" />


Current output:-

test Line 1.
ok, good - line 2.

test Line 3.
ok, good - line 4.

Desired output:-

test Line 1- formatted in italic style.
ok, good - line 2.

test Line 3 - formatted in italic style.
ok, good - line 4.

Note:- The Text Area is set to be non-editable.

Answer №1

In order to format text within a HTML 5 textarea using sapui5, you can't rely on the typical functionality provided by the element. Instead, you'll need to create your own custom element with contenteditable="true" attribute and then apply formatting using <i></i> or <span></span> tags along with CSS properties like font-style:.

For more information on contenteditable, check out the documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

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

`The challenge of navigating within Material UI tabs in a React js project`

In my current project, I am utilizing React Js along with the Material UI Tabs component to switch between two different components. However, I have encountered an issue where when I navigate to Tab 2 or Tab 1 by clicking on them, the route changes and th ...

Error message in JavaScript saying "The response string is undefined

I am working on a program built in angularjs. Currently, I receive JSON data from the server when online, but I am now developing an offline mode for the application. Despite trying to tackle the issue, I am unable to identify why I cannot resolve it. In ...

What is the best way to organize two separate arrays based on a single shared variable?

I have two separate arrays containing information. One array includes the title of each national park and other related data, while the second array consists of alerts from the entire NPS system. The common factor between these arrays is the parkCode. How ...

Transmit information via AJAX using the React Flux design pattern

Here is my React code snippet: var AddRecord = React.createClass({ getInitialState: function() { return { Data: [] } }, sendData : ...

When an array in Javascript is sent through AJAX, it is received as a singular string

Trying to send an object with an array of strings in JavaScript to a C# ASP.NET API, but for some reason the API is receiving the array as a single string instead of an array of strings. The issue seems to be with the email property only. vm = { ...

Combine theme configuration options within Material-UI

I am interested in setting up custom theme rules in Material-UI. My goal is to create both light and dark themes and extend them with some shared settings. My initial idea was to store the common settings for the light and dark themes in a separate variab ...

Resolving the issue of encountering 'Failed to load resource: the server responded with a status of 500' in React and express

Attempting to upload an image to a local folder using multer and React resulted in an Internal Server Error. The chrome debugger indicated that the server responded with a status of 500. It seems like the data format being sent to the server side is incorr ...

Choose the initial unordered list within a specific division through Jquery

In a div, there is a ul. Inside a li, there is another ul. The task is to select only the first ul inside the div using jQuery. The HTML markup: <div class="parent"> <div class="clearfix"> <div class="another-div"> <ul cl ...

Is there a way to update the parent component when changes occur in the child component?

I have been working on a book tracking application that allows users to keep track of the books they have read or plan to read. The app is built using Vue.js on the front end and Express.js on the server side. It consists of three lists or categories for o ...

The CKEditor Source Dialog reveals HTML entities that have not been saved in the database

Upon clicking the 'Source' button in the menu bar, I noticed that the HTML source of the page is displayed in a way that shows the code like this: <p>This&#32;is&#32;how&#32;the&#32;code&#32;is&#32;showing&#32;n ...

Ways to track all requests completed in Nuxt 3

I am looking to create a unique loading page that conceals itself once all requests and static data have been loaded, including static images and libraries. How can I determine when all requests and static data have finished loading? I have attempted the ...

Problem with layout design (utilizing float properties)

I'm curious why the paragraph content gets sandwiched between two floated divs. I'd like the paragraph content to appear below the header. Also, why aren't the line breaks showing in the paragraph? Check out this JS Fiddle link for referenc ...

Using v-for with TailwindCSS animations seems to cause issues

I'm currently working on implementing a list of pop-up messages in the upper right corner of the screen. These messages should disappear when clicked and include a slide-fade transition effect. The transition animation works fine when there is only o ...

Encountering an incorrect number of parameters for "undefined" during the deployment of a smart contract

I am facing an issue while attempting to deploy my first Voting contract on the testRPC. The error seems to arise from the arguments parameter in the code snippet below. When I tried passing an empty array, it gave an error stating "Got 0 expected 1!". Si ...

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Upon using angular-ui-router, I encountered the following error while clicking on the links view1 and view2 in index.html. The same example worked with the regular angular router. Is there something missing in the code? Thanks. TypeError: promise.catch i ...

The background image will not repeat to completely cover the height

Click here to view my issue. I have set the background image to repeat the entire height, but it's not behaving as expected. Here is my CSS #wrapper { margin: 0px; padding: 0px; background: url(img02.jpg) repeat-x left top; } I attempt ...

Combining arrays to create a single object: A step-by-step guide

Here is the current output I have, which contains multiple arrays: ["{"486|575":2,"484|568":4}", "{"486|575":2,"484|568":4}", "{"481|570":1,"482|564":1}"] My goal is to combine these arrays into an object with the following output using JavaScript/jQuery ...

Automatically fill in form fields with data from a JSON file as soon as the user enters a value

How can I retrieve the bank name, branch, city, and district from a JSON array? Below is the contents of my results.json file: { "ifsc": [{ "ifsc": "PUNB0000100", "bank": "PUNJAB NATIONAL BANK", "city": "ABOHAR ...