Design Studio Application auto adjust to ipad & iphone

[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

[MustafaBensan · Accepted solution]

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.

[Former Member · Accepted solution]

Adaptive Layout Container helps you achieve responsive layout

where is Adaptive Layout Container ,can you help me

1. on application

2.execute locally

[Former Member]

I also want to know ,Do you have a solution

[former_member430260]

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.

[MustafaBensan]

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.

[TammyPowlas]

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... "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-influe... Figure 14

Tammy

[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

[MustafaBensan]

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.