Bắt đầu với Diagram

Phạm vi áp dụng

✅ Bravo 8 · ✅ Bravo 10

Diagram là màn hình sơ đồ / quy trình — vẽ các khối hình, mỗi khối gắn với một lệnh mở màn hình tương ứng.

Ứng dụng điển hình

Sơ đồ quy trình nghiệp vụ (VD quy trình CRM): người dùng nhìn thấy toàn bộ luồng và click thẳng vào khối hình để mở màn hình nhập liệu / báo cáo của bước đó.

Quy trình thiết lập — 3 bước

Bước 1 — khai báo trong B00Command

Khai báo 1 dòng với:

Cột	Giá trị
CommandKey	CrmProcess (ví dụ)
DLLname	Bravo.Diagram
ClassName	Diagram

Bước 2 — khai báo trong layout main

Trong BravoWidget, thêm khai báo ở thẻ mẹ Root:

<WidgetCRMDiagram>
  <Assembly>Bravo.Diagram</Assembly>
  <ClassName>BravoDiagramWidget</ClassName>
  <zSourceCommandKey>CrmProcess</zSourceCommandKey>
</WidgetCRMDiagram>

CrmProcess là tên dòng Command khai báo trong B00Command.

Trong BravoDashBoard, khai báo ở thẻ mẹ <Pages>:

<Diagram>
  <Controls>
    <WidgetCRMDiagram>
      <Row />
      <Column>0</Column>
      <Dock>Fill</Dock>
    </WidgetCRMDiagram>
  </Controls>
  <Text>
    <Vietnamese>Quy trình</Vietnamese>
    <English>Diagram</English>
  </Text>
</Diagram>

Bước 3 — thiết kế trong “Thiết kế sơ đồ”

1. Click chuột phải vào màn hình → chọn “Thiết kế sơ đồ”
2. Thực hiện việc thiết kế, co kéo định dạng các control theo mong muốn
3. Sau khi lưu, chương trình tự gen ra các khai báo trong phần Layout

Không cần viết XML tay

Các thẻ Size, Location, TextAlign… nên thiết lập bằng công cụ thiết kế sơ đồ, chương trình tự sinh XML.

Layout

<root>
  <panelDiagram>
    <Controls>
      <Control_0>
        <Row />
        <Column>0</Column>
        <Dock>Fill</Dock>
        <DataMember>B00Process</DataMember>
        <Assembly>Bravo.Diagram</Assembly>
        <ClassName>DiagramControl</ClassName>
        <BackColor>...</BackColor>
        <Item>
          <Item_0>...</Item_0>
          <Item_1>...</Item_1>
        </Item>
      </Control_0>
    </Controls>
  </panelDiagram>
</root>

Thẻ	Nội dung
BackColor	Màu nền của sơ đồ
Item	Nhóm chứa tất cả các đối tượng khối hình — mỗi <Item_0>, <Item_1>… là 1 khối hình

Thẻ của một khối hình

Thẻ	Nội dung
ClassName	Chỉ ra thuộc class nào — VD DiagramTable
ShapeType	Hình khối của đối tượng: Oval, Rectangle, Triangle, Line
FillColor	Màu nền của khối hình. ⚠️ Chỉ tác dụng với hình có ShapeType <> Line
LineColor	Màu của đường kẻ. ⚠️ Chỉ tác dụng với hình có ShapeType = Line
Size	Độ rộng: <Size>122, 40</Size> — chiều ngang, chiều dọc
Location	Vị trí trên sơ đồ: <Location>683, 32</Location>
DataId	Xem mục dưới
Execute	Sự kiện gọi khi click chuột phải vào khối hình
Items	Khai báo thẻ text trong khối hình
MenuItems	Danh sách command mở rộng hiển thị khi click chuột phải

DataId — quy tắc quan trọng

Ba trường hợp

Tình huống	Kết quả
DataId giống giá trị thẻ FilterKey ở DataSource	✅ Hiển thị command “Mở” ở khối hình
DataId khác giá trị FilterKey	❌ Không hiển thị command “Mở”
Không khai báo DataId	❌ Không hiển thị command “Mở”. Nếu đồng thời có thẻ <Execute> → khi chọn thêm mới sẽ bị lỗi

Khi đã có thẻ <Execute> thì LUÔN PHẢI có thẻ DataId.

Execute

Khai báo sự kiện gọi khi click chuột phải — tương ứng các command Thêm mới, Thêm bản sao mới, Mở.

<Execute>
  <Eval_EDIT_BizDocWD />
  <Eval_BizDocWD />
</Execute>
<DataId>1</DataId>

Các evaluator khai báo ở đây được viết tương ứng ở phần DataSource.

Items — text trong khối hình

<Items>
  <Item_0>
    <ClassName>TableText</ClassName>
    <Text>
      <Vietnamese>Chăm sóc khách hàng</Vietnamese>
      <English>Customer care</English>
      <Japanese>顧客ケア</Japanese>
      <Chinese>客户服务</Chinese>
      <Korean>고객 관리.</Korean>
    </Text>
    <TextAlign>4</TextAlign>
    <Row />
    <Column>0</Column>
  </Item_0>
</Items>

MenuItems — menu mở rộng

Thẻ con của Items, hỗ trợ danh sách command mở rộng hiển thị khi click chuột phải vào khối hình.

<MenuText>
  <Vietnamese>Danh sách chi tiết</Vietnamese>
  <English>Detailed list</English>
</MenuText>
<MenuItems>
  <Command1 />
  <Command2 />
</MenuItems>

DataSource

Khai báo bắt buộc

<ParentTable>
  <Name>B00Process</Name>
  <FilterKey>Id=1</FilterKey>
</ParentTable>

Khai báo các Eval tương ứng với việc click chuột phải chọn thêm mới hay mở:

<Evaluators>
  <Eval_Edit_HrmPTimesheet>
    <ClassName>BravoCommandKey</ClassName>
    <CommandKey>EDIT_HrmPTimesheet</CommandKey>
    <Expr>LastCommand() IN ('New', 'NewAsCopy')</Expr>
  </Eval_Edit_HrmPTimesheet>
 
  <Eval_HrmPTimesheet>
    <ClassName>BravoCommandKey</ClassName>
    <CommandKey>HrmPTimesheet</CommandKey>
    <Expr>LastCommand() IN ('Open')</Expr>
  </Eval_HrmPTimesheet>
</Evaluators>

Mấu chốt là hàm LastCommand()

Cùng một khối hình, cùng danh sách Eval trong <Execute>, nhưng mỗi Eval tự lọc bằng LastCommand() để biết người dùng chọn Thêm mới hay Mở.

→ Bắt đầu với Expression

Liên quan

BravoCommandKey · Widget Dashboard · Bắt đầu với Dashboard · Assembly · B00 - Bảng hệ thống