WebBuilder Geejing: openItem & Wb.invoke Complete Usage Guide and In‑Depth Technical Analysis

Preface

WebBuilder Geejing is a lightweight, high‑efficiency low‑code rapid‑development platform. It adopts an architecture combining visual drag‑and‑drop development and lightweight script extension, and is widely used for enterprise back‑office systems, data management platforms and business workflow applications. It provides abundant built‑in frontend interaction APIs and component scheduling capabilities, greatly reducing development costs and cycle times for enterprise systems.

Among its core capabilities, openItem method and global dispatcher Wb.invoke are cornerstones for frontend interaction. They are commonly used for triggering pop‑up windows, page navigation, component activation and business module invocation. Mastery of these APIs is essential for secondary development, custom button implementation and extended business interactions on WebBuilder Geejing. This article covers basic usage, applicable scenarios, underlying execution mechanisms, practical code samples, optimization recommendations and troubleshooting.

1. Core Concept Overview

1.1 openItem Method

openItem is a native built‑in method for opening pages or components within WebBuilder Geejing. It is designed to trigger detail pop‑ups, edit panels, custom pages and business module entries. No extra dependencies are required; it is available globally. It is typically bound to clickable DOM elements such as <a> links and buttons.

Key advantages:

• Native compatibility with platform routing rules
• Built‑in privilege & permission verification
• Supports multiple display modes: pop‑up, new tab, embedded panel
• Seamless inheritance of page context and business data
• Unlike raw window.open, it is fully integrated into the low‑code ecosystem.

1.2 Wb.invoke Global Dispatcher

Wb.invoke is the unified global event dispatcher kernel of WebBuilder Geejing. Almost all native component events, custom button clicks and custom HTML element actions go through this entry point. It parses element attributes, validates permissions, dispatches target methods, binds runtime context and catches runtime exceptions.

Relationship summary:

• openItem: the concrete business function for opening items/pages.
• Wb.invoke: the generic dispatcher that receives a DOM element and executes the target method declared on that element.

1.3 Standard Native Syntax

This is the canonical static invocation pattern for custom HTML components and link‑style buttons in visual configurators:

<a method="openItem" onclick="Wb.invoke(this);">Open Business Item</a>

Attribute breakdown:

• method="openItem": declares which platform method to execute, telling the dispatcher to run the open‑item logic.
• onclick="Wb.invoke(this);": click‑event binding. Passes the current DOM element as runtime context.
• this: critical context carrier, transporting method, custom data‑* attributes, page scope and current row data.

2. Hands‑on Practical Usage

2.1 Minimal Static Usage (Zero‑code Configuration)

Embed this snippet inside custom HTML components without extra JavaScript to trigger pop‑ups or page navigation.

<!-- Standard platform invocation -->
<a method="openItem"
   onclick="Wb.invoke(this);"
   data-item-id="1001"
   data-type="detail">
View Item Detail
</a>

Important data‑* parameters for openItem:

• data-item-id: primary business identifier of target record
• data-type: open mode:
  • detail: detail pop‑up
  • edit: edit pop‑up
  • add: new‑record form
  • newPage: open in new browser tab
• data-url: custom target URL for internal or permitted external links.

2.2 Dynamic Parameter Binding for Table Rows

In table‑list scenarios, inject row‑scope template variables to generate row‑specific links:

<!-- Table row link, dynamically consumes current row field values -->
<a method="openItem"
   onclick="Wb.invoke(this);"
   data-item-id="<%=row.id%>"
   data-type="detail"
   data-title="View detail of【<%=row.name%>】">
View Detail
</a>

2.3 Manual JavaScript Invocation

For conditional branching, asynchronous callbacks and complex business logic, construct a virtual DOM element and call Wb.invoke programmatically:

// Programmatically trigger openItem
function openCustomItem(itemId, itemType) {
  const tempDom = document.createElement('a');
  tempDom.setAttribute('method', 'openItem');
  tempDom.setAttribute('data-item-id', itemId);
  tempDom.setAttribute('data-type', itemType || 'detail');
  Wb.invoke(tempDom);
}

// Sample call
openCustomItem('20260825', 'edit');

3. Underlying Technical Mechanism

3.1 Wb.invoke Execution Lifecycle

