Repo based menu in react SPA

Experience Manager (PaaS/OnPrem)
1

Hello,

I am trying to create a repo based menu to show the folders+documents of an xpage folder. I have followed these instructions: Site Menus - Bloomreach Experience Manager (PaaS/Self-Hosted) - The Fast and Flexible Headless CMS and created a repobased menu component and a repobased menu class that extends the EditableMenuImpl, when the component is on a page and I debug the application, I see that the folders are added to the menu in the backend and they are also returned as JSON in the delivery API.

Now I want to render this menu in a React Spa, but I get an error right away in the menu.ts of the Spa SDK. Apparently the editable menu and the editable menu items don’t have the same structure in the JSON as normal menu items. Should I use another Typescript type for an editable menu (or create one myself)? Or is there a way to convert an editable menu(item) back to a normal menu(item) after the items are added in the backend?

Kind regards, Ineke

2

Hey Ineke,

It is possible that your custom created menu has a different JSON structure in comparison to the normal menu.
Like you already figured out, the way to go is to create/extend a new/existing type/interface/component to map the new menu correctly.

3

Thanks, but any tips on how to approach this would be nice. Extending the Bloomreach Spa SDK isn’t that easy as a lot of classes aren’t exported, for example the MenuItemImpl. I’m wondering why this is so hard and why there aren’t any examples for this, seems like a fairly common use case to want to create a menu for a folder structure, i.e. for news items and other types of articles?

4

For other people trying to implement this, I was eventually able to make this work by extending the EditableMenuImpl and adding a getter for getSiteMenuItems:

public class RepoBasedMenu extends EditableMenuImpl {

    public RepoBasedMenu(HstSiteMenu hstSiteMenu) {
        super(hstSiteMenu);
    }

    public List<EditableMenuItem> getSiteMenuItems() {
        return this.getMenuItems();
    }

}

And creating a mixin for the EditableMenuItem class that appends the json with the “links” property (instead of _links which the React SDK doesn’t recognize).

1 Like
5

Thanks for sharing your solution