Log messages
Titles and messages are plain text. A duration of zero keeps a message open until dismissed.
Utility.alert.log.success({
title: 'Saved',
text: 'Your changes are ready.',
duration: 4000
});Utility Sandbox
Explore the framework, try a control, and use the examples in your own pages.
Notifications & prompts
Use a log for feedback and a prompt when someone needs to make a decision or enter information.
Prompt
Open a form from the page footer. Escape closes it and restores focus. Keep an explicit Cancel action.
Utility.alert.prompt.open('#sandbox-prompt', {size: 'small'});
Utility.alert.prompt.close();Context menus
Bind a small menu to a button. On smaller screens the same content fits within the viewport.
Anchored menu
Try keyboard focus, Escape, and clicking outside the menu.
Opening & closing
Utility.ctxm.open('#sandbox-ctxm', '#sandbox-ctxm-button', {
screen_lock: true,
close_button: true
});
Utility.ctxm.close();Keep the menu element in #html-footer with the ctxm class.
Forms & inputs
Select an input to see its PHP setup and live example below. These demonstrations do not save data.
Attachments demonstrate selection only; uploads require a page-owned handler. The folder example uses demonstration folders.
Input example
Installing dynamic inputs
Utility.installDirectory(container, true);
Utility.installInput(container);
container.addEventListener('input-change', event =>
{
// Read the input and validate it again on the server.
});Dock & page integration
The dock holds shared navigation and page-specific controls. Keep documentation here instead of hiding tools behind long-press gestures.
Page controls
The left page tab can provide shortcuts specific to the current page.
Page hooks
protected function menuLeft(): void
{
echo '<p>Page-specific controls</p>';
}