Menu & Dialog Functions Documentation

This guide covers how to use show_menu, show_alert, show_processing, and show_toast in both HTML and JavaScript.

1. show_menu()

Opens a custom menu/dialog box. Menus can slide from bottom, top, or appear as modals.

JavaScript Usage

show_menu(
  name,                    // Menu ID (required)
  reset = false,          // Reset all elements in menu (optional)
  locked = false,         // Lock menu (prevent closing) (optional)
  outside_click = {...},  // Action on outside click (optional)
  button_click = [...]    // Actions for buttons (optional)
);

Examples

Basic Usage

// Open menu without resetting
show_menu("menu_my_menu", false, false);

// Open menu and reset all elements
show_menu("menu_my_menu", true, false);

// Open locked menu (cannot be closed)
show_menu("menu_my_menu", false, true);

With Custom Actions

// Custom outside click action
show_menu("menu_my_menu", false, false, { operation: "function", function_name: "myFunction" }, [
  { operation: "close" },
  { operation: "function", function_name: "saveData" },
  { operation: "close" },
]);

HTML Structure

<div
  id="menu_my_menu"
  class="menu menu-box-bottom menu-box-detached rounded-m"
  data-menu-effect="menu-over"
>
  <div class="menu-title mt-n1">
    <h1>Menu Title</h1>
    <a href="#" class="close-menu"><i class="fa fa-times"></i></a>
  </div>
  <div class="divider mt-0 mb-0"></div>
  <div class="content">
    <!-- Your menu content here -->
  </div>
</div>

<div
  id="menu_my_modal"
  class="menu menu-box-modal menu-box-detached rounded-m"
  data-menu-effect="menu-over"
>
  <div class="content">
    <!-- Your modal content here -->
  </div>
</div>

<div
  id="menu_my_menu"
  class="menu menu-box-top menu-box-detached rounded-m"
  data-menu-effect="menu-over"
>
  <div class="content">
    <!-- Your menu content here -->
  </div>
</div>

Closing Menus from HTML

Method 1: Using close-menu class (Automatic)

<!-- Simple close button - automatically closes menu -->
<a href="#" class="close-menu">
  <i class="fa fa-times"></i>
</a>

<!-- Close button with app-nursery-click class -->
<a href="#" class="close-menu app-nursery-click">
  <i class="fa fa-times"></i>
</a>

Method 2: Using data-click attribute (Explicit)

<!-- Close menu without reset -->
<a
  href="#"
  data-click='{"operation": "hide_menu", "reset": false, "open_last": false}'
  class="btn btn-full bg-grass-dark"
>
  Close
</a>

<!-- Close menu and open last closed menu -->
<a
  href="#"
  data-click='{"operation": "hide_menu", "reset": false, "open_last": true}'
  class="btn btn-full"
>
  Back
</a>

<!-- Close menu and reset it -->
<a
  href="#"
  data-click='{"operation": "hide_menu", "reset": true, "open_last": false}'
  class="btn btn-full"
>
  Cancel
</a>

Method 3: In Menu Title (Common Pattern)

<div class="menu-title mt-n1">
  <h1>Menu Title</h1>
  <a href="#" class="close-menu app-nursery-click">
    <i class="fa fa-times"></i>
  </a>
</div>

Parameters

Parameter	Type	Default	Description
`name`	string	required	ID of the menu element
`reset`	boolean	`false`	If `true`, resets all inputs/dropdowns in menu
`locked`	`false`	`false`	If `true`, menu cannot be closed by user
`outside_click`	object	`{operation: "close"}`	Action when clicking outside menu
`button_click`	array	`[{operation: "close"}, ...]`	Actions for 3 buttons

2. show_alert()

Shows an alert dialog with customizable header, text, icon, colors, and buttons.

JavaScript Usage

show_alert(
  header = "Error",                                    // Alert title
  text = "Something has gone wrong",                  // Alert message
  icon = ["fas", "fa-exclamation-triangle"],          // Icon classes
  colour = ["red", "dark"],                           // Color scheme
  locked = false,                                      // Lock alert
  language = true,                                     // Translate text
  outside_click = { operation: "close" },            // Outside click action
  button_click = [{ operation: "close" }, ...],      // Button actions
  button_display = [                                  // Button configuration
    { visible: true, caption: "Understood", button_type: 1, button_colour: ["grass", "dark"] },
    { visible: false },
    { visible: false }
  ]
);

Examples

Simple Error Alert

show_alert("Error", "Something went wrong", ["fas", "fa-exclamation-triangle"], ["red", "dark"]);

Success Alert with Custom Button

show_alert(
  "Success",
  "Data saved successfully",
  ["fas", "fa-check-circle"],
  ["grass", "dark"],
  false,
  true,
  { operation: "close" },
  [{ operation: "function", function_name: "refreshPage" }],
  [
    { visible: true, caption: "OK", button_type: 1, button_colour: ["grass", "dark"] },
    { visible: false },
    { visible: false },
  ]
);

