cancel
Showing results for 
Search instead for 
Did you mean: 

Form is not getting rendered in SAP Fiori Client mobile application or Mobile Browser.

nalamabhiram
Explorer
0 Kudos

Hi All,

below form is  getting rendered correctly in desktop browser but not in mobile browser .


In mobile browser all the text fields are rendered immediately,  but the Label fields are rendering very slow .

sometimes Label fields never get rendered, we need to tap the screen and swipe the screen  to make the Label fields Rendered.

Following is the form used.

new sap.ui.layout.form.SimpleForm({title:"Purchase Order Details", layout:sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,

                                    maxContainerCols:1,editable:false,labelSpanL:4,labelSpanM:4,emptySpanL:1,emptySpanM:1,columnsL:1,columnsM:1,

  content:[    

          new sap.m.Label({text:"Purchase Order"}), new sap.m.Text({text:"105"}),

          new sap.m.Label({text:"Document type"}),new sap.m.Text({text:"p"}),

          new sap.m.Label({text:"Vendor"}),new sap.m.Text({text:"5"}),

          new sap.m.Label({text:"Vendor name"}),new sap.m.Text({text:"sector"}),

          new sap.m.Label({text:"Purchasing Org"}), new sap.m.Text({text:"Nauru"}),

          new sap.m.Label({text:"Purchasing Grp"}),new sap.m.Text({text:"pg"}),

          new sap.m.Label({text:"Purchase order value"}),new sap.m.Text({text:"50"}),

          new sap.m.Label({text:"Currency"}),new sap.m.Text({text:"euro"})

]

    

  }) 

NOTE:

when tested In Google Chrome's Developer's tools (desktop browser) by emulate a tablet or mobile device  it is rendering correctly.

But the issue is occurring only in mobile device Browser or SAP Fiori client in mobile.(Tested in Iphone 6).

Could you please explain where its going wrong, Is there any other way to display the fields  with a responsive layout which makes it to render correctly both in mobile and desktop.

I need the fields to be displayed like below form and code should be in java script.

Regards,

Abhiram.

Accepted Solutions (0)

Answers (4)

Answers (4)

Former Member
0 Kudos

Hi,

I am having exactly the same problem. My custom developed app works fine in mobile chrome simulator. When run in the actual mobile devices iphone5 and iphone6, the text is rendered properly, but checkboxes, radios buttons, inputs and labels don't render until i tap the screen or scroll the screen down.

I did not use forms, but all my UI elements are part of sap.m.Table. Please let me know if you find any solution.

Thanks,

Ramana.

philipp_epstein
Discoverer
0 Kudos

Hi,

we were able to manage the rendering problem by playing around with the attributes of the simple form.

We faced this issue only on the device itself and not in device simulators on the desktop.

The following combination of the SimpleForm attributes works for us:

<form:SimpleForm emptySpanL="1" emptySpanM="1" labelSpanL="4" labelSpanM="4" layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">

Hope that helps,

Philipp

0 Kudos

This message was moderated.

former_member182874
Active Contributor
0 Kudos

Hi Abhiram,

What is the SAP_Ui version ? and library version also. What is the fiori client you are using, I assume latest ?

regards,

Tejas

nalamabhiram
Explorer
0 Kudos

Hi Tejas chouhan,

following are the  version details.

"https://xxx.xxx.xxx.xxx/sap/public/bc/ui5_ui5/index.html"

"Ctrl-Alt-Shift-P"

Fiori client version: 1.5.0

Thanks in advance,

Regards,

Abhiram.

nalamabhiram
Explorer
0 Kudos

Hi Tejas chouhan,


a small update..

even In mobile this rendering  issue occurs , only when we use application in portrait mode.

In landscape mode its rendering correctly.



regards,

Abhiram


former_member182874
Active Contributor
0 Kudos

Hi Nalam,

How about upgrading to the recommended version.

Have you implemented all the notes as mentioned here.


Regards,
tejas

nalamabhiram
Explorer
0 Kudos

Hi Tejas chouhan,


I have upgraded to 1.28.21 .





But,Still I am facing issue.

and now I am able to reproduce the issue in Google Chrome's Developer's tools (desktop browser) by emulating  mobile device.(Its working for large and medium screen but not small.)

I am facing this issue for mobile mode alone.

When we tap on the screen -Information bar.the remaining labels are getting loaded.

Until tapping the labels are not getting rendered.




Could you please explain where i am going wrong,Or is there any other way to display the fields similar to form.



Regards,

Abhiram.

former_member182874
Active Contributor
0 Kudos

Hi Abhiram,

Is this standard app behaviour ? if yes, all apps behaves same or only this particular app.

Regards,

Tejas

nalamabhiram
Explorer
0 Kudos

Hi Tejas chouhan,


The detail page view of standard application,  info filter icon tab is empty.

so I have extended the standard application and added that above form to the info filter tab in extended project.

Now,this form is getting rendered correctly in large and medium screens(desktop,laptop,tablets)  but not in small screens(Mobiles).

In mobiles the form gets rendered correctly when tapping the screen.


This is the first implemented and extended application , So I am not sure about the other applications in this environment.


Regrads,

Abhiram.

philipp_epstein
Discoverer
0 Kudos

Hi all,

I'm facing the same behavior in an extension of a standard app, where I used a simple Form and labels (exactly as you did). On iPhone Webbrowser and in the Fiori Client the Labels are only visible after rerendering the tab. That means I have to click on the tab again or for example add an EventListener which rerenders the elements when scrolling down to see all the elements.

Did you already find a solution?


Best,

Philipp

nalamabhiram
Explorer
0 Kudos

Hi philipp,

I did not yet found the the solution to problem.

Could you please explain in brief what you have done to solve the issue??

Regards,

Abhiram.