Changing the order of Groups and Tiles in your SAPCF FLP

The Launchpad Service in SAPCF, recently renamed to SAP Build Work Zone, Standard Edition, offers you the successor of the NEO FLP; the so called Central Fiori Launchpad (cFLP). In this blog I’ll simply call them NEO FLP and (SAPCF) FLP.

In the NEO FLP you were able to change the order of Tiles and Groups as you wanted. The SAPCF FLP doesn’t have any specific feature allowing you to do the same. The three SAP Notes below confirm this, but give you also some technical details how things work behind the scenes. Knowing the technical details allows us to tweak the SAPCF FLP and get what we want. You will learn how to change the order of Groups and Tiles the way you want it.

Hint: From the SAP Notes it can be assumed that SAP is currently not planning to implement a feature (the resolution for all the notes is basically “Create a feature request”). Thus, this blog stays relevant as long as there is no official, handy, and out-of-the-box support for ordering the SAPCF Groups and Tiles.

1. Relevant SAP Notes

• 3066544 – Changing tile order on BTP Launchpad (CF)For Cloud Foundry Launchpad scenarios it is not possible to change the tile sort ordering […]. By default the tiles will be ordered based on when they were added. This cannot be changed. Groups will be sorted alphabetically by default.
• 3102280 – The mechanism of group ordering on BTP Cloud Foundry LaunchpadBy default the Alphabetical group ordering will be used without giving precedence to uppercase letters. […] But if you name the group starting with a space, it will be displayed before other groups. That means space is calculated as the highest priority.
• 3009017 – Is it possible to sort tiles on the Fiori Launchpad into alphabetical order?Tiles are not sorted into alphabetical order and there is currently no option to do so.

2. Changing the ordering of Groups

Imagine you have 4 Groups: Jan, Feb, Mar, Apr. These will be displayed as follows in your FLP:

Default ordering of Groups in SAPCF FLP

We could order them by changing them to: 1 Jan, 2 Feb, 3 Mar, 4 Apr:

Tweaking ordering of Groups with numbers in Groups

From UX perspective, this may cause cancer in the eyes of our users. And of course it pollutes the labels of our four Groups. We want something like that:

Our goal: Groups ordered the way we want it

As suggested in 3102280 – The mechanism of group ordering on BTP Cloud Foundry Launchpad we could simply use spaces. But a space takes some space, and the Group selector visualization wouldn’t be perfectly aligned to the Groups label anymore. You can solve this by adding a space at the beginning and one at the end. That fixes the alignment, but what about the unnecessary width of spaces? The solution is using a Hair Space; a space as thin as a hair 😊 All you need to do is adding the right amount of hair spaces at the beginning of each Group label to get the order you want, and at the end as well to get the perfect alignment.

To explain the details, let’s have a look what basically will happen by elaborating the following JavaScript snippets:

Default – Groups without any additional chars:

["Jan", "Feb", "Mar", "Apr"].sort();
// ==>  ['Apr', 'Feb', 'Jan', 'Mar']

This is basically (almost) how the FLP will order Groups by default. Actually, the FLP “does not give  precedence to uppercase letters”, which means “feb” would be displayed before “Jan”. In other words, the FLP applies a case-insensitive sorting of Groups. For simplicity we can ignore this. For completeness, this is what the FLP really does: 

// case sensitive sorting (actually not how the FLP sorts Groups)
["Jan", "feb", "Mar", "Apr"].sort();
// ==> ["Apr", "Jan", "Mar", "feb"] 

// FLP applies a case-insensitive sorting
["Jan", "feb", "Mar", "Apr"].sort(Intl.Collator().compare);
// ==> ["Apr", "feb", "Jan", "Mar"]

Option 1 – Prepending numbers:

["1 Jan", "2 Feb", "3 Mar", "4 Apr"].sort();
// ==> ['1 Jan', '2 Feb', '3 Mar', '4 Apr']

Option 2 – Prepending right amount of standard spaces:

["   Jan", "  Feb", " Mar", "Apr"].sort();
// ==> ['   Jan', '  Feb', ' Mar', 'Apr']

The more spaces at the beginning, the higher the order. Jan has 3 spaces, Feb has 2 spaces, Mar has 1 Space, and Apr doesn’t need any space because it’s the last one.

Hint: I’ve skipped the spaces at the end for the correct alignment, but you get the idea…

Option 3 – Prepending right amount of hair spaces prepended:

["Jan", " Feb", "  Mar", "   Apr"].sort();
// ==> ['Jan', ' Feb', '  Mar', '   Apr']

The less hair spaces at the beginning, the higher the order. Jan doesn’t need any space because it’s the first one, Feb has 1 hair space, Mar has 2 hair spaces, and Apr 3 hair spaces.

Hint: I’ve skipped the hair spaces at the end for the correct alignment, but you get the idea…

Try this out in your browser to see the difference between spaces and hair spaces:

<html>
    <div>&hairsp;&hairsp;&hairsp;Text with 3 hair spaces</div>
    <div>&nbsp;&nbsp;&nbsp;Text with 3 spaces</div>
</html>

Conclusion

And the winner is: Option 3 – hair spaces. Simply add hair spaces at the beginning + end of your Group’s labels. How? Just go to https://www.compart.com/en/unicode/U+200A and copy the hair space from there and paste it into your Group’s labels as needed. 

Attribution: I learned about hair space from a colleague.

3. Changing the order of Tiles

As the SAP Note above mentions:

“By default the tiles will be ordered based on when they were added. This cannot be changed.”

The first Tile added to the Group will be displayed first, the second Tile added to the Group will be displayed second, and so on. This means in the worst case you’ll have to remove all Tiles from your Group and re-add them in exactly the order you want them to be displayed.

Unfortunately, this is the only solution as of today.