Confirmation Alert (2 Buttons)

show_alert(
  "Confirm",
  "Are you sure you want to delete?",
  ["fas", "fa-question-circle"],
  ["orange", "dark"],
  false,
  true,
  { operation: "close" },
  [
    { operation: "close" },
    { operation: "function", function_name: "deleteItem" },
    { operation: "close" },
  ],
  [
    { visible: true, caption: "Cancel", button_type: 2, button_colour: ["red", "dark"] },
    { visible: true, caption: "Delete", button_type: 1, button_colour: ["red", "dark"] },
    { visible: false },
  ]
);

Locked Alert (Cannot Close)

show_alert(
  "Processing",
  "Please wait, do not close this window",
  ["fas", "fa-spinner"],
  ["blue", "dark"],
  true // Locked - user cannot close
);

Button Types

Type 1: Filled button (bg-{color}-{tone})
Type 2: Outlined button (color-{color}-{tone} border-{color}-{tone})

Available Colors

red, green, blue, orange, grass, yellow, etc.
Tones: light, dark

Closing Alerts

JavaScript Usage

// Close alert
hide_alert();

// Close and open last closed menu
hide_alert(true);

HTML Usage

Alerts can be closed using the same methods as menus:

Method 1: Using close-menu class

<a href="#" class="close-menu">
  <i class="fa fa-times"></i>
</a>

Method 2: Using data-click attribute

<a
  href="#"
  data-click='{"operation": "hide_menu", "reset": false, "open_last": false}'
  class="btn btn-full"
>
  Close
</a>

Note: Alert buttons are configured in the button_click parameter when calling show_alert(). The framework automatically handles button clicks based on this configuration.

HTML Structure

The alert menu is a system menu with ID system_menu_alert. It’s already defined in the framework, so you don’t need to create it in HTML.

3. show_processing()

Shows a loading/processing dialog. Automatically locked (cannot be closed).

JavaScript Usage

show_processing(
  (header = "Processing"), // Header text
  (text = "Please Wait"), // Message text
  (language = true) // Translate text
);

Examples

Basic Processing

show_processing();
// Shows: "Processing" / "Please Wait"

Custom Processing Message

show_processing("Uploading Files", "Please wait while we upload your files", true);

Without Translation

show_processing("Processing Request", "Please Wait", false);

Closing Processing

JavaScript Usage

// Close processing dialog
hide_processing();

// Close and open last closed menu
hide_processing(true);

HTML Usage

Processing dialogs are automatically locked (cannot be closed by user). They should only be closed programmatically using hide_processing() after the operation completes.

Note: Processing dialogs cannot be closed via HTML buttons as they are locked by default.

Common Pattern

// Show processing before API call
show_processing("Loading Data", "Please Wait", true);

// Make API call
load_report(
  "endpoint",
  {
    /* params */
  },
  function success(response) {
    hide_processing();
    // Handle success
  },
  function error(response) {
    hide_processing();
    show_alert("Error", "Failed to load data");
  }
);

HTML Structure

The processing menu is a system menu with ID system_menu_processing. It’s already defined in the framework.

4. show_toast()

Shows a toast notification (snackbar) that auto-dismisses.

JavaScript Usage

show_toast(
  (text = "Something has gone wrong"), // Toast message
  (icon = ["fas", "fa-exclamation-circle"]), // Icon classes
  (colour = ["grass", "dark"]), // Background color
  (language = true) // Translate text
);

Examples

Success Toast

show_toast("Data saved successfully", ["fas", "fa-check-circle"], ["grass", "dark"], true);

Error Toast

show_toast("Failed to save data", ["fas", "fa-times-circle"], ["red", "dark"], true);

Warning Toast

show_toast("Please check your input", ["fas", "fa-exclamation-circle"], ["orange", "dark"], true);

Info Toast

show_toast("New message received", ["fas", "fa-info-circle"], ["blue", "dark"], true);

Available Icons

["fas", "fa-check-circle"] - Success
["fas", "fa-times-circle"] - Error
["fas", "fa-exclamation-circle"] - Warning
["fas", "fa-info-circle"] - Info
["fas", "fa-spinner"] - Loading

HTML Structure

The toast menu is a system menu with ID menu_toast. It’s already defined in the framework.

Complete Examples

Example 1: Form Submission Flow

function submitForm() {
  // Show processing
  show_processing("Submitting", "Please wait...", true);

  // Submit data
  load_report(
    "submit_form",
    {
      /* form data */
    },
    function success(response) {
      hide_processing();
      show_alert(
        "Success",
        "Form submitted successfully",
        ["fas", "fa-check-circle"],
        ["grass", "dark"]
      );
    },
    function error(response) {
      hide_processing();
      show_alert(
        "Error",
        response.error_details,
        ["fas", "fa-exclamation-triangle"],
        ["red", "dark"]
      );
    }
  );
}

