아티팩트 SDK

// iframe 내부 어디서든 바로 사용
const rows = await suits.fetchRows("dm_abc123");
suits.toast.success("데이터를 불러왔습니다.");

// 초기화 데이터 접근 예시
console.log(suits.user.name);          // "홍길동"
console.log(suits.theme.mode);         // "light" 또는 "dark"
console.log(suits.block.workspaceId);  // "ws_abc123"

Promise<{ rows: [...] }>

const result = await suits.fetchRows("dm_abc123");
console.log(result.rows); // [{ id: "row_1", data: { ... } }, ...]

Promise<{ ... }> // 통계 정의에 따른 결과 데이터

const stats = await suits.fetchStatData("stat_monthly_revenue");
console.log(stats);

Promise<{ properties: [{ id, name, type, ... }] }>

const schema = await suits.fetchDataModelSchema("dm_abc123");
schema.properties.forEach((prop) => {
  console.log(`${prop.name} (${prop.type})`);
});
// 회사명 (TEXT)
// 매출 (CURRENCY)
// 상태 (SELECT)

Promise<[{ id: string, name: string, type: string, value: any }]>

const filters = await suits.getGlobalFilters();
filters.forEach((f) => {
  console.log(`${f.name}: ${f.value}`);
});
// 기간: 2026-03
// 팀: 영업1팀

const result = await suits.addRow("dm_abc123", {
  prop_001: "신규 고객사",
  prop_002: "[email protected]",
  prop_003: 50000000,
  prop_004: "lead",
});
console.log(result.rowId); // 생성된 행 ID

await suits.updateRow("dm_abc123", "row_111", {
  prop_004: "active",
  prop_003: 75000000,
});
suits.toast.success("상태가 업데이트되었습니다.");

await suits.deleteRow("dm_abc123", "row_111");
suits.toast("행이 삭제되었습니다.");

const workflowId = suits.getWorkflowId("sendNotification");
await suits.executeWorkflow(workflowId, {
  recipient: "[email protected]",
  message: "주문이 접수되었습니다.",
});
suits.toast.info("알림을 발송 중입니다.");

Promise<lastNodeResult> // 워크플로우 마지막 노드의 실행 결과

const workflowId = suits.getWorkflowId("analyzeData");
const result = await suits.executeWorkflowAndWait(workflowId, {
  dataModelId: "dm_abc123",
  period: "2026-03",
});
console.log(result); // 마지막 노드의 실행 결과

// 타임아웃 지정
const result2 = await suits.executeWorkflowAndWait(workflowId, null, {
  timeout: 120000, // 2분
});

string | null // 워크플로우 ID 또는 null (일치하는 별칭이 없을 때)

const workflowId = suits.getWorkflowId("processOrder");
if (workflowId) {
  await suits.executeWorkflow(workflowId, { orderId: "12345" });
} else {
  suits.toast.error("워크플로우를 찾을 수 없습니다.");
}

suits.toast("저장되었습니다.");
suits.toast.success("주문이 완료되었습니다.", {
  description: "주문번호: ORD-2026-001",
});
suits.toast.error("저장에 실패했습니다.");
suits.toast.info("데이터를 불러오는 중입니다.");
suits.toast.warning("입력값을 확인해주세요.");

Promise<any> // suits.closeModal(result)로 전달된 값

const result = await suits.openModal({
  title: "고객 정보 입력",
  html: `
    <form id="form">
      <label>이름</label>
      <input type="text" id="name" class="bc-input" />
      <label>이메일</label>
      <input type="email" id="email" class="bc-input" />
      <button type="submit" class="bc-button">확인</button>
    </form>
  `,
  js: `
    document.getElementById("form").addEventListener("submit", (e) => {
      e.preventDefault();
      suits.closeModal({
        name: document.getElementById("name").value,
        email: document.getElementById("email").value,
      });
    });
  `,
  width: 480,
});

// result: { name: "홍길동", email: "[email protected]" }
if (result) {
  await suits.addRow("dm_customers", {
    prop_001: result.name,
    prop_002: result.email,
  });
}

// 모달 내부의 JS에서 호출
suits.closeModal({ confirmed: true, selectedId: "row_123" });

// 취소 버튼
document.getElementById("cancel").addEventListener("click", () => {
  suits.closeModal(null);
});

suits.onGlobalFiltersChanged = (filters) => {
  console.log("필터 변경:", filters);
  // filters: [{ id, name, type, value }, ...]

  // 필터 값에 따라 데이터를 다시 조회
  const periodFilter = filters.find((f) => f.name === "기간");
  if (periodFilter) {
    loadData(periodFilter.value);
  }
};

/* 라이트 모드 */
.chart-line { stroke: #333; }

/* 다크 모드 */
.dark .chart-line { stroke: #eee; }

// JavaScript에서 현재 테마 확인
if (suits.theme.mode === "dark") {
  // 다크 모드 전용 로직
}

Promise<{ id: string, name: string | null } | null>

const user = await suits.getCurrentUser();
if (user) {
  console.log(`${user.name}님, 환영합니다.`);
}

<div class="container">
  <h2>고객 목록</h2>
  <button id="add-btn" class="bc-button">고객 추가</button>
  <table class="bc-table">
    <thead>
      <tr>
        <th>회사명</th>
        <th>이메일</th>
        <th>상태</th>
      </tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

.container {
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 12px;
}

#add-btn {
  margin-bottom: 16px;
}

const DATA_MODEL_ID = "dm_abc123";

// 데이터 조회 및 테이블 렌더링
async function loadCustomers() {
  try {
    const { rows } = await suits.fetchRows(DATA_MODEL_ID);
    const tbody = document.getElementById("table-body");
    tbody.innerHTML = rows
      .map(
        (row) => `
      <tr>
        <td>${row.data.prop_001 || ""}</td>
        <td>${row.data.prop_002 || ""}</td>
        <td>${row.data.prop_004 || ""}</td>
      </tr>
    `
      )
      .join("");
  } catch (err) {
    suits.toast.error("데이터를 불러오지 못했습니다.", {
      description: err.message,
    });
  }
}

// 고객 추가 버튼
document.getElementById("add-btn").addEventListener("click", async () => {
  const result = await suits.openModal({
    title: "고객 추가",
    html: `
      <form id="form" style="display:flex;flex-direction:column;gap:12px;">
        <input id="name" class="bc-input" placeholder="회사명" required />
        <input id="email" class="bc-input" placeholder="이메일" type="email" required />
        <div style="display:flex;gap:8px;justify-content:flex-end;">
          <button type="button" id="cancel" class="bc-button bc-button-outline">취소</button>
          <button type="submit" class="bc-button">추가</button>
        </div>
      </form>
    `,
    js: `
      document.getElementById("form").addEventListener("submit", (e) => {
        e.preventDefault();
        suits.closeModal({
          name: document.getElementById("name").value,
          email: document.getElementById("email").value,
        });
      });
      document.getElementById("cancel").addEventListener("click", () => {
        suits.closeModal(null);
      });
    `,
    width: 400,
  });

  if (result) {
    try {
      await suits.addRow(DATA_MODEL_ID, {
        prop_001: result.name,
        prop_002: result.email,
        prop_004: "lead",
      });
      suits.toast.success("고객이 추가되었습니다.");
      loadCustomers(); // 테이블 새로고침
    } catch (err) {
      suits.toast.error("고객 추가에 실패했습니다.");
    }
  }
});

// 글로벌 필터 변경 시 데이터 새로고침
suits.onGlobalFiltersChanged = () => {
  loadCustomers();
};

// 초기 로드
loadCustomers();