SAPUI5 - Basic info - how to manage UI elements in view.js?

Question

experts,

These are two very basic connected questions.

I'm studying SAPUI5 and I cannot find means to position my UI elements on the screen. In my view.js file I create, let's say, a button, a datepicker and a text field. If I do something like:

aControls=[];
<Define the button - oButton>
aControls.push(oButton);
<Define the datepicker - oDatePicker>
aControls.push(oDatePicker);
<Define the text field - oText>
aControls.push(oText);
return aControls;

then I get all three elements positioned in a row one right after another. I cannot use css, because I pass all those objects in one array and all of them are placed into a common div on index.html.

How do I position these? A link to any good tutorial/examples is very welcome.

Also, how do I refresh UI elements? For example, I have situation, when on button press I make a call to the server, get response and put it into a using something like:

response.placeAt('some-id');

The button is created in the view.js and the call is processed in controller.js. The response is added every time I press the button and I have no idea how to replace the old response with the new one.

A good link is very welcome.

Thanks.

I suggest having a look at the SAPUI5 SDK documentation, there are numerous examples using layouts and the use of models, which answer both your questions respectively — Qualiture

Haojie Haojie · Accepted Answer · 2014-09-15T14:35:43

There are a lot of layout controls of SAPUI5 you can use: Grid, HorizontalLayout, VerticalLayout, MatrixLayout,etc. You can check the examples and see how you need to layout your views.

You are currently doing UI5 JS view which implements createContent method to define views, this is one approach. Another common approach is to use XML views, it is declarative and more straightforward, also needs less code. See this simple example in JSBin of defining XML view and controller to refresh UI.

SAP UI5 is all about Model(JSONModel/ODataModel)-View(JSView/XMLView)-Controller. You are highly recommend to read this MVC example, though it is based on SAP UI5 mobile, the content is relevant to SAP UI5 desktop as well.

Hope you will get some hints.

SAPUI5 - Basic info - how to manage UI elements in view.js?

1 Answers