Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com

Formatted text view, Link and Call out

Text View:

Text view is a control for displaying the text. This text can contains value such as /n which will be replaced in the browser with the tag <br/> and introduce a new line. Other formatting such as changing the color of the text and wrapping them are possible.

Formatted Text View:

The Formatted Text View is designed to make mixed formatting of text within one control possible. Similar to text view, there is a limited set of tags and attributes which is allowed for usage inside this control.

Within the text that is displayed, the text can be formatted with bold, italic and so on. In addition to that other controls like links can also be added within the text.

Part 1: Create an application project.

Refer to the link button to create the application project.

I have created an application project as below.

Project Name: demo_ftv

View name: Main

Development paradigm: javascript

Part 2: Create the UI controls.

Create a text view control in the createContent function as shown below.




Create the formatted text view with link to action as shown below.




Call Outs:

Call out is a small pop up that shows the user more information on the selected UI control.

In this example we will create a simple form and insert the call out for the text field. The text that appears in the call out will be formatted text created earlier.


Set the callout as the tool tip for the text field.




Code in the Main View(Create Content ):

// Place holder for text

document.write('<p id="textview"></p>');

// Creating text view

var oTextView = new sap.ui.commons.TextView({

id:"textview" ,

text: "This is a simple text."



// Place holder for text view

document.write('<p id="ftv"></p>');

// SHTML Text

// A simple text with HTML formatting and place holder to insert the link is created, Using embed tag we

// are creating a data index location and we will set the link in that location

var sHTML = '<strong>Further information</strong> refer to the link <embed data-index=\"0\">';

// Link to action

var oLink = new sap.ui.commons.Link({

id: "link1",

text:"Click here", // Text for link

href:"http://www.google.com", // Target location

target:"_blank" // Open in new window


// Formatted text view

var oFTV = new sap.ui.commons.FormattedTextView("ftv1");

oFTV.setHtmlText(sHTML); // Adding the HTML text to FTV

oFTV.addControl(oLink); // Control will be added to first available index


// Creating a simple form

document.write('<p id="layout"></p>');

var oLayout = new sap.ui.commons.layout.MatrixLayout({id:"layout1", layoutFixed: false });

var oLabel,oText;


oLabel = new sap.ui.commons.Label({ id:"label1", text:"First Name", labelFor:"firstname"}),

oText = new sap.ui.commons.TextField({id: "firstname", required:true})



// creating a callout

var oCallout = new sap.ui.commons.Callout({

content: oFTV



About Arun


Post a Comment

Powered by Blogger.