Skip to Content
0

Design Studio Application auto adjust to ipad & iphone

May 05, 2017 at 08:58 PM

296

avatar image
Former Member

Dear All.

I have a question that if we set all the component width and height to auto during the design of our Dashboard than why it is not auto adjust it self in other devices like ipad or iphone, in previous version of design studio there is a option to select the ipad or iphone template during creating the application but in the newer version there is not such option and my understanding is that setting the width and height to auto should fit the component to any device.

kindly please advise how to achieve this and what should i consider to design the application which fit it self automatically to PC and ipad.

kind regards,

Zeeshan

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Best Answer
Mustafa Bensan May 06, 2017 at 12:50 AM
0

Hi Zeeshan,

To add to Tammy's comments, by way of clarification about the use of the auto value when applied to the width and height properties of a component. The purpose of auto is not to automatically adjust the layout of components to fit mobile devices such as iPhones or iPads. It is simply to force that component to fit the entire space of its containing parent component, whether that be a grid layout or the application canvas. This helps with implementing a responsive design but it will not automatically "flow" the layout for you based on device. In the current standard functionality of Design Studio, you need to combine appropriate script logic with CSS to produce a responsive layout that targets the desired device form factors. This CSS and script logic will be dependent on the specific content you want to include in your application and should therefore be tailored to the specific use case.

Regards,

Mustafa.

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Adaptive Layout Container helps you achieve responsive layout

where is Adaptive Layout Container ,can you help me

1. on application

2.execute locally

0
Tammy Powlas
May 05, 2017 at 09:58 PM
0

Hello Syed - today for 1.6 you will need to look at using an SDK / third party components: for example see http://cdn.visualbi.com/wp-content/uploads/visualbi-extensions-for-sap-businessobjects-design-studio-vbx-user-guide.pdf "responsive UI container"

Coming in 2.0, there will be an adaptive layout container - see https://blogs.sap.com/2017/03/26/last-chance-to-apply-to-join-asug-businessobjects-lumira-2.0-influence-council/ Figure 14

Tammy

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Adaptive Layout Container helps you achieve responsive layout

where is Adaptive Layout Container ,can you help me

1. on application

2.execute locally

1.png (145.7 kB)
2.png (153.2 kB)
0

Zheng,

This post has been answered and closed. Therefore, you should post a new question about the Adaptive Layout in order to have better visibility and response from the community.

Regards,

Mustafa.

0
avatar image
Former Member May 08, 2017 at 10:23 AM
0

HI Syed,

Also, while designing the dashboard choose the template as "SAPUI5m" which is specific for mobile.

The dashboards should display fine in ipad and iphones without making any modifications.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Tanveer,

Just for clarification, while "SAPUI5m" is the recommended rendering mode for supporting both Desktop and Mobile, this selection alone does not mean that "dashboards should display fine in ipad and iphones without making any modifications". As I have mentioned above, the appropriate combination of CSS and JavaScript will still need to be applied for the content to display in a meaningful and responsive manner depending on the device. The layout/content on an iPhone needs to be different than the layout/content on an iPad, therefore additional logic is required for this, that goes beyond just selecting the "SAPUI5m" mode when creating the app.

Regards,

Mustafa.

0
avatar image
Former Member Nov 03, 2017 at 06:17 AM
0

I also want to know ,Do you have a solution

Share
10 |10000 characters needed characters left characters exceeded