우리는 KPI객체를 이용하여 중요 지수를 관리하고 있습니다. 
아래와 같이 지수에 별도의 (응답율) 자료를  표시하는 방법입니다.




image.png



폼수정으로 들어갑니다

image.png

✅ 데이터 연결요소에서 KPI 객체를  폼에 위치시킵니다.
✅ 속성에서 데이터소스, 집계필드를 지정합니다.
✅ Style에서 kpi1 이라고 클래스를 지정합니다 (스크립트에서 사용)
✅ kpi.update  이벤트를 이용하여 스크립트를  구현합니다


// 클래스를 이용하여 객체를 지정함
const kpi1 = form.querySelector(".kpi1");
const kpi2 = form.querySelector(".kpi2");

// KPI업데이트가 완료된 이벤트를 이용하여 처리함
kpi1.addEventListener("kpi.update", e=>{
  // html로 가공해서 넣을 경우 
 //  e.detail.num1el.innerHTML = `${e.detail.info.kpi1}  <small> (${parseInt( e.detail.info.kpi1*100/e.detail.info.kpi2)})% </small>`
  e.detail.num1el.innerText = `${e.detail.info.kpi1}  (${parseInt( e.detail.info.kpi1*100/e.detail.info.kpi2)})%`;
});

kpi2.addEventListener("kpi.update", e=>{
  e.detail.num1el.innerText = `${e.detail.info.kpi1}  (${parseInt( e.detail.info.kpi1*100/e.detail.info.kpi2)})%`;
});