FBO Designer

Extension cho Cursor / VS Code giúp thiết kế form FBO bằng mắt ngay trong trình soạn thảo: mở file controller là thấy form giống hệt lúc chạy thật, kéo thả để sắp xếp, bấm + để thêm, và mọi thay đổi được ghi thẳng vào file — không phải đoán layout từ XML nữa.

Làm được gì

• Xem form như thật — form, tab, lưới hiện đúng kích thước từng pixel như trên chương trình.
• Màn hình danh sách giống runtime — lưới Voucher / Report có dải tiêu đề + phụ đề, thanh nút kèm «Làm mới», hàng tổng theo Aggregation.xml, cao tới đáy khung nhìn.
• CSS đúng trang Main — chỉ nạp stylesheet từ MasterPage và trang Main của màn hình (wcommand.link), không quét hết thư mục Css.
• Sửa bằng chuột — kéo thả control, đổi chỗ, thêm hàng / field / cột, kéo giãn bề rộng, xoá.
• Tên field ngay trong ô — ô nhập form và hàng mẫu lưới hiện tên field in nghiêng, không cần rê chuột để xem tooltip.
• Xem dữ liệu thật trên lưới — biết ngay cột có đủ rộng cho tên khách hàng hay không.
• Sinh script có sẵn — khai báo lọc nhanh cho lưới, thêm cột database cho field mới.
• Báo lỗi ngay khi mở file — chỗ khai sai được gạch đỏ, bấm vào là tới đúng dòng.
• Gợi ý khi gõ — tên field và tên entity.
• Soi entity — thấy ngay mỗi &Tên; bung ra thành gì.
• Email Designer — thiết kế mẫu mail trong Message.xml bằng mắt.

---

Bắt đầu

1. Kích hoạt license

Designer chỉ chạy khi máy đã có License Key. (Báo lỗi, gợi ý và soi entity không cần license.)

1. Mở Settings (Ctrl+,), gõ FBO Designer.
2. Copy ô Machine Id, gửi kèm tên công ty / bộ phận cho admin.
3. Nhận key (dạng FBO1....), dán vào ô License Key rồi Enter.

Gặp tình huống	Cách xử lý
Báo cần license / màn hình "đang khoá"	Dán key vào Settings như trên
License hết hạn	Xin admin key mới, dán đè key cũ
Machine Id không khớp (đổi máy, cài lại Windows)	Gửi Machine Id của máy hiện tại để xin key mới
Ô License Key tự trống dù key còn hạn	Mở lại cửa sổ. Bản lưu trên máy điền lại; nếu vẫn trống thì dán key một lần

Muốn huỷ kích hoạt trên một máy: xoá trống ô License Key.

2. Mở designer

1. Mở một file controller trong thư mục Dir, Filter hoặc Grid.
2. Bấm Ctrl+Alt+O (hoặc chuột phải → FBO Designer → Mở giao diện giả lập FBO).
3. Form hiện bên phải, file bên trái. Chuyển sang file khác thì form tự đổi theo.

Mở Message.xml rồi bấm Ctrl+Alt+O thì mở Email Designer thay vì form.

Menu chuột phải trên file controller.

---

Thiết kế form

Form chứng từ: thước đo cột, ô trống, số cột mỗi control chiếm và vùng chia đôi.

Form luôn hiện kèm thước đo: số pixel mỗi cột, ô trống (gạch chéo), số cột một control chiếm, mỏ neo ⚓ và vạch chia đôi màu đỏ. Chọn một ô để xem field ấy khai ở file nào.

Thêm

• Thêm hàng: rê chuột lên hàng → bấm + ở mép ngoài. Form chia đôi thì có hai nút + cho nửa trái / nửa phải.
• Thêm field: bấm vào ô trống → bấm (+) giữa ô.
• Thêm cột lưới: bấm (+) giữa hai tiêu đề cột.

Di chuyển và đổi chỗ

• Kéo control sang ô trống → dời tới đó.
• Kéo control lên control khác cùng hàng → hai control đổi chỗ cho nhau.
• Kéo tiêu đề cột lưới sang chỗ khác → dời cột.

Đổi kích thước

Kéo mép dưới tab để đổi chiều cao.

