Skip to Content
1

Incorrectly aligned sap.m.Table records in Fiori Launchpad

Oct 27, 2017 at 05:27 PM

154

avatar image

Hello community!

I have the following code, which is working fine when testing and deploying the SAPUI5 app as Web Application. But when I'm registering it to a Fiori Launchpad, when opening from a small device, the records of sap.m.Table are getting right-aligned, which is not what is specified via hAlign="left" property.

(Error is happening in Phone devices, tested in Fiori Client & SAP Web IDE Fiori Launchpad Sandbox)

Here is the view:

<m:Table id="tblRequested" items="{path:'ShipownerBoatsSet'}" width="100%" noDataText="No hay datos" mode="None" showSeparators="All" growing="true" growingThreshold="20" growingScrollToLoad="true">
    ...
    <m:columns>
        <m:Column width="auto" hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
            <m:header>
                <m:Text text="Cod. Matrícula" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
            </m:header>
        </m:Column>
        <m:Column width="auto" hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
            <m:header>
                <m:Text text="Nom. Embarcación" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
            </m:header>
        </m:Column>
        ...
    </m:columns>
    ...
</m:Table>

I guess it has to do with the properties width, hAlign, minScreenWidth and demandPopin, but the problem is that when tested as a Web Application it is ok, but in Fiori Launchpad not.

Thanks in advance!

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

5 Answers

Best Answer
Irfan Gokak Oct 29, 2017 at 07:47 AM
1

Hi Christian,

Please remove property minScreenWidth="Tablet" from first column. This will resolve your issue.

Regards,

Irfan Gokak

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

Hi Irfan,

Bad news :( It doesn't work. I tried with multiple values for this property.

Regargs.

0

Hi,

Your first column should goes like this.

<m:Column demandPopin="true">
       <m:header>
             <m:Text text="Cod. Matrícula"/>
       </m:header>
</m:Column><br>

Check below screenshots:

tablemob.jpg (39.9 kB)
0

It worked Irfan!

Thanks!

0
avatar image
Former Member
Nov 02, 2017 at 03:35 PM
1

Please see:

https://sapui5.hana.ondemand.com/#/topic/38855e06486f4910bfa6f4485f7c2bac

As mentioned in the note there: "Please note that in order to have a valid table design, at least one column should always be visible and should not go to the pop-in."

Changing the app to remove both "demandPopin" and "minScreenWidth" from the 1st column (or at least 1 column) should solve the issue.

Regards,

Pavan

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

It worked! Thanks a lot Pavan!

image-1.png (18.2 kB)
0
avatar image
Former Member
Nov 02, 2017 at 03:32 PM
1

I think at least one column should be configured in a way that it is not moved into the popin area.

See also https://ux.wdf.sap.corp/fiori-design-web/responsive-table/#responsiveness-and-adaptiveness

So Irfan seems to be correct for me.

Share
10 |10000 characters needed characters left characters exceeded
Arjun Biswas Oct 28, 2017 at 03:29 AM
0

Yea. I think that the hAlign left property is causing the problem in FIORI Launchpad after deployment. I think the issue can also be caused due to the version of your UI5 and your launchpad.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member
Nov 02, 2017 at 03:22 PM
0

It's not right aligned, it's still left aligned but some extra padding is added in the second case. At best, please open a support ticket for this.

Share
10 |10000 characters needed characters left characters exceeded