Example 2: Confirmation Before Delete

function confirmDelete(itemId) {
  show_alert(
    "Delete Item",
    "Are you sure you want to delete this item?",
    ["fas", "fa-trash"],
    ["red", "dark"],
    false,
    true,
    { operation: "close" },
    [
      { operation: "close" },
      { operation: "function", function_name: "deleteItem", parameters: itemId },
      { operation: "close" },
    ],
    [
      { visible: true, caption: "Cancel", button_type: 2, button_colour: ["red", "dark"] },
      { visible: true, caption: "Delete", button_type: 1, button_colour: ["red", "dark"] },
      { visible: false },
    ]
  );
}

function deleteItem(itemId) {
  hide_alert();
  show_processing("Deleting", "Please wait...", true);

  // Delete API call
  load_report(
    "delete_item",
    { id: itemId },
    function success() {
      hide_processing();
      show_toast("Item deleted successfully", ["fas", "fa-check-circle"], ["grass", "dark"], true);
    },
    function error() {
      hide_processing();
      show_alert("Error", "Failed to delete item", ["fas", "fa-times"], ["red", "dark"]);
    }
  );
}

HTML:

<button
  id="button_open_settings"
  data-click='{"operation": "function", "function_name": "openSettings"}'
  class="btn btn-full bg-grass-dark"
>
  Open Settings
</button>

<div id="menu_settings" class="menu menu-box-bottom menu-box-detached rounded-m">
  <div class="menu-title mt-n1">
    <h1>Settings</h1>
    <a href="#" class="close-menu"><i class="fa fa-times"></i></a>
  </div>
  <div class="divider mt-0 mb-0"></div>
  <div class="content">
    <!-- Settings content -->
  </div>
</div>

JavaScript:

function openSettings() {
  show_menu("menu_settings", true, false);
}

Quick Reference

Function Signatures

// Menu
show_menu(name, reset, locked, outside_click, button_click);
hide_menu(open_last, reset);

// Alert
show_alert(
  header,
  text,
  icon,
  colour,
  locked,
  language,
  outside_click,
  button_click,
  button_display
);
hide_alert(open_last);

// Processing
show_processing(header, text, language);
hide_processing(open_last);

// Toast
show_toast(text, icon, colour, language);

Common Patterns

Use Case	Function	Example
Show loading	`show_processing()`	Before API call
Show success	`show_toast()` or `show_alert()`	After successful operation
Show error	`show_alert()`	On error
Confirm action	`show_alert()` with 2 buttons	Before delete
Custom dialog	`show_menu()`	Custom menu/dialog

Notes

System Menus: show_alert(), show_processing(), and show_toast() use predefined system menus. You don’t need to create them in HTML.
Custom Menus: For show_menu(), you need to create the menu element in HTML with the appropriate classes.
Translation: Set language = true to automatically translate text using the framework’s translation system.
Locked Menus: Use locked = true to prevent users from closing dialogs (useful for processing).
Button Actions: Button actions can be:
- { operation: "close" } - Close menu
- { operation: "function", function_name: "myFunction" } - Call function
- { operation: "link", page_name: "page.html" } - Navigate to page
Menu Types:
- .menu-box-bottom - Slides from bottom
- .menu-box-top - Slides from top
- .menu-box-modal - Centered modal
- .menu-box-left - Slides from left
- .menu-box-right - Slides from right

Menu & Dialog Functions Documentation

Menu & Dialog Functions Documentation

1. show_menu()

JavaScript Usage

Examples

Basic Usage

With Custom Actions

HTML Structure

Bottom Menu (Slides from Bottom)

Modal Menu (Centered on Screen)

Top Menu (Slides from Top)

Closing Menus from HTML

Parameters

2. show_alert()

JavaScript Usage

Examples

Simple Error Alert

Success Alert with Custom Button

Confirmation Alert (2 Buttons)

Locked Alert (Cannot Close)

Button Types

Available Colors

Closing Alerts

JavaScript Usage

HTML Usage

HTML Structure

3. show_processing()

JavaScript Usage

Examples

Basic Processing

Custom Processing Message

Without Translation

Closing Processing

JavaScript Usage

HTML Usage

Common Pattern

HTML Structure

4. show_toast()

JavaScript Usage

Examples

Success Toast

Error Toast

Warning Toast

Info Toast

Available Icons

HTML Structure

Complete Examples

Example 1: Form Submission Flow

Example 2: Confirmation Before Delete

Example 3: Opening Custom Menu from Button

Quick Reference

Function Signatures

Common Patterns

Notes