How to use layout.Grid in XML view SAPUI5?

sapui5
neformal picture neformal · May 22, 2014 · Viewed 14.1k times · Source

I have that code. (https://openui5.hana.ondemand.com/#test-resources/sap/ui/layout/demokit/Grid.html)

var oGrid1 = new sap.ui.layout.Grid({
    hSpacing: 1,
    vSpacing: 1,    
    content: [
        new sap.ui.commons.TextView({
            text : 'Text spanned over 4 cols on large, 6 cols on medium, and 12 cols on small screens.',
            layoutData : new sap.ui.layout.GridData({
                span : "L4 M6 S12"
            })
        }),
        new sap.ui.commons.TextView({
            text : 'Text spanned over 4 cols on large, 6 cols on medium, and 12 cols on small screens.',
            layoutData : new sap.ui.layout.GridData({
                span : "L4 M6 S12"
            })
        }),
        new sap.ui.commons.TextView({
            text : 'Text spanned over 4 cols on large, 6 cols on medium, and 12 cols on small screens.',
            layoutData : new sap.ui.layout.GridData({
                span : "L4 M6 S12"
            })
        })
    ]
});


oGrid1.placeAt("sample1");

And I can't understand how to use following thing in XML notation.

layoutData : new sap.ui.layout.GridData({span : "L4 M6 S12"})

Answer

Jasper_07 picture Jasper_07 · May 22, 2014

SAPUI5 Diagnostics CTRL+ALT+SHIFT+S ->XML View Conversion - a utility that allows you to convert an existing view to XML or HTML view markup

<sap.ui.commons:TextView text="Text spanned over 4 cols on large, 6 cols on medium, and 12 cols on small screens.">
    <sap.ui.commons:layoutData>
        <sap.ui.layout:GridData span="L4 M6 S12" spanL="0" spanM="0" spanS="0" indentL="0" indentM="0" indentS="0" spanLarge="0" spanMedium="0" spanSmall="0" indentLarge="0" indentMedium="0" indentSmall="0"></sap.ui.layout:GridData>
    </sap.ui.commons:layoutData>
</sap.ui.commons:TextView>

Related questions

SAPUI5: How to filter data with 2 or more values

I'm currently trying some stuff with/in SAPUI5 and I've implemented a very simple search like this: var filters = []; var query = evt.getParameter("query"); if (query && query.length > 0) { var nameFilter = new sap.ui.model.Filter("name", sap.…

Read More
Error "validate_display:255 error 3008 (EGL_BAD_DISPLAY)" by Toutorial

I'm new to javascript and android and I want to program a multi page app with SAPUI5. For this I found a tutorial: https://sapui5.hana.ondemand.com/sdk/#docs/guide/df86bfbeab0645e5b764ffa488ed57dc.html which …

Read More
Correct usage for filters when binding items via XMLView

Using sap.m.Select, I have a similar code as this below: <m:Select selectedKey='{state}' items="{ path: 'states>/content', sorter: { path: 'name' } }"> <core:Item key="{states>id}" text="{states>name}" /> &…

Read More