동의서
받는 사람이 골라서 채우는 동의서를 만듭니다. 드롭다운·목록·라디오·버튼 칸과 필수·읽기전용 표시를 배웁니다.
여기서 배우는 것
편집기로 만들기
- 입력칸을 넣고 종류를 드롭다운으로 고릅니다. 선택지 상자가 나타나면 한 줄에 하나씩 적습니다 — 쉼표로 나누지 않는 이유는 값에 쉼표를 쓸 수 있어야 하기 때문입니다.
- 선택지가 비어 있으면 그 칸은 만들어지지 않고 응답의 warnings 로 알려 드립니다. 고를 것이 없는 칸은 받는 사람에게 고장으로 보이기 때문입니다.
- 여러 개를 고르게 하려면 종류를 목록으로 둡니다. 하나만 고르되 전부 보이게 하려면 라디오를 씁니다.
- 라디오는 그린 상자를 선택지 수만큼 세로로 나눠 채웁니다. 선택지가 셋이면 상자 높이를 셋이 들어갈 만큼 잡아 두십시오.
- 버튼 칸은 뷰어에서 누를 수 있는 자리를 만듭니다. 저희는 동작을 붙이지 않습니다 — 스크립트를 붙이는 것은 임의 코드 표면을 만드는 일이기 때문입니다.
- 미리 채워 보여 주되 고치지는 못하게 하려면 읽기 전용을 켭니다. 다만 이것도 표시일 뿐이며, 강제 여부는 PDF 를 여는 프로그램이 정합니다.
- 칸들을 사각형 안에 담고 배경색과 모서리 둥글기를 주면 한 묶음으로 보입니다. 사각형에 테두리를 주면 인쇄물에서도 묶음이 보입니다.
스키마 · API 로 만들기
- select · list · radio 는 props.options 에 문자열 배열을 받습니다. 비어 있으면 그 칸만 건너뜁니다.
- required 와 readonly 는 불린입니다. 안 쓰는 타입에서는 false 로 두십시오 — 합집합 스키마가 모든 노드에 이 키를 요구합니다.
- 한글 선택지도 넣을 수 있습니다. 외형은 PDF 뷰어가 자기 글꼴로 그립니다 — 우리가 그리면 표준 글꼴이 한글을 인코딩하지 못해 실패합니다.
- 한 문서에 500칸까지입니다. 넘으면 자르고 알려 드립니다.
완성 문서
아래 JSON 이 위 두 순서가 만드는 바로 그 문서입니다. 저희 테스트가 이 문서를 검증하고 경고 없이 렌더되는지 확인하므로, 그대로 붙여 넣어 쓰셔도 됩니다.
{
"v": 1,
"unit": "px",
"page": {
"size": "a4",
"orientation": "portrait",
"margin": {
"t": 48,
"r": 48,
"b": 56,
"l": 48
},
"header": "",
"footer": ""
},
"fonts": [],
"styles": [
{
"id": "s_h1",
"fontFamily": "Liberation Sans",
"fontSize": 22,
"fontWeight": 700,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_l",
"fontFamily": "Liberation Sans",
"fontSize": 12,
"fontWeight": 400,
"italic": false,
"color": "#333333",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_box",
"fontFamily": "Liberation Sans",
"fontSize": 12,
"fontWeight": 400,
"italic": false,
"color": "#111111",
"bg": "#f7f8fa",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "1px solid #dfe3e8",
"radius": 12,
"opacity": 1
},
{
"id": "s_f",
"fontFamily": "Liberation Sans",
"fontSize": 12,
"fontWeight": 400,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
}
],
"nodes": [
{
"id": "n_title",
"parent": "",
"order": 0,
"type": "label",
"x": 0,
"y": 0,
"w": 697,
"h": 30,
"show": "",
"styleId": "s_h1",
"props": {
"text": "Personal data consent form",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Title"
},
{
"id": "n_box",
"parent": "",
"order": 1,
"type": "rect",
"x": 0,
"y": 52,
"w": 697,
"h": 330,
"show": "",
"styleId": "s_box",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 1,
"stroke": "#dfe3e8",
"fill": "#f7f8fa",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Field group"
},
{
"id": "n_p1",
"parent": "n_box",
"order": 2,
"type": "label",
"x": 20,
"y": 20,
"w": 300,
"h": 18,
"show": "",
"styleId": "s_l",
"props": {
"text": "Department",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Department caption"
},
{
"id": "n_dept",
"parent": "n_box",
"order": 3,
"type": "field",
"x": 20,
"y": 42,
"w": 300,
"h": 28,
"show": "",
"styleId": "s_f",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 1,
"stroke": "#8a93a0",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "select",
"fieldName": "dept",
"options": [
"Sales",
"Engineering",
"Operations"
],
"required": false,
"readonly": false,
"html": ""
},
"name": "Department select"
},
{
"id": "n_p2",
"parent": "n_box",
"order": 4,
"type": "label",
"x": 360,
"y": 20,
"w": 300,
"h": 18,
"show": "",
"styleId": "s_l",
"props": {
"text": "Data collected (choose several)",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Items caption"
},
{
"id": "n_items",
"parent": "n_box",
"order": 5,
"type": "field",
"x": 360,
"y": 42,
"w": 300,
"h": 80,
"show": "",
"styleId": "s_f",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 1,
"stroke": "#8a93a0",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "list",
"fieldName": "collected",
"options": [
"Name",
"Phone",
"Email",
"Address"
],
"required": false,
"readonly": false,
"html": ""
},
"name": "Items list"
},
{
"id": "n_p3",
"parent": "n_box",
"order": 6,
"type": "label",
"x": 20,
"y": 96,
"w": 300,
"h": 18,
"show": "",
"styleId": "s_l",
"props": {
"text": "Retention period",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Retention caption"
},
{
"id": "n_keep",
"parent": "n_box",
"order": 7,
"type": "field",
"x": 20,
"y": 118,
"w": 300,
"h": 84,
"show": "",
"styleId": "s_f",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 1,
"stroke": "#8a93a0",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "radio",
"fieldName": "retention",
"options": [
"1 year",
"3 years",
"Until consent is withdrawn"
],
"required": false,
"readonly": false,
"html": ""
},
"name": "Retention choice"
},
{
"id": "n_p4",
"parent": "n_box",
"order": 8,
"type": "label",
"x": 20,
"y": 216,
"w": 640,
"h": 18,
"show": "",
"styleId": "s_l",
"props": {
"text": "Date issued (read-only)",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Date caption"
},
{
"id": "n_when",
"parent": "n_box",
"order": 9,
"type": "field",
"x": 20,
"y": 238,
"w": 300,
"h": 28,
"show": "",
"styleId": "s_f",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 1,
"stroke": "#8a93a0",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "text",
"fieldName": "issued_at",
"options": [],
"required": false,
"readonly": true,
"html": ""
},
"name": "Date issued"
},
{
"id": "n_submit",
"parent": "n_box",
"order": 10,
"type": "field",
"x": 360,
"y": 238,
"w": 160,
"h": 32,
"show": "",
"styleId": "s_f",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 1,
"stroke": "#111111",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "button",
"fieldName": "submit",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Submit button"
},
{
"id": "n_submit_l",
"parent": "n_box",
"order": 11,
"type": "label",
"x": 360,
"y": 274,
"w": 300,
"h": 16,
"show": "",
"styleId": "s_l",
"props": {
"text": "We create somewhere to press — no behaviour is attached.",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Button caption"
}
]
}요청 본문입니다. template 자리에 위 문서를, data 자리에 아래 데이터를 넣습니다.
{
"template": "(the document above)",
"data": {}
}