Geejing WebBuilder Beginner Development Complete Tutorial Preface

Geejing WebBuilder is an enterprise-level browser-based low-code development platform. It requires no local development tools or complex environment configuration. All page design, functional development and business logic implementation can be completed online. With basic operational proficiency, beginners can independently develop management ledgers, business forms, data lists, approval workflows, import and export functions, and other common business modules. This standardized tutorial is designed for new implementers, developers and operation & maintenance personnel to get started quickly.

1. Basic Platform Knowledge (Must-Know for Beginners)

To develop with WebBuilder, you only need to master three core concepts:

1. XWL Page File: Stores page layout, components, forms, tables and front-end events. It serves as the overall page carrier. Changes take effect immediately after saving, with no server restart required.
2. Actions Server Script: The back-end logic processing core, responsible for data query, creation, update, deletion, SQL execution, third-party interface docking and other server-side functions.
3. Visual Components: All business functions are implemented through drag-and-drop operations, including input boxes, drop-down selections, date pickers, data tables, buttons, pop-up windows and file upload components.
4. System Login & Development Environment Access
5. Access the WebBuilder homepage via the server IP and port address.
6. Log in with the administrator account (default: admin / admin).
7. Navigate to Development Suite — Integrated IDE to enter the development workspace.
8. Verify normal database connection inManagement Tools — Database Configuration to ensure readable and writable business data.

3. Standard Development Process (Universal for All Businesses)

All management pages, ledger systems and business forms follow a unified development workflow:
Create Folder → Create XWL Page → Build Page Layout → Drag and Drop Components → Write Back-End Scripts → Bind Button Events → Preview & Debug → Configure Menu & Permissions → Launch Online
Step 1: Create Business Directory and Page

1. Right-click in the left resource manager to create a new folder for classified management of modular functions.
2. Create a new page file in the folder and name it with a standardized English business name.
3. Double-click the XWL file to open the visual editing workspace. Step 2: Build Standard Page Layout All backend management pages adopt a unified three-section layout:
4. Top area: Query components (input box, drop-down filter, time filter).
5. Middle area: Function buttons (Add, Edit, Delete, Export, Refresh).
6. Bottom area: Grid data table for business data display. Use the vertical layout component to fill the entire page for adaptive display and standardized styling. Step 3: Drag and Drop Form Components Drag corresponding components according to business requirements. Common components include: Text input box, number input box, drop-down selection, date picker, text area, file upload component. Configure parameters in the right property panel: label name, field ID, required verification, placeholder prompt, maximum length, read-only status and hidden status. Step 4: Configure Grid Data Table The Grid table is the core of business data display. Beginners must master basic configurations:
7. Enable pagination, serial number column, check box and adaptive width.
8. Add corresponding table columns matching form fields.
9. Enable Excel data export function.
10. Configure the table request address to bind the back-end query interface. Step 5: Write Basic CRUD Server Scripts (Actions) Click Actions on the right sidebar and create four basic interfaces to implement complete business capabilities.

1. Pagination Query

let page = parseInt(Params.page||1);
let pageSize = parseInt(Params.pageSize||10);
let key = Params.key||"";

let sql = "select * from table_name where 1=1 ";
let arr = [];

if(key){
    sql += " and name like ? ";
    arr.push("%"+key+"%");
}

return Wb.db.queryPage(sql,arr,page,pageSize);

1. Create & Save

let data = Params;
Wb.db.insert("table_name",data);
return {success:true,msg:"Saved successfully"};

1. Update & Save

let data = Params;
Wb.db.update("table_name",data,"id");
return {success:true,msg:"Modified successfully"};

1. Delete Data

let id = Params.id;
Wb.db.delete("table_name",{id:id});
return {success:true,msg:"Deleted successfully"};

Step 6: Bind Front-End Button Events

1. Add Button: Pop up the form window and call the create interface after submission.
2. Edit Button: Obtain the selected table row data, backfill the form, and call the update interface after submission.
3. Delete Button: Pop up confirmation prompt, call the delete interface, and refresh the data table.
4. Query Button: Pass filter parameters, call the query interface and refresh the data list. Step 7: Preview and Debug Click the preview button in the upper right corner to test add, edit, delete, query, pagination and export functions, ensuring all business processes work normally.

4. Online Launch (Menu & Permission Configuration)

Menu configuration is mandatory after development, otherwise the function cannot be accessed:

1. Go to Management Tools — Menu Management.
2. Create a new menu, fill in name, icon and sorting, and bind the corresponding XWL page path.
3. Go to Role Management to assign menu and button permissions to target roles.
4. Refresh the system to complete online launch.

5. Advanced Common Functions for Beginners

1. Master-Detail Table Development Applicable to one-to-one business scenarios such as business documents, equipment ledgers and maintenance records. Select a row in the master table, pass the primary key ID to the detail table, and automatically load matching detailed data.
2. File Upload Function Drag and drop the upload component directly. It supports images, documents and compressed packages with zero extra configuration.
3. Approval Workflow Design approval nodes and conditional branches via the workflow designer. Bind the workflow start button on the page to realize automatic flow circulation, to-do reminders and full-process traceability.
4. One-Click AI Page Generation The platform supports AI intelligent generation of complete business pages. Input natural language requirements to automatically generate forms, tables, query logic and CRUD scripts, greatly improving development efficiency.

6. Common Problems & Solutions

1. No data displayed in Grid table: Check database table name, field name, query parameters and Action address configuration.
2. No response after saving: Check duplicate form fields, empty required items and script errors.
3. Page modifications not taking effect: Re-save the XWL file, clear browser cache and refresh the preview page.

7. Learning Summary

The core development logic of WebBuilder low-code platform is: Drag-and-Drop Layout + Component Configuration + Lightweight Scripting + Permission Deployment. No advanced coding skills are required. Beginners can independently develop various ledgers, approval systems and management platforms to meet most enterprise digital business demands by mastering the standard development process.