New Feature Review – Portal Tile Size Options

A new feature was delivered recently in the SAP Cloud Platform Neo environment related to the Tile size of applications within FLP or Freestyle sites built using the Portal Service. In a number of projects clients have asked whether or not the size of the tiles can be reduced so agree that this is a nice feature to include. This is the topic of this little blog post.

You may ask why customers would ask for such a feature so let me provide some insights into why this would be requested.

• To reduce the amount of scrolling on mobile devices. When a Fiori Launchpad contains multiple tiles and the tile size is large the user will need to scroll through to the different applications – especially when they are part of a large single group. Reducing the size of the tiles means less scrolling, meaning users can select applications faster which means an overall better user experience.
• To see a greater amount of applications on the screen. This would be the case for new users where they may believe the application is not actually on the screen. Seeing most of the applications in a single screen will reduce support queries overall.
• Groups can contain more applications if the tile size is reduced. At the moment groups with a smaller amount of applications included are necessary because the tile size is so big. With small tile sizes, groups and applications can be organised differently – all for a better user experience for the users.

For informational purposes you can find the new feature via the new What’s New in SAP Cloud Platform website as detailed in this blog post. I performed a selection based on recent Portal service changes and came up with this. You can see a number of other new functions as well.

Figure: 1 What’s New in the Portal Service 

NOTE: There is an assumption in this blog that you have already navigated to the Portal Service and chosen the correct FLP site to Edit the settings.

Depending on your current FLP settings you may need to adjust the SAPUI5 version being used. If a change is needed just check whether or not you also need to upgrade the theme assigned. This would usually be the case when you change the SAPUI5 version of your portal site.

For the example I copied an existing FLP that was set to the Maintenance version 1.52. All examples and screenshots will use this FLP.

Let’s first see what the current settings look like. You can see that it is set at Maintenance version (1.52). The Tile size option is NOT included in this version so while you will see the Tile Size option included it will not be maintainable for sites on this version as you can see below.

Figure: 2 Current Settings – Maintenance version 1.52

If I run the FLP within a Browser I will see that only 9 tiles show on the single line. As you saw above the Tile Size setting is set to Responsive. 

Figure: 3 Current Settings on Browser – Tile Size = Responsive

If I run the FLP on a Mobile device through Fiori Client I will see that only 6 tiles show on the screen. As you saw above the Tile Size setting is set to Responsive. 

Figure: 4 Current Settings on Mobile Device – Tile Size = Responsive

So you can see quite clearly that users on the mobile devices would need to scroll through to see all of the other applications that are available.

Let’s now change some of the settings and see how we can improve the user experience by using the new Tile size feature.

To do this we need to change two settings:

1. The SAPUI5 version. We need to change this to Innovation so that this new feature can be maintained.
2. The Tile Size setting. We need to change this to Small within the Content Area section.

Figure: 5 New Settings – Innovation Version 1.56 and Tile Size = Small

Of course we need to Save these settings and Publish. 1 = Site Preview, 2 = Publish Site.

Fun Fact: You can also use the Site Preview option to see how the tile size setting change has impacted on the FLP site. Let’s check this now.

Figure: 6 Site Preview with Tile Size = Small

You can see from the site preview that instead of 9 tiles on the line it is showing 11 which is great. When we publish this site we should see the same result.

Figure: 7 Published site with Tile Size = Small

We can see from the above published site screenshot that the same result applies and 11 are now showing on the single line.

If I now run the FLP on a Mobile device through Fiori Client I will see now that 8 tiles show on the screen and you will see space to the right hand side – so the tiles are smaller. As you saw above the Tile Size setting is set to Small. 

All in all the new feature is really easy to perform and allows for more tiles to be included on the screen which means less scrolling, faster access to applications and improvements in the way applications are organised in groups. Definitely improves the overall user experience.

Check it out now and let me know what you think about this new feature!!! Feel free to provide some comments.

If you are interested in other blogs related to the Portal service check out my other blogs that I’ve linked below.

• Re-Ordering Applications within a Group. HERE.
• Business Content option. HERE.
• Translation of Portal Sites. HERE.
• Site Preview for Different Users. HERE.

Once again, thanks for reading!!