Giao diện Flow Builder chính bao gồm tất cả các công cụ cần thiết để thêm các thành phần hiển thị, chỉnh sửa thuộc tính của chúng và thay đổi logic của flow người dùng. Bài viết này giới thiệu từng khu vực của giao diện: chức năng và vị trí của từng thành phần.

Các điều khiển dự án và phím tắt hữu ích (thanh công cụ trên cùng)

• Close : Thoát khỏi trình chỉnh sửa flow và quay lại trang danh sách flows.
• App name : Xác định ứng dụng mà flow thuộc về.
• All flows : Mở danh sách tất cả các flows của ứng dụng này.
• Flow status: Biểu tượng bên trái tên flow cho biết trạng thái flow hiện tại:
  • Draft
  • Publishing (vòng xoay đang tải)
  • Failed
  • hoặc Live .
• Rename the flow: Nhấp vào tên flow để đổi tên. Nhiều flows có thể có cùng tên — hãy đặt tên riêng cho mỗi flow mới.
• View mode toggle: Chuyển đổi giữa chế độ xem thiết kế và chế độ xem remote config.
• Undo/Redo: Nhấp vào các biểu tượng mũi tên để hoàn tác hoặc làm lại các thay đổi trong flow. Bạn cũng có thể dùng ⌘Z / Ctrl+Z để hoàn tác.
• Save draft / Publish: Nhấp Save draft để lưu tiến trình mà không phát hành (⌘ / Ctrl+S). Mở menu thả xuống để truy cập nút Publish. Bạn chỉ có thể thêm flow vào placement sau khi đã phát hành.

Khu vực xem trước (trung tâm)

Khu vực trung tâm của không gian làm việc mô phỏng giao diện flow của bạn trên thiết bị di động.

• Để chọn một phần tử và chỉnh sửa thuộc tính của nó, hãy nhấp vào phần tử đó. Để chọn phần tử con bên trong một container, hãy nhấp vào container trước, rồi nhấp vào phần tử con.
• Để chỉnh sửa thuộc tính của chính màn hình, hãy nhấp ra ngoài bất kỳ phần tử nào, hoặc chọn màn hình trong bảng Screens and Layers.
• Để thay đổi thứ tự của một phần tử, kéo mục đó lên hoặc xuống trong bảng Screens and Layers.

Thanh màn hình đang hoạt động (phía trên khung xem trước thiết bị)

• Screen name — viên nhãn hiển thị tên màn hình hiện tại.
• Toggle animations — bật hoặc tắt xem trước animation của các phần tử; animation chạy liên tục cho đến khi được tắt. Chỉ hiển thị khi màn hình đang active có ít nhất một animation. Không ảnh hưởng đến việc animation có hiển thị trên thiết bị thực hay không.
• Add element — mở thư viện phần tử tại màn hình hiện tại. Tương đương với nút + ở đầu bảng Screens and Layers — hữu ích khi bảng đó đang bị thu gọn.

Điều khiển hiển thị (thanh công cụ phía dưới)

Các công cụ trong thanh công cụ phía dưới giúp bạn điều khiển chế độ xem trước.

• Device: Chọn một trong các mẫu iPhone hoặc Android có sẵn để thay đổi kích thước viewport và viền thiết bị.
• Screen orientation: Chuyển đổi giữa chế độ dọc và ngang để xem trước flow của bạn ở các hướng khác nhau.
• Color scheme: Chuyển đổi giữa chế độ sáng và tối để xem thiết kế của bạn thích nghi với các theme khác nhau như thế nào.
• Locale: Chọn một locale để xem trước flow của bạn với nội dung đã được bản địa hóa.
• View options: Bật hoặc tắt viền thiết bị và hướng dẫn vùng an toàn.

Thuộc tính màn hình và thành phần (bảng bên phải)

Cài đặt màn hình và bố cục

Khi không có phần tử nào được chọn, bảng bên phải cho phép bạn điều chỉnh các thuộc tính của màn hình flow đang hoạt động, bao gồm:

• Tương tác với giao diện hệ thống (ví dụ: thanh trạng thái có hiển thị hay không)
• Quy tắc bố cục tự động
• Nền (màu sắc, hình ảnh hoặc video)
• Kích thước padding
• Hành vi cuộn dọc Nếu màn hình chứa một số thành phần nhất định, chẳng hạn như câu hỏi tương tác, danh sách này sẽ được mở rộng với các thuộc tính liên quan.

Thuộc tính của phần tử

Khi bạn chọn một phần tử, bảng bên phải cho phép bạn thay đổi style và các thuộc tính tương tác của nó.

Thuộc tính thiết kế

Tab Design cho phép bạn cấu hình giao diện trực quan và bố cục của phần tử được chọn:

