Skip to content

Latest commit

 

History

History
59 lines (45 loc) · 1.86 KB

File metadata and controls

59 lines (45 loc) · 1.86 KB

UcUserMenu

An avatar + name button that opens a dropdown panel with user information and action buttons (Settings, Sign Out).

Properties

Property Type Default Description
ucid string Unique instance ID. Always set first in WebPanel.
UserName string "" Full name displayed in trigger and panel
UserEmail string "" Email address shown in the dropdown header
AvatarUrl string "" URL to the user's avatar image. If empty, shows the first letter of UserName.

Events

Event When fired
OnLogout When the user clicks "Sign Out"
OnSettings When the user clicks "Settings"

WebPanel Integration

Event Start
    Do 'BuildUserMenu'
EndEvent

Sub 'BuildUserMenu'
    UCUserMenu1.ucid      = !'header-user-menu'
    UCUserMenu1.UserName  = &LoggedUserName
    UCUserMenu1.UserEmail = &LoggedUserEmail
    UCUserMenu1.AvatarUrl = &LoggedUserAvatarUrl
EndSub

Event UCUserMenu1.OnLogout
    // Handle logout: clear session, redirect to login, etc.
    WebSession.Clear()
    WbpLogin.Call()
EndEvent

Event UCUserMenu1.OnSettings
    WbpUserSettings.Popup()
EndEvent

Expected Behavior

  • Shows avatar (image or initial letter fallback) + name + chevron
  • Clicking opens a panel with full name, email, and action buttons
  • Clicking outside or scrolling closes the panel
  • Keyboard accessible: Enter/Space to toggle, Escape to close
  • Multiple instances work independently (different ucid values)

Notes

  • CSS prefix: usermenu- (classes: .usermenu, .usermenu__trigger, .usermenu__avatar, etc.)
  • Avatar fallback uses first character of UserName on a blue background
  • "Sign Out" button is styled in red (danger variant)
  • Replace hardcoded color values with your project's DSO tokens if embedding in a token-driven DSO