MenuState (User-Defined Configuration Example)

MenuState is a specific implementation of a User-Defined Configuration used to store lightweight UI state.
In the Purchasing Application example, it tracks whether the sidebar menu is collapsed or expanded, allowing the interface to remember the user’s preference across screens.

This page expands on how MenuState works in practice and how it interacts with screens and actions.

1. Creating the MenuState Configuration

To create the configuration:

Open Design → UserDefinedConfiguration
Click +
Name the configuration MenuState
Click OK — no fields need to be defined

Lowgile creates the configuration and makes it available throughout the application.

2. Dynamic Fields (Created Automatically)

MenuState begins empty. When screens or actions reference a value, Lowgile automatically creates it.

For example:

This.MenuState.sidebarOpen = true

Even though sidebarOpen isn’t defined anywhere, Lowgile creates it dynamically.

This enables a schema-free workflow where UI state evolves naturally as you build the UI.

3. Using MenuState in Actions

A common pattern is toggling the sidebar from a button:

This.MenuState.sidebarOpen = !This.MenuState.sidebarOpen

If sidebarOpen does not yet exist, Lowgile creates it and stores the new value.

4. Reading MenuState in Screens

A screen, component, or layout can read the value:

Visible: This.MenuState.sidebarOpen

This allows UI elements to respond directly to user preferences.

5. Binding MenuState to UI Components

MenuState can drive presentation logic, such as dynamic layout sizes:

Pane.Width = This.MenuState.sidebarOpen ? 260 : 80

This creates adaptive UI behavior without workflow variables, entities, or additional logic.

Summary

MenuState demonstrates how User-Defined Configurations provide:

Dynamic, global storage
Schema-free UI state
Automatic value creation
Cross-screen accessibility
Simple integration with actions and expressions