작성자 : 장민지 / 검수자 : - 

Release No. 7.0.500.20260122-11 

Script Editor 개요

Script Editor에서 수행할 수 있는 주요 기능은 다음과 같습니다.

  1. 데이터소스(DataSource) 등록
  2. 소스 코드(JavaScript) 등록
  3. 서버 로그 확인

스크립트 유형 비교

Script Editor는 두 가지 실행 환경을 지원합니다. 본 문서는 화면 제어 및 사용자 인터랙션을 위한 'Client Script' 작성을 기준으로 설명합니다.

  • Client Script(본 문서 범위): 브라우저(PC)에서 실행됩니다. 버튼 클릭 시 메시지 창을 띄우거나, 화면의 색상을 바꾸는 등 UI 제어를 담당합니다.
  • Server Script: 보고서 서버에서 실행됩니다. 데이터를 조회/저장하거나 복잡한 연산을 수행하는 등 데이터 처리를 담당합니다.

Script Editor 실행 방법

i-AUD Designer 상단 메뉴 영역에서 [편집 그룹 > Script Editor]를 선택합니다.

image2025-4-28_17-1-29.png

화면 구성 설명

1. 소스 코드 입력 영역

보고서에 필요한 기능을 JavaScript로 작성할 수 있습니다.

Script Editor를 실행하면 소스 코드 입력 영역이 자동으로 생성됩니다.

입력한 API를 선택한 상태에서 'F1' 키를 누르면 별도의 API 문서 창이 실행됩니다.

2. API 함수 생성 영역 (이벤트 핸들러 선언)

각 컨트롤에서 발생하는 이벤트 함수를 자동으로 선언해주는 영역입니다.

  • 사용법: 목록에서 원하는 이벤트(예: OnButtonClick)를 찾아 더블 클릭합니다.
  • 기능: 소스 코드 입력 영역에 해당 이벤트 함수의 기본 구조가 자동으로 생성됩니다. 사용자는 생성된 함수 블록 {...} 안에 실행할 로직을 작성하게 됩니다. 

함수를 선택하면 하단 영역에서 해당 이벤트에 대한 간략한 설명을 확인할 수 있습니다.


목록에서 원하는 이벤트를 더블 클릭하면, 소스 코드 입력 영역에 해당 함수가 자동 입력됩니다.

자동 입력된 코드 내부의 주석에서 해당 함수에서 사용 가능한 인자(Arguments) 정보를 확인할 수 있습니다.

* 사용 예시: args.Id (컨트롤 이름)

3. API Document (API 라이브러리)

솔루션에서 제공하는 모든 API(함수, 속성, 이벤트)의 전체 목록을 검색하고 탐색할 수 있는 영역입니다.

  • 사용법: 구현하고 싶은 기능(예: 메시지 창, 파일 내보내기 등)을 키워드로 검색합니다.
  • 기능: 검색된 API의 설명과 인자값을 확인하고, 앞서 생성한 이벤트 함수 내부에 해당 API를 작성하여 동작을 구현합니다.

작업 흐름 요약

  1. [2. API 함수 생성] 영역에서 "언제 실행할지" 결정 (예: 버튼 클릭 시) → 함수 껍데기 생성

  2. [3. API Document] 영역에서 "무엇을 실행할지" 검색 (예: 알림창 띄우기) → 함수 내용 작성

4. 로그 확인

로그 파일을 더블 클릭하여 서버 로그를 조회할 수 있습니다.

Script Editor로 인터랙션 구현하기

Script Editor를 사용하여 Button을 클릭했을 때, 메시지 창이 띄워지는 동작을 구현해 보겠습니다.

Step 1. 컨트롤 생성

보고서에 [Button] 컨트롤을 생성합니다.

image2026-1-30_10-38-53.png

image2026-1-30_10-40-7.png

Step 2. Script Editor 실행

i-AUD Designer 상단의 [편집 그룹 > Script Editor]를 선택합니다.

Step 3. 소스 코드 작성

1. 이벤트 함수 불러오기

API 함수 영역에서 Button을 클릭할 때 발생하는 [OnButtonClick] 이벤트를 더블 클릭하여 소스 코드 입력 영역에 불러옵니다.

2. 소스 코드 작성하기

OnButtonClick 이벤트가 발생할 때, 메시지 창이 띄워지도록 소스 코드를 작성합니다.

  1. API Document 영역에서 '대화 상자' 검색
  2. 메인 뷰어(Matrix).Information API 확인


  3. 스크립트 소스 코드 작성

    사용하려고 하는 API를 일부 입력한 뒤 [Tab] 키를 눌러 자동 입력할 수 있습니다.


  4. API의 파라미터 값을 작성합니다.

    var OnButtonClick = function(sender, args){
	Matrix.Information("안녕하세요." ,"확인" ,"");
};


    API마다 작성해야 하는 파라미터 값이 상이합니다.


Step 4. 저장 및 동작 확인

1. Script Editor 저장

Script Editor 좌측 상단의 [Save] 버튼 또는 [Ctrl + S] 키를 눌러 Script Editor를 저장합니다.

2. 보고서 실행 테스트

보고서에서 [Button] 클릭 시 메시지 창이 정상적으로 실행되는지 확인합니다.