Customizing MainMenu Items

Client
1

We have the following problem with this solution, which we have implemented with a custom saga, which dispatches a Push-Activity with following descriptor, to load the data and display a form instead of an overview:

{
	"module":"some-module"
	"instance":"Some_DM/d6512620-3007-4b30-82c4-48433957ac70"
	"conversation":"d6512620-3007-4b30-82c4-48433957ac70"
}

The tab in the MainMenu is no longer actively displayed now, because the descriptor from menu.initialActivity only has:

{
	"module":"some-module"
}

I found following part in the MainMenu.tsx A12-Component in the client-core (which is internal):

	const active =
		topLevelActivitiesDescriptors.some(activity =>
			deepEqual(activity, menu.initialActivity?.descriptor)
		) ||
		(children !== undefined && children.some(child => child.active === true));

In our case the activity and menu.initialActivity?.descriptor are different, which is the reason why the tab is not active.

Is there a simplier way, to hook in the menu items to update the check if an item is active instead of copying the MainMenu Component and customize it?

2

Hi @sven-fierce-cairn,

for larger projects imho its best to us a custom main menu to fit the requirements of the project.

From a fast solution i can imagine it could work out if you create an parent activity that matches the menu descriptor first and then create you desired activity on top of that parent, so the condition you showed can find the matching descriptor inside the activity chain:
topLevelActivitiesDescriptors.some(...
For that approach you should keep an eye on all code parts that do a descriptor check and assure that they are kind of exclusive and will not get activitated on that parent activity.

3

Hi @markus-agile-fog ,
thanks for your response and suggestion with the parten activity. This solution worked for us!

4

Btw, I wrote a custom menu myself for the Client devapp (devapp/src/devapp/main-menu.tsx).