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.

Đ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 flow.
• App name : Hiển thị tên ứng dụng mà flow thuộc về.
• All flows : Mở danh sách tất cả các flow của ứng dụng này.
• Rename the flow: Nhấn vào biểu tượng bút chì bên cạnh tên flow để đổi tên.
• View mode toggle: Chuyển đổi giữa chế độ xem thiết kế và chế độ xem Remote Config.
• Undo/Redo: Nhấn 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ấn Save draft để lưu tiến trình mà chưa xuất bản (⌘ / Ctrl+S). Mở menu thả xuống để truy cập nút Publish. Bạn chỉ có thể thêm flow vào một placement sau khi đã xuất bản.

Khu vực xem trước (ở giữa)

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

• Để chọn một thành phần và chỉnh sửa thuộc tính, nhấn vào nó. Để chọn một thành phần con bên trong một container, nhấn vào container trước, rồi nhấn vào thành phần con.
• Để chỉnh sửa thuộc tính của chính màn hình đó, nhấn vào vùng trống bên ngoài tất cả các thành phần, hoặc chọn màn hình trong bảng Screens and Layers.
• Để thay đổi thứ tự của một thành phần, kéo mục tương ứng 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 bản xem trước thiết bị)

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

Điều khiển chế độ xem (thanh công cụ dưới cùng)

Các công cụ trong thanh công cụ dưới cùng cho phép bạn điều chỉnh bản xem trước.

• Device: Chọn một trong các mẫu iPhone và Android có sẵn để thay đổi kích thước viewport và hình dạng thiết bị.
• Screen orientation: Chuyển đổi giữa chế độ dọc và ngang để xem trước flow theo 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 ngôn ngữ/vùng để xem trước flow 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à các đường 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ó thành phần 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 UI 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ư quiz 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 thành phần

Khi bạn chọn một thành phần, bảng bên phải cho phép bạn thay đổi kiểu và 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 và bố cục của thành phần được chọn:

• Visibility: Hiển thị hoặc ẩn thành phần. Bật Conditional để đặt quy tắc xác định khi nào thành phần sẽ hiển thị.
• Position: Chọn giữa các kiểu định vị Relative, Absolute hoặc Fixed.
• Content (chỉ áp dụng cho thành phần văn bản): Chỉnh sửa nội dung văn bản của thành phần, chèn biến và quản lý bản địa hóa.
• Typography (chỉ áp dụng cho thành phần 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 ngắn.
• Spacing: Đặt margin và padding của thành phần.
• Effects: Thêm đổ bóng ngoài, đổ bóng trong, làm mờ nền hoặc làm mờ layer.
• Animation: Thêm các hiệu ứng animation (ví dụ: Pulse) và cấu hình thời gian và 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 thành phần con.

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

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

• Trigger xác định khi nào điều gì đó xảy ra — ví dụ: On Tap (người dùng nhấn vào thành phần).
• Action xác định đ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 action vào một trigger để thực thi chúng theo thứ tự.

Bạn có thể thêm nhiều trigger vào cùng một thành phần để thực thi nhiều action theo thứ tự.

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.

Saved styles

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 thành phần trong flow của bạn sử dụng cùng một kiểu chữ hoặc màu sắc, hãy lưu dữ liệu này dưới dạng kiểu toàn cục. Sau đó bạn có thể tái sử dụng nó chỉ với một cú nhấp.

Hiện tại, Flow Builder hỗ trợ hai loại kiểu toàn cục — Font styles và Color styles. Mỗi Color style có thể tùy chọn có giá trị riêng cho chế độ tối.

Variables

Nút brackets mở Variables.

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 thay thế các placeholder biến bằng giá trị thực — 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: Các biến bạn tạo và kiểm soát thông qua các action.
• Elements: Các 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 hoặc lựa chọn tab.

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 bảng này. Tham chiếu trực tiếp đến chúng khi chỉnh sửa thành phần văn bản.

Sử dụng biến để:

• Bind text: Hiển thị nội dung động thay vì chuỗi tĩnh.
• Control visibility: Hiển thị hoặc ẩn các thành phần dựa trên điều kiện (ví dụ: ẩn nút nâng cấp cho người dùng premium).
• Interact with the user: Truy cập dữ liệu từ các trường nhập liệu của người dùng, chẳng hạn như form hoặc quiz.

Localization

Chế độ xem Localization cho phép bạn quản lý tất cả nội dung có thể dịch trong flow của mình. Nó hiển thị một bảng gồm tất cả các chuỗi văn bản và hình ảnh, được tổ chức theo màn hình, với các cột cho từng ngôn ngữ/vùng. Từ chế độ xem này, bạn có thể:

• Thêm ngôn ngữ/vùng 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ị các bản dịch còn thiếu.
• Sử dụng AI Translate để tự động dịch nội dung, hoặc Import/Export bản dịch theo lô.