Khi mở một mẫu, bạn sẽ thấy các phần của tài liệu, vùng chỉnh sửa và bản xem trước nằm cạnh nhau. Bạn có thể chọn một phần để sửa, rồi nhìn sang preview để xem kết quả mà không cần rời khỏi editor.
Bắt đầu từ Structure để chọn phần muốn sửa, dùng các tab bên cạnh để chỉnh nội dung, rồi chuyển sang Run khi muốn tạo PDF. Các hình dưới đây chỉ rõ từng vùng trong giao diện.
1. Structure: chọn phần muốn sửa
Structure nằm bên trái, hiển thị cách mẫu được chia thành các page và section. Chọn một mục ở đây để mở các tùy chọn của mục đó trong vùng chỉnh sửa bên cạnh.
- Global chứa các thiết lập dùng chung cho mẫu.
- Page đại diện cho một page trong bố cục, gồm các section bên trong.
- Section là một khối nội dung, chẳng hạn phần thông tin khách hàng hoặc bảng dịch vụ trên hóa đơn.
- Header / Footer là phần đầu và cuối trang khi mẫu có sử dụng.
Ví dụ, để sửa nhãn ở phần thông tin khách hàng, chọn section Billing Parties. Để xem thiết lập chung như font hoặc màu nền, chọn Global.
2. HTML, CSS, Props và Config
Sau khi chọn một mục trong Structure, vùng bên cạnh sẽ hiện các tab bạn có thể chỉnh:
- HTML: nội dung và cách sắp xếp các thành phần trong section.
- CSS: cách trình bày, như màu sắc, kích thước chữ và khoảng cách.
- Props: các giá trị được lưu cùng mẫu, thường là nhãn, màu hoặc nội dung dùng lại.
- Config: các thiết lập của phần đang chọn, như lề, nền hoặc ngắt trang.
Với mẫu có sẵn, bạn có thể mở Props để đổi nhãn mà chưa cần sửa HTML/CSS. Hình bên dưới minh họa prop heading của section đang chọn; HTML đọc giá trị này qua {{ props.heading }}.
Các tab phụ thuộc vào mục đang chọn. Chẳng hạn, Global có Props và Config, còn một section có thể có đủ HTML, CSS, Props và Config. Khi chọn một variant kế thừa từ bản gốc, các tùy chọn chỉnh sửa cũng có thể ít hơn.
3. Layout và PDF: xem kết quả
Vùng xem trước nằm cạnh vùng chỉnh sửa, với hai chế độ Layout và PDF.
Layout giúp bạn nhìn cách các section ghép thành tài liệu khi đang làm việc. PDF cho bạn xem tài liệu dưới dạng trang, tiện để kiểm tra lề, header/footer và cách nội dung chuyển sang trang tiếp theo.
Trong Layout, bạn làm việc với các page và section của mẫu. Khi chuyển sang PDF, vùng này hiển thị kết quả phân trang, bao gồm những tờ phát sinh khi nội dung dài hơn một trang.
Layout phản ánh phần thiết kế đang chỉnh. PDF dựng nội dung mẫu đã lưu: hãy Save rồi tạo lại PDF preview sau khi sửa. Dữ liệu preview lấy từ các giá trị của editor, ban đầu là Default; giá trị nhập ở Run chỉ dùng cho công việc của Run. Bản PDF preview trước đó không tự cập nhật.
4. Parameters: dữ liệu của từng tài liệu
Parameters nằm ở bên phải. Đây là nơi xem và chỉnh cấu trúc dữ liệu mà mẫu nhận vào, chẳng hạn tên khách hàng, mã hóa đơn hoặc danh sách dịch vụ.
Chọn Schema để xem các trường, kiểu dữ liệu và giá trị mặc định. Chọn Payload để xem dữ liệu ở dạng JSON. Tên trường cần khớp với cách mẫu đọc dữ liệu trong HTML.
Chẳng hạn, trường recipient có biểu thức {{ params.recipient }} để chèn vào HTML. Giá trị mặc định nằm trong Schema; dữ liệu cho mỗi lần tạo PDF được nhập ở Run.
Nếu chưa rõ khi nào dùng Props, khi nào dùng Parameters, xem bài Parameters và Props.
5. Run và lịch sử
Sau khi đã lưu và publish mẫu, mở Run để chọn key, version, variant và nhập dữ liệu tạo PDF. Bạn có thể tiếp tục theo hướng dẫn tạo PDF đầu tiên khi muốn thử trọn vẹn bước này.
Khi cần xem lại quá trình làm việc, hãy phân biệt hai nơi: lịch sử của mẫu lưu các thay đổi đã lưu, còn Renders lưu các lần tạo PDF và kết quả của chúng. Nhờ vậy, bạn có thể tìm lại đúng bản thiết kế hoặc file PDF mình cần.
{ "recipient": "Tembuilder" }