CODEWITHSUNDEEP
sapui5
mani
mani

Reputation: 1044

how to work with SAP UI5 xml views

I am new to SAP UI5.

Here my task is to convert javascript code to xml view. Here javascript is like:

 var sHtmlText = '<strong>Aliquam erat volutpat.</strong><br>Vivamus vitae felis nec lacus ultricies dapibus condimentum quis felis.';
    sHtmlText += 'Some link goes here:<embed data-index=\"0\">';

    var oLink2 = new sap.ui.commons.Link("l2", {
        text : "Click me",
        href : "http://scn.sap.com/welcome",
        title : "SAP Community Network",
        target : "_blank"
    });

    var oFTV2 = new sap.ui.commons.FormattedTextView("otv2");
    //set the text with placeholders inside
    oFTV2.setHtmlText(sHtmlText);
    //add the desired control to the FormattedTextView
    oFTV2.addControl(oLink2);

    var oCallout = new sap.ui.commons.Callout({
        content : oFTV2
    });

    // create a sample form with two fields and assign a callout to each of them
    var oLayout = new sap.ui.commons.layout.MatrixLayout({
        layoutFixed : false
    });
    var oTextField, oLabel;
    oLayout.createRow(
        oLabel = new sap.ui.commons.Label({text:"First name:", labelFor:"firstname1"}),
        oTextField = new sap.ui.commons.TextField("firstname1", {required:true, value:"John"})
    );
    oTextField.setTooltip(oCallout);
    // display it
    oLayout.placeAt("sample2");

While running the above code i am getting the text field with a label and input hover popup.

Now my task is to convert the above js view to XML View. I am getting confused.

Please suggest me the exact procedure (generalized manner) for converting the above JS view to XML view.

Upvotes: 0

Views: 6255

Answers (2)

Qualiture
Qualiture

Reputation: 4920

A quick (and dirty) way is to simply run your application, and when in the view you want to convert to XML, open the SAPUI5 Diagnostics screen (Ctrl-Alt-Shift S), show the Control Tree panel, select the topmost UIArea element, click the 'Export' tab on the right and click the 'Export to XML' button :)

Upvotes: 5

Abul
Abul

Reputation: 119

First you need to add name space for your sap.ui.Commons xmlns:com="sap.ui.Commons" in your xml view then write code like this

for more reference please check xml view developer guide

and example here Example

click on Expample in Master side then select on Detail Side and do show code

Upvotes: 1

Related Questions