cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to make the UI5 application responsive ?

Former Member

on ‎04-23-2014 2:02 PM

0 Kudos

I am actually followed below blog and developed a sample application

How to create SAPUI5 application consuming Gateway service with the help of SAP NW Gateway Plug-in f...

Can any one please explain below :

1) I was getting an UI like this ,  but in example provided was achieved with a table like UI. May i know the reason behind this?

How can i achieve the UI as in blog?

my result

example in blog result

2) The result i achieved is not responsive. When i change the size of my browser the UI design does nt adjust itself.

How to make this responsive?

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (3)

Answers (3)

Former Member
‎04-23-2014 2:36 PM
0 Kudos

This is the code from index.html - auto generated

<!-- Auto-Generated by SAP NetWeaver Gateway Productivity Accelerator, Version 1.1.1 -->

<!DOCTYPE HTML>

<html>

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link rel="stylesheet" href="app/css/MobileStyles.css">

  <!-- src Location of SAP UI5 libraries need to be changed to refer to right location -->   

  <script

  src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  type="text/javascript"

  data-sap-ui-libs="sap.m">

  </script>

  <script>

  sap.ui.localResources("Authentication");

  jQuery.sap.require("Authentication.Authentication");

  $(document).ready(function(){

  authenticate();

  });

  </script>

</head>

<body class="sapUiBody" role="application">

  <div id="content"></div>

</body>

</html>

i could not find any blue crystel theme to replace with gold reflection theme here ,

Also tried  adding  data-sap-ui-theme="sap_goldreflection"  in 

 

<script

  src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  type="text/javascript"

data-sap-ui-theme="sap_goldreflection"

  data-sap-ui-libs="sap.m">

  </script>

which resulted the same . with blue crystal theme
Show replies
Show replies
ChandraMahajan
Active Contributor
‎04-23-2014 3:11 PM
0 Kudos

Hi,

1) The difference is because my example was based on Gateway Productivity Accelerator, Version 1.0 and yours is based on Gateway Productivity Accelerator, Version 1.1.1

below is how my index.html looks like. So the difference is because of GWPA version.



<!DOCTYPE HTML>


<!-- Auto-Generated by SAP NetWeaver -->


<html>


       <head>


   <meta content="IE=edge" http-equiv="X-UA-Compatible">


  <link rel="stylesheet" type="text/css" href="css/styles.css" />


      <script id="sap-ui-bootstrap"


       type="text/javascript"


   src="resources/sap-ui-core.js"


   data-sap-ui-theme="sap_goldreflection"


   data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table" >


   </script>


  






     <script>


                     sap.ui.localResources("test");


                     var view = sap.ui.view({id:"ID_firstview", viewName:"test.resources.firstview", type:sap.ui.core.mvc.ViewType.JS});


            view.placeAt("content");


     </script>






       </head>


       <body class="sapUiBody" role="application">


              <div id="content"></div>


       </body>


</html>

I also upgraded to new version and yes by default now it creates mobile based application in GWPA 1.1.1 whereas it was desktop based in earlier version GWPA 1.0

also blue crystal theme is loaded by loadTheme("sap_bluecrystal"); in Application.js

2) Now regarding responsiveness, you need to change mode StretchCompressMode to ShowHideMode in App.view.js



// create splitApp


              this.splitApp = new sap.m.SplitApp({


                     mode: "StretchCompressMode"


              });

Change mode value to ShowHideMode

Regards,

Chandra

ChandraMahajan
Active Contributor
‎04-24-2014 2:56 PM
0 Kudos

Hi,

have you got all your answers? if yes then you can close this thread. if not then you can ask for more input.

Regards,

Chandra

Former Member
‎04-24-2014 3:19 PM
0 Kudos

Thanks Chandrashekhar,

Its very close to solve the problem

1) Gold Reflection Theme - Changing the theme from sap_bluecrystal into sap_goldreflection actully resulted like this. But how to achieve with the result you achieved earlier in a table format.

2)

2) Responsiveness : Changing the mode from mode: "StretchCompressMode" to ShowHideMode acheived with like this with a change in screen resolution.

When i change the resolution of the screen the screen doesnt auto adjust itself. but making it to fullscreen and lowering the resolution makes it responsive.

which means not completely responsive with change in screen resolution

ChandraMahajan
Active Contributor
‎04-25-2014 12:39 PM
0 Kudos

Hi,

1) As mentioned in earlier response, my blog example was based on GWPA version 1.0 which was generating desktop based application. now after upgrading GWPA to version 1.1.1, it is creating mobile based application.

2) As the application code is getting generated by GWPA plugin, you need to do little code tweaking to make it fully responsive. but with ShowHideMode at least if you reduce the screen size, the master page will get hide with detail page.

Regards,

Chandra

Former Member
‎04-28-2014 8:42 AM
0 Kudos

1)Can you let me know where and what is the the Code tweaking to be done when using GWPA 1.1.1?

2) Is there a way i can roll back to the GWPA version 1.0 , to try the tutorial and achieve the same result.

Qualiture
Active Contributor
‎04-23-2014 2:30 PM
0 Kudos

It seems you are using the sap.m mobile controls, whereas the blog example uses the 'standard' sap.ui desktop controls...

However, I'm not entirely sure why your example doesn't seems 'responsive', it actually should be just like this example sap.m Explored

Show replies
Show replies
Former Member
‎04-23-2014 2:20 PM
0 Kudos

Hi Micheal,

if you want to change the theme, just change the following part in your index.html.



<script id="sap-ui-bootstrap"


  type="text/javascript"


  src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"


  data-sap-ui-theme="sap_goldreflection"


  data-sap-ui-libs="sap.ui.commons">


</script>

The attribute data-sap-ui-theme determines your theme. Replace sap_bluecrystal into sap_goldreflection.

Regards Michael

Show replies
Show replies
Ask a Question