Menu options setting at user level

Support
#1

Hi
Gleb has shared a very useful sidemenu with some additional functionality i.e. sidemenu drawer. With is, we have a few different menu options for the users.

However, currently, it is hard-code and not user-selectable style. That is, the developer will decide what type of menu styling the application have which will be common across all user - SideMenu, SideMenu with the toggle or traditional menu bar on the top.

How about we give all such options to the end users to choose from? Based on the user’s choice or even some time to be practical - based on screen size the same user may choose the mobile menu while using in an iPad or 14" screen computer.

The solution for this could be adding options in Help >> Settings where the user can select something below as circled in red:

image

Trying something like this in ExtSettingsWindow screen but not sure where to save this setting data and how to retrieve and use it in ExtAppMainWindow screen.

@Override
public void init(Map<String, Object> params) {
    super.init(params);
    Map<String, Object> map = new LinkedHashMap<>();
    map.put("Side-Bar Menu", 1);
    map.put("Side-overflow Menu", 2);
    map.put("Top-down Menu", 3);
    optionsgroupMenuType.setOptionsMap(map);
    optionsgroupMenuType.setOrientation(OptionsGroup.Orientation.HORIZONTAL);

    String menuOption = userSettingService.loadSetting("menuType");
    if(menuOption !=null){
        if (menuOption.equals(1)) {
            optionsgroupMenuType.setValue(1);
        }else if (menuOption.equals(2)) {
            optionsgroupMenuType.setValue(2);
        } else {
            optionsgroupMenuType.setValue(3);
        }
    }
}

public void onOkBtnClick() {
    userSettingService.saveSetting("menuType",optionsgroupMenuType.getValue());
    close(COMMIT_ACTION_ID);
}

Would appreciate suggestions with a code snippet.

Moreover, I tried the following code to set the default sideMenu style in ExtAppMainWindow init method but it’s not working:

if (sideMenu.getSidePanel().getStyleName().contains("c-sidemenu-responsive")) {
    sideMenu.getSidePanel().removeStyleName("c-sidemenu-responsive");
    sideMenu.getSidePanel().addStyleName("sidemenu-responsive");
    sideMenu.getSidePanel().addStyleName("sidemenu-drawer");
}
#3

Hi,

In order to allow users selecting Main Window template you need to do the following:

  1. Create several main windows with different id. Pay attention that all of them must have route="main".
    In the sample app, in addition to the default main window, I added Main Window with SideMenu and registered it in web-screens.xml as follows:
<screen id="sideMenuMainWindow" template="com/company/demo/web/app/mainwindow/sidemenu/sidemenu-mainwindow.xml" route="main"/>
  1. Create an extended Settings Window.
<layout>
    <groupBox id="groupBox">
        <grid id="grid">
            <rows>
                <row>
                    <label id="mainScreenLabel" align="MIDDLE_LEFT" value="msg://mainWindow"/>
                    <lookupField id="mainWindowField"
                                 textInputAllowed="false"
                                 width="theme://cuba.web.settings-window.defaultScreenField.width"/>
                </row>
            </rows>
        </grid>
    </groupBox>
</layout>

You correctly used userSettingService for settings saving.

public class ExtSettingsWindow extends SettingsWindow {

    @Inject
    private LookupField<String> mainWindowField;

    @Override
    protected void init(InitEvent initEvent) {
        super.init(initEvent);

        // Values correspond to particular main screen ids
        mainWindowField.setOptionsMap(ImmutableMap.of(
                "Tob Bar Menu", "mainWindow",
                "Side Menu", "sideMenuMainWindow"
        ));
        mainWindowField.setValue(userSettingService.loadSetting(App.MAIN_WINDOW_SCREEN_ID));

        mainWindowField.addValueChangeListener(stringValueChangeEvent ->
                userSettingService.saveSetting(App.MAIN_WINDOW_SCREEN_ID, stringValueChangeEvent.getValue()));
    }
}
  1. Create an extension of DefaultApp and register it in web-spring.xml:
    If a user logged in we can obtain main screen id and return it as a value of the root window.
public class App extends DefaultApp {
    public static final String MAIN_WINDOW_SCREEN_ID = "mainWindowScreenId";

    @Inject
    protected UserSettingService userSettingService;

    @Override
    protected String routeTopLevelWindowId() {
        if (connection.isAuthenticated()) {
            String screenId = userSettingService.loadSetting("mainWindowScreenId");
            return Strings.isNullOrEmpty(screenId) ? "mainWindow" : screenId;
        } else {
            return "loginWindow";
        }
    }
}

<bean class="com.company.demo.web.app.App"
          name="cuba_App"
          scope="vaadin"/>

main-window-choice.zip (81.6 KB)

3 Likes
#5

Thank you Gleb, this looks cool.
It seems that the same code works only for platform v7. I shall try it later in my project when I move it to this platform version.