1. Context Parsing: Reads method, all data‑* custom attributes, page scope and current user permission from the passed‑in DOM object.
2. Pre‑validation & Interception: Checks operation permissions and parameter validity; blocks illegal requests and renders hints.
3. Method Dispatch: Matches the value of method to the corresponding built‑in handler (e.g. openItem).
4. Business Logic Execution: Runs openItem logic, resolves display mode, assembles routing parameters and renders pop‑up / page view.
5. Post‑processing & Callback: Triggers page initialization, data loading, callback hooks and logging.

3.2 openItem Internal Capabilities

openItem is more than simple navigation; it is a modular page‑scheduling engine:

• Adaptive Routing: Automatically resolves platform internal paths to avoid 404 errors.
• Context Inheritance: Opened pop‑ups/pages inherit parent‑page permissions, filters and business context.
• Multi‑mode Rendering: Supports modal dialog, embedded panel, drawer and new‑tab modes driven by data‑type.
• Built‑in Security: Parameter sanitization and XSS protection are applied by the platform kernel.

3.3 openItem+Wb.invoke vs Native window.open

表格

Dimension	WebBuilder openItem + Wb.invoke	Native window.open
Permission Handling	Automatic platform permission check, unauthorized access blocked	No permission check
Context Transfer	Automatically inherits page/user/business context	Manual parameter concatenation, context lost
Render Modes	Dialog, embedded panel, new tab	Only new tab / browser window
Ecosystem Compatibility	Fully integrated with low‑code platform	Detached from platform context, style & permission issues likely
Security	Built‑in parameter filtering & security guards	No native security protection

4. Advanced Real‑world Scenarios

4.1 Open Custom Page in Modal Dialog

<a method="openItem"
   onclick="Wb.invoke(this);"
   data-url="/custom/form/addUser"
   data-type="dialog"
   data-width="800"
   data-height="600">
Add New User
</a>

Additional supported attributes: dialog width, height, mask configuration, closable flag and custom dialog title.

4.2 openItem with Close‑callback to Refresh Parent Page

After user completes operations in pop‑up, refresh parent‑page table:

function openItemWithCallback(id) {
  const dom = document.createElement('a');
  dom.setAttribute('method', 'openItem');
  dom.dataset.itemId = id;
  dom.dataset.type = 'edit';
  // Callback fires when dialog is closed
  dom.onClose = function () {
    Wb.reloadTable('tableList');
    Wb.tipDone('Data updated successfully');
  };
  Wb.invoke(dom);
}

4.3 Pre‑validation via Wb.ajax Before Opening Item

Invoke backend validation API; open item only when business condition passes:

function checkAndOpenItem(id) {
  Wb.ajax({
    url: Wb.getPath() + '/actions&xaction=checkItemStatus',
    params: { id: id },
    success: function (res) {
      if (res.code === 0) {
        openCustomItem(id, 'detail');
      } else {
        Wb.tipError(res.msg || 'This record cannot be viewed');
      }
    }
  });
}

5. Common Pitfalls & Troubleshooting

5.1 Click triggers no action

• Missing or mis‑spelled method="openItem" attribute → dispatcher cannot resolve target method.
• Duplicated click‑event bindings causing event interception.
• Current user lacks access permission for target page; platform silently blocks invocation.

Resolution: strictly follow the standard markup; remove redundant click handlers; double‑check role‑based permission configuration.

5.2 Parameters not passed, target page shows empty data

All business parameters should be delivered via data‑* attributes. Avoid manual URL concatenation, as those values will not be parsed by Wb.invoke.

5.3 Broken dialog styles or 404 page errors

Do not use raw window.open for internal platform pages. Always use the native openItem mechanism to keep routing, styling and permission context intact.

6. Best Practices

1. Prefer static markup for simple scenarios: Use <a method="openItem" onclick="Wb.invoke(this);"> for visual‑configurator pages for maximum compatibility.
2. Encapsulate JavaScript for complex workflows: Use programmatic Wb.invoke for conditional logic, async pre‑checks and callback‑driven scenarios.
3. Avoid mixing raw window.open for internal pages: Stick to platform‑native APIs to preserve permission, styling and context.
4. Pass custom parameters through data‑* attributes: Follow platform parsing conventions to prevent data loss.

Conclusion

openItem and Wb.invoke form the foundation of frontend interaction within WebBuilder Geejing low‑code platform. Mastering these mechanisms enables you to implement pop‑ups, navigation, custom components and end‑to‑end business workflows. Leveraging platform‑native APIs avoids many compatibility, routing and permission‑related bugs, and is a required skill for WebBuilder secondary‑development engineers.