A Compact Class Act

It had been more than a month since I worked on creating a new Fiori App on Business Application Studio. Just the other day when I was creating a new App by following almost the similar steps which I followed the last time (whew… thanks to those quick template setup), I couldn’t really see much of a difference when it came to the development environment. Although I must mention that for some reason I cannot find the layout editor. If someone knows how to resurrect that, please let me know in the comments!

Something changed

I coded my UI components in the view xml file, started the application, surprisingly it loaded. Yes, I still get surprised when my application works or starts up in the first go. The UI loaded, but something seemed a bit off. I opened up an application that I had deployed on Cloud Foundry and I could clearly see what was wrong. For some reason, the the components seemed wonky. Ok, let me share a picture to explain what I’m talking about.

Seemingly%20weak%20looking%20UI

Seemingly weak looking UI

And now what the expected layout looks like:

UI%20as%20we%20know%20it

UI as we know it

Head scratching moment

For a day I thought “Perhaps Business Application Studio is doing some trick and probably it would render correctly once I deploy it to CF”. What a flight of fancy indeed. I won’t even give a cliff hanger here, but even when I deployed the app on Cloud Foundry, the result was just the same. The UI still looked like it hadn’t hit the gym yet. Then doing what developers do the best: started googling around, checking SAP Community for keywords “weird looking UI SAPUI5” or something like that. Stumbled upon a class “sapUiSizeCompact”, made some sense. But I wasn’t using it anywhere. While I think it would’ve been better if I had just done a text search in my project looking for ‘sapUiSizeCompact’, but that thought did not occur to me that time *sigh*.

An Experiment

I launched the App from Business Application Studio, but this time around using the flpSanbox.html instead of the regular index.html. Surprise Surprise!!! The components rendered correctly this time.

The Culprit

The next step in narrowing down the problem wasn’t so difficult to guess. It had something to do with the index.html. Started poking around a bit in that file, guess what; there was that ‘sapUiSizeCompact’ class being used in the body tag.

<body class="sapUiBody sapUiSizeCompact" id="content">
    <div
        data-sap-ui-component
        data-name="anrapid"
        data-id="container"
        data-settings='{"id" : "anrapid"}'
        data-handle-validation="true"
    ></div>
</body>

I removed this compact styling, ran the project with index.html AND it worked!

Some takeaways?

Looks like while creating the project using the Fiori Freestyle Template, this styling comes pre-defined. I’m almost certain this wasn’t the case earlier. Or was it? I’m pretty sure I did not change it in my previous project and I see no trace of it even now when I check the source code for that application. So perhaps something new which has gone in maybe in the last 2 months. Although it certainly seems that this styling has long been there. Honestly I’m not a fan of this compact looking UI. I’m sure there might be places where it might find a good use. Found some documentation around it here. But safe to say, I still love the cozier looking UI. Oh, a fun fact, it is actually called a cozy styling “sapUiSizeCozy“.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.