cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
tism
Level: Powered On

BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

Hi,

 

I have created a customized SharePoint list item form in PowerApps, with the following "Screen size + orientation" settings:

 

layoutissue1.PNG

 

This works fine on the desktop, and also on a mobile device when you browse to the list and then click/tap the "+ New" toolbar button.

 

HOWEVER - When you browse DIRECTLY to the "NewForm" page for the list (i.e. https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx) in Safari on an iPhone, it's almost impossible to scroll to the bottom of the form!  The reason being is that the form is displayed in a iFrame, and essentially it creates TWO vertical scroll bars in the browser - one for the entire SharePoint page, and one for the form.  Unless the user selects the CORRECT spot to scroll the form, they cannot scroll to the bottom of the form - they can only scroll so far as the height of the SharePoint page, which seemingly gives the impression that they can't scroll to the bottom of the form.  It's only when they scroll INSIDE the iFrame that they can get to the bottom.

 

This is a really bad quality control issue that has caused no end of angst for the users that I am building my form for.  Does anyone have a suggestion/workaround I could use to get past this problem?

 

 

Thanks!

 

8 REPLIES 8
seadude
Level 10

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

Are you accessing the PowerApp in the browser on the mobile device or via the PowerApps App (from the Apple iStore)?

 

I'd recommend only using the PowerApp app to access and use an application you've built.

tism
Level: Powered On

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

@seadude This is a SharePoint customized form, so no, the PowerApps app is not an option.  The customer wants their user to access via the browser.

 

SharePoint customized forms are designed to work in SharePoint which means via a web browser (regardless of browser/platform), so it should work!

Community Support Team
Community Support Team

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

Hi @tism,

 

It seems that I cannot reproduce your issue. After setting this size to the custom form, the new form link opens correctly on my iPhone.

May I know why did you want to directly open form in new mode inside a browser on iPhone not throught a SharePoint site?

 

Regards,

Mona

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
seadude
Level 10

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

Hi @tism. I see. I'm not sure Sharepoint gauruntees responsiveness (view on any device) especially with newer web parts such as embedded PowerApps.

 

The issue is likely due to that factor. I know that doesn't help much!, but you might consider creating the app in PowerApps as a stand alone.

tism
Level: Powered On

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

@v-monli-msfthere are the steps to replicate the issue:

 

1. Create a new SharePoint list, with lots of columns

 

LotsOfColumns1.PNG

 

2. Choose "Customize Forms" from the PowerApps menu.

3. In PowerApps, "File > App Settings" and change the dimensions of the form to 350x812 (as I posted above)

4. Tear your hair out because PowerApps has resized the fields for you, including the font size, and you now have to go through EACH control one by one and not only change the font size, but also resize the controls to accomodate the fact that you've had to change the font size, so that user can actually SEE what they enter.  (For the purposes of replicating this issue, I have only fixed the controls in the first datacard)

 

LotsOfColumns2.PNGResized controls inside Data Cards

LotsOfColumns3.PNGFont size change to be REALLY small!

LotsOfColumns4.PNGResizing of fonts means resizing of controls. For EVERY control.

 

5. Publish the form

6. Browse directly to the new item form via a desktop browser, i.e. https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx. Note that you'll see that there are TWO scroll bars (why?) on the page.

 

LotsOfColumns5.PNGTwo scroll bars - Desktop

 

7. In Chrome, browse directly to the new item form via a desktop browser, i.e. https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx and hit F12, select "Toggle Device Toolbar", and then select "iPhone X".  Note the double scrollbars issue is still present.  Using the mouse, scroll in the middle of the page to simulate what a user would be doing with their thumb (i.e. so that the LEFT HAND scroll bar is being moved up and down).  You can't scroll to the bottom of the form, unless you try scrolling in a different area.

 

LotsOfColumns6.PNGTwo scroll bars on small screen - causes scrolling issues

 

8. On a physical iOS device that has a smaller screen, such as a iPhone SE, using Safari browse to https://<tennant>.sharepoint.com/sites/<site>/Lists/<list>/NewForm.aspx.  It is even harder to scroll to the bottom of the form..

 

LotsOfColumns7.PNGScroll issue in iOS

 

I was able to easily replicate the issue

Highlighted
tism
Level: Powered On

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

@v-monli-msft"May I know why did you want to directly open form in new mode inside a browser on iPhone not throught a SharePoint site?"

 

 

I think the question about opening the form directly shouldn't matter whether it's via a desktop browser, or a browser on a mobile device such as an iPhone.

 

The solution I'm building a a SharePoint site dedicated to a single business process (I have built many of these over the years, since SharePoint 2003).  For example, let's say it's for employees to fill out a purchase order.

 

The PowerApps form is only one part of the entire solution.  The list that the PowerApps form is built on, the content in the SharePoint site and the Flows behind it are just as much part of the entire solution.  That means I have customized views, web parts, and the site's quick launch to make it as easy as possible for anyone involved in this business process to navigate around and perform the actions they need to perform as part of their normal business day.

 

On the home page of the site, I have created a "Complete a new Purchase Order" hyperlink.  This is so that a user (who doesn't use this site very often) doesn't have to browse to the "Purchase Orders" list first, and then click the "+ New" button - we want to make the process as simple as possible.

 

Directly linking to "NewForm.aspx", whether it's a customized form or not, has been something SharePoint solution builders have been doing for a very long time!  Now, introduce the fact that workforces are becoming more mobile - e.g. for the client I am doing this work for, they have employees that are all issued iPhones.  They want to be able to fill out a purchase form whether they are in the office or out on the road, and they want the experience to be as consistent as possible.  Therefore, ANY form created in SharePoint, whether it's the stock standard list form or a customized form, should display on a page in it's own right, and work - and not cause usability issues.  I think that's fair and reasonable!

 

Customers I have worked with previously (who are/have been on premise) have used third party add-ons to customise SharePoint forms/workflows, but in their move to SharePoint Online/Office 365 they have found those third party options to become cost prohibitive, and would rather use PowerApps/Flow.

 

I think this issue is a combination of the fact that the SharePoint customization of forms in PowerApps feature is, at best, half baked, and the new modern experience in SharePoint actually diminishing the options that were available to SharePoint developers when it comes to a whole forms based solution based in SharePoint.  I think the SharePoint team and the PowerApps team need to get together, and consider actual real life business cases such as the one I've described above, before they release features that are tying the hands of SharePoint solution builders like me.

 

 

tism
Level: Powered On

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

@seadudeplease see my previous post to @v-monli-msft.

 

"I know that doesn't help much!, but you might consider creating the app in PowerApps as a stand alone."

 

Then why does Microsoft offer the option to customise a SharePoint form in the first place?!  Organisations that have been using SharePoint for a long time, and are moving to SharePoint online/Office 365, are scratching their heads when it comes to this.  They have been happy with everything having been done through SharePoint.  So now we have to introduce another medium, another experience, and confuse the user when they are switching around from SharePoint, to PowerApps (whether via the browser, or via the PowerApps app), and back again?  Add to that, approvals in Flow go to yet ANOTHER page?

 

Business want to move forms online and automate/workflow their processes, and keep the experience as simple as possible for their users.

 

"I'm not sure Sharepoint gauruntees responsiveness (view on any device) especially with newer web parts such as embedded PowerApps."

 

That's disappointing given we're now in 2018, and mobile devices are everywhere.  Why would a "newer" web part NOT be responsive?  Also, this post relates to NOT using the web part, but linking to the form DIRECTLY.

seadude
Level 10

Re: BUG - Layout issue when linking DIRECTLY to customized SharePoint form in Safari/iOS

Have a great day.