Like we use div tags in HTML5 to get control of screen and layout designing, how can we achieve the same functionality in SAP UI5?

[Former Member]

Hi All!

I have a very basic question as I am still new to SAP UI5.
I have worked on HTML5, and there we can use <div> to divide the the screen in different pieces as per our requirement and then work on parts.

In UI5, how can I get the same functionality.
Like dividing screen into parts by specifying width and height of each part and then work on them independently.

If possible, please share a demo also.

Thanks.

Regards,

Prabhat

[henriquemattos]

Hi, Prabhat.

You have to understand, first of all, that SAPUI5/OPENUI5 deals with controls and not with tags. There's no need to try to manipulate HTML tags individually since the controls create the necessary scope for each case.

First of all, there are many controls to feature responsiveness and cross browser compatible layout. They use the grid span system, wide-used in the web nowadays.

Also, each control, like Tables, TextFields, TextAreas, Buttons, Labels and the advanced ones like UX3 Shell, Viz Charts, has thousands of features and complements already built-in, not to the mention that they already have their own CSS styles to begin with.

Let's assume you would like to have a table grid. In HTML you would have this sample code:

<table>
   <thead>
      <tr>   
         <th>Col 1</th>
         <th>Col 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1 - Content 1</td>
         <td>Row 2 - Content 2</td>
      </tr>
   </tbody>
</table>

Now, using SAPUI5 with Javascript notation, you would need to have something like:

var oTable = new sap.ui.table.Table({columns:[
    new sap.ui.table.Column({text: 'Col 1'}),
    new sap.ui.table.Column({text: 'Col 2'})
]});
oTable.addRow(new sap.ui.table.Row({
   cells: [new sap.ui.commons.TextView({text: 'Row 1 - Content 1'}),
             new sap.ui.commons.TextView({text: 'Row 1 - Content 2'})]
}); 


return oTable;

The most important difference, beside the notation, is the features that using the JavaScript notation gives you. First of all, the table is already styled and has a lot of features, like column sorting and filtering, column reordering, and many others.

If you need further assistance to set up your first running UI5 interface, let me know! I'd be glad to help.

Regards,

Rick

[Former Member]

Hey Rick,

Thanks for replying but this was not my question.
I am working on UI5 so I know these basic concepts like creating tables and other controls.

My question was: Like in HTML5, using <div> tag you can divide the screen into parts/divisions, right? Then you can define layout in these parts.

But in SAP UI5, as per my knowledge, we just define controls and align them under a single division.
Are there any controls for breaking the screen into parts, with some container controls or tags.

Regards,
Prabhat

[henriquemattos]

Oh, I got it. Sorry then..

You need the matrix/grid layout to figure it out. Every control has the layoutData property where you can define how many column span it should consume, based on a 12-column layout.

If you need controls to be aligned vertically, you can define a parent control as the sap.ui.layout.VerticalLayout() and the "content" aggregation will place each element below the previous. If you want a horizontal layout, you can use sap.ui.layout.HorizontalLayout and, based in a 12-column grid, elements will be placed at right.

Take a look at SAP UI Layout (sap.ui.layout):

SAPUI5 SDK - Demo Kit

[karthikarjun]

Hi Prabhat,

new sap.ui.core.HTML({

content : '<div ******your code ></div>'

});

Could you please try this classes in SAPUI5.

Thanks,

Karthik A

[santhu_gowdaz]

Are you asking about layouts,

search "layout" here- SAPUI5 Explored

MatrixLayout - SAPUI5 Demo Kit

Google