• Control rộng / hẹp hơn: chọn control, kéo mép trái hoặc phải của nó.
• Bề rộng cột form: kéo trên dải số pixel phía trên form.
• Tách / gộp cột form: bấm con số pixel trên dải thước → chọn Tách, ◄Gộp hoặc Gộp►. Thao tác này đổi cột cho mọi hàng dùng chung bộ cột đó; designer báo trước số hàng / số file sẽ bị sửa.
• Bề rộng cột lưới: kéo mép tiêu đề cột.
• Chiều cao tab / vùng chính: kéo đường kẻ ngang ở đáy. Nếu chiều cao đang khai bằng entity hoặc công thức (vd 380 + 20), designer hỏi bạn muốn ghi thành một con số, sửa trong entity hay tự sửa trong file — không tự ghi đè làm mất công thức.
• Mỏ neo và vạch chia đôi: kéo ngang để dời.

Xoá và hoàn tác

• Delete — xoá control / cột đang chọn.
• Shift+Delete — xoá luôn cả phần khai báo của field (nhãn, chú thích… đi kèm).
• Ctrl+Z — hoàn tác ngay trong designer.

Cột ẩn

Nút Hiện cột ẩn trên thanh công cụ cho hiện các cột / control đang ẩn (dạng gạch chéo) để kéo thả tới chúng. Chỉ để thiết kế — không làm thay đổi file.

Trên form, nút chỉ lo cột rộng 0px. Field hidden đặt ở cột rộng vẫn luôn hiện (viền đứt + chữ nghiêng) để biết runtime không hiện control đó. Trên lưới, cột hidden vẫn bật / tắt theo nút như cũ.

Field nằm trong file dùng chung

Khi sửa một control đến từ file dùng chung (Include, entity), designer hỏi trước nên ghi vào file gốc (ảnh hưởng mọi màn hình dùng nó) hay chỉ sửa riêng màn hình này.

Ctrl+click hoặc double click vào một ô để mở đúng file và dòng khai báo nó.

---

Lưới

Lưới chi tiết: bề rộng từng cột và nút (+) chèn cột.

Mở file trong Grid thì designer vẽ đúng loại lưới:

• Chi tiết (Detail, thường nhúng trong tab form) — thước cột, (+) chèn cột, kéo giãn.
• Danh sách (Voucher / Report, ví dụ SVTran) — dải tiêu đề xanh kèm <subTitle>, thanh nút có «Làm mới», thân lưới cao hết khung nhìn. Có cột aggregate="Sum" và controller nằm trong Grid\Config\Aggregation.xml thì hàng tổng hiện số (tổng dòng mẫu đang xem).

Xem dữ liệu thật

Mở designer cho một lưới là extension tự lấy vài dòng dữ liệu thật từ database của khách và đổ vào lưới — đúng bề rộng cột, đúng định dạng ngày / số, đúng chỗ bị cắt chữ. Nhờ vậy biết ngay cột 60px có đủ chỗ cho tên khách hàng hay không.

• Ctrl+Alt+D — bật / tắt dữ liệu thật.
• Lưới báo cáo và lưới cần nhập tham số không tự lấy: bấm Ctrl+Alt+D, điền tham số vào form hiện ra rồi bấm chạy.
• Chỉ đọc dữ liệu, không sửa gì trên database. Dữ liệu không lưu lại sau khi đóng cửa sổ.
• Cột nào không lấy được thì hiện gạch chéo xám, các cột khác vẫn hiện bình thường.

Cần có SQL Server Command Line Tools (sqlcmd) trên máy.

Khai báo lọc nhanh — Ctrl+Alt+F

1. Mở một file lưới trong Grid.
2. Bấm Ctrl+Alt+F.
3. Tick các cột muốn cho lọc nhanh. Nếu file còn thiếu khai báo, đồng ý để extension bổ sung.
4. Extension mở một script SQL — bạn tự chạy script đó trên database sys của khách.

Cột nào extension chưa chắc nguồn dữ liệu sẽ được đánh dấu để bạn kiểm tra lại.

Sinh script thêm cột — Ctrl+Alt+C