• Visibility: Hiển thị hoặc ẩn phần tử. Bật Conditional visibility để đặt các quy tắc xác định khi nào phần tử sẽ hiển thị.
• Position: Chọn giữa Relative, Absolute, hoặc Fixed positioning.
• Content (chỉ dành cho phần tử văn bản): Chỉnh sửa nội dung văn bản của phần tử, chèn biến, và quản lý bản địa hóa.
• Typography (chỉ dành cho phần tử văn bản): Cấu hình font, độ đậm, kích thước, màu sắc, căn chỉnh, trang trí và cắt bớt văn bản.
• Spacing: Đặt margin và padding cho phần tử.
• Effects: Thêm drop shadow, inner shadow, background blur, hoặc layer blur.
• Animation: Thêm hiệu ứng động (ví dụ: Pulse) và cấu hình thời gian cũng như cường độ của chúng.
• Appearance: Điều chỉnh độ mờ và góc xoay.
• Layout: Chọn hướng bố cục (dọc hoặc ngang) và xác định cách phân bố các phần tử con.

Thuộc tính tương tác

Tab Interactions cho phép bạn định nghĩa điều gì xảy ra khi người dùng tương tác với phần tử đã chọn. Mỗi tương tác bao gồm một trigger và một hoặc nhiều actions:

• Triggers (Kích hoạt) định nghĩa khi nào điều gì đó xảy ra — ví dụ: On Tap (người dùng nhấn vào phần tử).
• Actions (Hành động) định nghĩa điều gì xảy ra — ví dụ: điều hướng đến màn hình khác hoặc thay đổi giá trị của một biến. Thêm nhiều hành động vào một trigger để thực hiện chúng theo thứ tự.

Bạn có thể thêm nhiều trigger vào cùng một phần tử để thực thi nhiều hành động liên tiếp nhau.

Bảng bên trái

Bảng bên trái thay đổi chức năng dựa trên nút nào đang được chọn. Bạn có thể chọn giữa:

• Screens and layers
• Add element
• Products
• Styles
• Variables
• Localization

Screens and Layers

Nút layers mở Screens and Layers (được hiển thị mặc định khi bạn mở flow builder).

Nó hiển thị từng màn hình dưới dạng cây các layer. Mỗi thành phần trên một màn hình là một layer, và các container có các thành phần con lồng bên trong. Bạn có thể kéo và thả các layer để sắp xếp lại chúng.

Chọn thành phần

Nếu bạn nhấn vào nút plus , bảng bên trái hiển thị danh sách các thành phần UI có sẵn và các biến thể của chúng. Nhấn vào một mục để thêm nó vào màn hình hiện tại dưới dạng một layer mới.

Products

Nút products mở danh sách sản phẩm. Nó hiển thị các sản phẩm nào được gán cho từng màn hình trong flow của bạn.

Danh sách này chỉ để xem. Để gán sản phẩm cho một màn hình, hãy thêm thành phần Product và cấu hình nó trong bảng bên phải. Để tạo hoặc chỉnh sửa sản phẩm, hãy sử dụng trang Products trên Adapty Dashboard.

Kiểu đã lưu

Nút Styles mở Saved Styles.

Tại đây, bạn có thể chỉnh sửa và quản lý các kiểu toàn cục. Nếu nhiều phần tử trong flow của bạn dùng chung kiểu chữ hoặc màu sắc, hãy lưu dữ liệu đó thành một kiểu toàn cục. Sau đó bạn có thể tái sử dụng nó chỉ bằng một cú nhấp. Hiện tại, Flow Builder hỗ trợ hai loại global style — Font styles và Color styles. Mỗi Color style có thể tùy chọn đặt giá trị riêng cho chế độ Dark mode.

Biến

Nút dấu ngoặc mở phần Biến.

Tại đây, bạn có thể tạo và quản lý các biến cho flow của mình. Khi chạy, SDK sẽ thay thế các placeholder biến bằng giá trị thực tế — thuộc tính người dùng, giá sản phẩm, chuỗi đã được bản địa hóa, và nhiều hơn nữa.

Các biến được nhóm thành hai tab:

• Custom: Biến do bạn tạo và kiểm soát thông qua các action.
• Elements: Giá trị được xác định bởi tương tác của người dùng — chẳng hạn như câu trả lời quiz, trạng thái toggle, hay lựa chọn tab.

Các biến sản phẩm — giá, tên và các dữ liệu sản phẩm khác — không được liệt kê trong panel này. Hãy tham chiếu trực tiếp đến chúng khi chỉnh sửa một phần tử văn bản.

Dùng biến để:

• Liên kết văn bản: Hiển thị nội dung động thay vì chuỗi tĩnh.
• Kiểm soát hiển thị: Hiển thị hoặc ẩn các phần tử dựa trên điều kiện (ví dụ: ẩn nút nâng cấp đối với người dùng premium).
• Tương tác với người dùng: Truy cập dữ liệu từ các trường nhập liệu, chẳng hạn như biểu mẫu hoặc bài kiểm tra.

Bản địa hóa

Giao diện Localization cho phép bạn quản lý toàn bộ nội dung có thể dịch trong flow của mình. Nó hiển thị bảng gồm tất cả các chuỗi văn bản và hình ảnh, được sắp xếp theo màn hình, với các cột tương ứng cho từng locale. Từ giao diện này, bạn có thể:

• Thêm locale mới và chỉnh sửa các chuỗi đã dịch trực tiếp.
• Theo dõi trạng thái dịch — mỗi hàng được đánh dấu là Done hoặc Missing.
• Lọc theo màn hình hoặc chỉ hiển thị những bản dịch còn thiếu.
• Dùng AI Translate để tự động dịch nội dung, hoặc Import/Export bản dịch hàng loạt.