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.
Output:
Create the formatted text view with link to action as shown below.
Output:
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.
Output:
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."
});
oTextView.placeAt("textview");
// 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
//oFTV.placeAt("ftv");
// 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;
oLayout.createRow(
oLabel = new sap.ui.commons.Label({ id:"label1", text:"First Name", labelFor:"firstname"}),
oText = new sap.ui.commons.TextField({id: "firstname", required:true})
);
oLayout.placeAt("layout");
// creating a callout
var oCallout = new sap.ui.commons.Callout({
content: oFTV
});
oText.setTooltip(oCallout);
0 Comments:
Post a Comment