Thêm field mới trên form mà database chưa có cột? Bấm Ctrl+Alt+C: extension tìm các field còn thiếu cột, bạn tick field cần thêm, extension mở script SQL để bạn tự chạy trên database khách.

Extension không bao giờ tự chạy script sửa database. Mọi script đều mở ra để bạn đọc và tự chạy.

---

Làm việc với file XML

Ba tính năng dưới đây chạy trên mọi file trong App_Data\Controllers, không cần license, không cần mở designer.

Báo lỗi ngay khi mở file

Mở file là lỗi hiện ngay trong Problems (Ctrl+Shift+M) và gạch đỏ đúng chỗ sai:

• Control trỏ tới field chưa khai, hoặc khai mà không dùng tới.
• Số cột của hàng không khớp, danh sách bề rộng bị hỏng, tab khai trùng.
• Entity chưa khai, gọi vòng, hoặc trỏ tới file không đọc được.
• Khai báo lọc nhanh không khớp với dữ liệu của lưới.

Đỏ = control sẽ biến mất khỏi màn hình. Vàng = vẫn hiện nhưng đáng xem lại. Nếu lỗi nằm trong file dùng chung thì gạch đỏ hiện trong chính file đó — đúng chỗ cần sửa.

Gợi ý khi gõ

• Gõ [ → danh sách field (kể cả field đến từ file dùng chung).
• Gõ & → danh sách entity, kèm file nó trỏ tới.

Soi entity

Mỗi &Tên; được gạch chân, tô màu theo file nguồn, và ngay bên cạnh hiện một dòng ngắn cho biết nó bung ra thành gì:

<h>&Nhan;</h> ⇢ Mã khách
<off>&Off;</off> ⇢ (rỗng)
<chua>&Chua;</chua> ⚠

• (rỗng) — phần này đang bị tắt.
• ⚠ — entity chưa khai hoặc file của nó không đọc được.

Chỉ hiển thị, không thay đổi file. Tắt trong Settings → Show Insight.

---

Email Designer

Mở Options\Message.xml rồi bấm Ctrl+Alt+O:

• Chọn mẫu mail trên thanh công cụ, bấm vào phần tử trên mẫu để sửa chữ, màu, căn lề, link, ảnh.
• Kéo thả để di chuyển, Del để xoá, Ctrl+Z / Ctrl+Y để hoàn tác / làm lại.
• Bấm vào phần tử trên mẫu thì file XML nhảy tới đúng chỗ đó, và ngược lại.
• Dữ liệu mẫu: gõ số chứng từ + người nhận, bấm Lấy từ chứng từ để xem mail với dữ liệu thật.
• Xem trước mail hoàn chỉnh ở bề rộng màn hình, 600px hoặc 375px (điện thoại).
• Kiểm tra mẫu: cảnh báo ảnh thiếu thông tin, link rỗng, kiểu trình bày mà ứng dụng mail không hỗ trợ, mail quá dài dễ bị Gmail cắt.

---

Phím tắt

Phím	Việc
Ctrl+Alt+O	Mở designer (hoặc Email Designer với Message.xml)
Ctrl+Alt+D	Bật / tắt dữ liệu thật trên lưới
Ctrl+Alt+F	Khai báo lọc nhanh cho lưới
Ctrl+Alt+C	Sinh script thêm cột cho field mới
Delete / Shift+Delete	Xoá control / xoá kèm khai báo
Ctrl+Z	Hoàn tác trong designer
Ctrl+click, double click	Mở đúng file và dòng khai báo

Màu trên designer

Màu	Ý nghĩa
Cam	Số đo, số pixel, số cột control chiếm
Xanh dương	Vùng đang chọn, ô trống thao tác được
Xanh lá	Chỗ thả hợp lệ khi đang kéo
Đỏ	Vạch chia đôi, thao tác xoá, chỗ thả không hợp lệ
Xám	Ô đến từ file dùng chung
Nền cam nhạt	Hàng đang chọn

Tuỳ chỉnh (Settings → FBO Designer)

Mục	Mặc định	Dùng để
Panel Position	bên phải	Designer mở ở đâu
Confirm Foreign Edit	bật	Hỏi trước khi ghi vào file dùng chung
Confirm Delete	bật	Hỏi trước khi xoá control / cột
Entity Edit Target	hỏi	Sửa control từ entity thì ghi vào đâu
Reveal Related Files	tất cả	Ctrl+click mở bao nhiêu file liên quan
Auto Load Sample Data	bật	Tự lấy dữ liệu thật khi mở lưới
Sample Row Count	10	Số dòng dữ liệu thật (tối đa 100)
Sqlcmd Path	tự dò	Đường dẫn sqlcmd nếu cài chỗ khác
Show Insight	bật	Bật / tắt soi entity

---

Lịch sử phiên bản

1.2.0 — 13/10/2026

Tính năng mới

• Ô nhập form và hàng mẫu lưới hiện tên field in nghiêng ngay trong ô (đã phân giải %l).
• Kéo rows / height khai trong Include: hỏi ghi vào controller hay entity như hàng form.
• License Key phục hồi qua Settings / SecretStorage / globalState; hủy kích hoạt chỉ khi xóa ô License Key trên máy này.

Đã sửa

• Màn hình danh sách (Voucher / Report) gần runtime hơn: dải tiêu đề + phụ đề, «Làm mới», hàng tổng theo Aggregation.xml, lưới dính mép và cao tới đáy khung nhìn.
• Designer chỉ nạp CSS từ MasterPage + trang Main (wcommand.link); lưới Detail dùng trang của host *Tran khi cần.
• Hai thanh cuộn ngang trên lưới danh sách (tay cầm blueprint tràn mép phải).
• «Hiện cột ẩn» trên form: field hidden ở cột rộng vẫn hiện; chỉ cột 0px theo nút.
• Ảnh README trong gói VSIX; kéo chiều cao rồi Huỷ vẫn giữ đúng file; viền tab lưới; lưới đứng riêng chỉ còn một thanh cuộn ngang.

1.1.2 — 30/09/2026

Tính năng mới

• Kéo chiều cao tab / vùng chính (hoặc mỏ neo, vạch chia) khi giá trị đang khai bằng entity hay công thức: hiện hộp thoại cho chọn ghi thành một con số, sửa trong entity (khi giá trị là đúng một entity) hoặc tự sửa — mở file tại đúng chỗ đó.

Đã sửa

• Chiều cao khai bằng entity hoặc công thức bị chặn không cho kéo; chiều cao lưới trong tab viết bằng công thức hiện sai.
• Control nằm ở cột vượt quá danh sách bề rộng cột bị mất khỏi form và bị báo lỗi — giờ hiện ở cột rộng 0px như chương trình thật (bật «Hiện cột ẩn» để thấy), sửa hàng đó không còn làm mất control.
• Lưới chi tiết trong tab thiếu các cột thêm qua cấu hình ẩn của lưới.

1.1.0 — 23/09/2026

Tính năng mới

• Email Designer: thiết kế mẫu mail trong Message.xml bằng mắt — sửa chữ, màu, link, ảnh; kéo thả, xoá, hoàn tác; xem trước nhiều bề rộng; kiểm tra mẫu; lấy dữ liệu mẫu thật từ chứng từ.
• Nút «Hiện cột ẩn»: hiện cột / control ẩn để kéo thả tới chúng.
• Soi entity bật sẵn, hiện một dòng ngắn ngay cạnh mỗi &Tên;.
• Tự lấy dữ liệu thật khi mở designer cho một lưới.
• Dữ liệu thật hiện đúng định dạng ngày / số và căn lề như chương trình.
• Form tham số báo cáo: ô ngày có sẵn khung __/__/____, tự sửa ngày không hợp lệ (30/02 → 28/02).
• Form hiện đủ cả field thêm qua cấu hình ẩn của màn hình.
• Một phím Ctrl+Alt+O cho cả form lẫn mẫu mail.

Đã sửa

• Form giả lập lệch vài pixel so với form thật (hàng có ô chỉ đọc cao hơn 1px, lệch dần ở form dài).
• Tab hiện thanh cuộn ngang thừa; thiếu đường kẻ giữa tab và phần chân form; thanh cuộn của lưới trong tab bị cắt; tab hẹp hơn form thật.
• Kéo cạnh control và kéo bề rộng cột bị chồng nhau — giờ tách riêng: thân form = cạnh control, dải số pixel = bề rộng cột.
• Trên Cursor: Ctrl+click tới entity và xoá control đến từ entity không có tác dụng; lỗi mở / ghi file giờ hiện thông báo rõ ràng.
• Dữ liệu thật: tiếng Việt bị mất dấu; báo cáo lấy sai bảng kết quả; lưới chi tiết không có dữ liệu; thiếu cột thêm qua cấu hình ẩn.
• Email Designer: số không được định dạng; SQL mẫu lỗi không báo; đọc số tiền bằng chữ sai; dòng chi tiết hiện tiêu đề cột thay cho dữ liệu.

Bỏ đi

• Mục lục file, F12 và rê chuột xem thông tin trong editor — đã có extension XML khác làm tốt hơn. Gợi ý khi gõ vẫn giữ.

1.0.2 — 07/09/2026

Tính năng mới

• Báo lỗi ngay khi mở file trong Problems, gạch đỏ đúng chỗ sai, kể cả trong file dùng chung.
• Xem dữ liệu thật trên lưới (Ctrl+Alt+D) cho danh mục, chứng từ, lưới chi tiết và báo cáo.
• Gợi ý khi gõ tên field và entity.
• Thêm hàng trống trên form chia đôi; dời / đổi chỗ control giữa hai nửa form.

Đã sửa

• Thêm hàng trên form chia đôi làm lệch nửa còn lại.
• Hàng trống cao thấp không đều so với hàng có ô nhập.

1.0.1 — 31/08/2026

Tính năng mới

• Kích hoạt bằng License Key theo máy.

1.0.0 — 31/08/2026

Tính năng mới

• Form chia đôi hiện đúng như chương trình.
• Kéo để dời cột lưới.
• Dời / đổi chỗ control vẫn giữ nguyên độ rộng của nó (khi còn đủ chỗ).
• Ctrl+click chỉ mở đúng các file liên quan, không mở thừa.

Đã sửa

• Thông báo lỗi khi sinh script thêm cột rõ ràng hơn.
• Một số lỗi hiển thị khi kéo thả.

0.0.2 — 28/08/2026

Tính năng mới

• Kéo thả control sang ô trống; kéo lên control cùng hàng để đổi chỗ.
• Tách / gộp cột form trên dải thước.
• Ctrl+Z hoàn tác ngay trong designer.
• Shift+Delete xoá cả cụm (nhãn, chú thích… đi kèm field).
• Hỏi trước khi ghi vào file dùng chung / trước khi xoá.
• Rê chuột lên ô nhập để xem tên field; ô tô hai màu theo nguồn khai báo.
• Lọc nhanh tự đọc tên database từ cấu hình chương trình, không phải gõ tay.

Đã sửa

• Script lọc nhanh sai với cột hoá đơn điện tử, bảng chia kỳ và cột qua join.
• Kéo giãn cột lưới: thân lưới và dòng tổng không đi theo tiêu đề; số pixel nhảy lung tung.
• Chèn cột lưới bị ghi nhầm sang file form và không có bề rộng.
• Sau mỗi thao tác bị nhảy về tab đầu và giật hình; hiển thị chậm.
• Không thêm / xoá được control trên hàng có entity; tab chỉ chứa lưới vẫn hiện mỏ neo / vạch chia.
• Kiểu trình bày riêng của màn hình bị ghi đè; căn lề ô sai.

0.0.1 — 26/08/2026

Phiên bản đầu tiên.

• Xem form, tab, lưới như chương trình thật, với control và giao diện thật.
• Thước đo pixel, ô trống, số cột control chiếm, mỏ neo, vạch chia đôi.
• Designer tự đổi theo file đang mở.
• Thêm hàng / field / cột; kéo giãn cột; chỉnh độ rộng control.
• Mở đúng file và dòng khai báo khi Ctrl+click.
• Lệnh Khai báo lọc nhanh và Sinh script thêm cột.
• Nút phóng to / thu nhỏ; xem giao diện và hình ảnh đang dùng.

---

Góp ý

Báo lỗi, đề xuất tính năng: gửi trực tiếp cho NGUYENTDH.