콘텐츠로 이동

커스텀 앱 스튜디오 (Custom App Studio)

커스텀 앱 스튜디오는 Teknora EAM에 내장된 로우코드(Low-Code) 빌더입니다. 코드를 작성하지 않고도 데이터 모델과 목록 화면, 상세 화면을 포함한 완전히 새로운 "앱"을 추가할 수 있으며, 드래그 앤 드롭으로 레이아웃을 구성하고 시스템이 지원하는 11개 언어 중 어느 언어로도 번역할 수 있습니다.

스튜디오 개요

주요 영역

화면은 세 영역으로 나뉩니다.

영역 기능
상단 바 (필드 유형 팔레트) 현재 탭에 새 필드를 추가하는 버튼 —— 텍스트, 텍스트영역, 숫자, 날짜, 날짜 및 시간, 예/아니오, 선택, 링크, 테이블, 이미지
캔버스 (가운데) 폼의 실시간(WYSIWYG) 미리보기 —— 여기서 보이는 것이 실행 시 사용자가 보게 될 모습과 정확히 동일합니다
속성 패널 (오른쪽) 캔버스에서 클릭한 대상에 따라 자동으로 전환됩니다 —— 전체 폼, 탭, 섹션, 또는 필드

폼 속성

캔버스 위의 "Form Properties" 바를 클릭하면 앱 전체의 속성을 볼 수 있습니다.

  • 제목: 앱의 기본 이름(사이드바와 상단 메뉴에 표시됩니다).
  • 번역: 앱 이름을 11개 언어 중 원하는 만큼 번역합니다 —— 번역된 언어를 사용하는 사용자에게는 번역된 이름이 자동으로 표시됩니다.
  • 아이콘: lucide-react 라이브러리의 아이콘 이름.
  • 카테고리: "Custom Applications" 목록에서 앱이 분류되는 방식.
  • 폼에 제목 표시줄 표시: 상세 화면 헤더에 앱 이름 + 기본 필드 + 설명 필드를 표시할지 여부를 제어합니다.
  • 숨김: 삭제하지 않고 사이드바와 메뉴에서 앱을 숨깁니다.
  • 첨부파일 허용: 상세 화면 헤더에 첨부파일 아이콘(📎)을 추가합니다.
  • 워크플로우 허용: 현재는 의도를 나타내는 플래그일 뿐입니다 —— 아직 실제 워크플로우 엔진은 연결되어 있지 않습니다.
  • 리포트 있음: 상세 화면에서 실제 "Print Reports" 버튼을 활성화하고, Report Designer에서 이 앱을 데이터 소스로 선택할 수 있게 합니다.
  • 상태 변경 허용: 실제 상태 변경 시스템(자산 및 작업지시 화면에서 사용하는 것과 동일)을 활성화합니다 —— 상태 값이 나오는 도메인(예: ASSETSTATUS)을 선택하라는 메시지가 표시됩니다.

탭 (Tabs)

탭 속성

캔버스에서 아무 탭이나 클릭하여 속성을 편집합니다.

  • 이름: 사용자에게 표시되는 탭 레이블.
  • 아이콘: 선택 가능한 아이콘 그리드가 있는 드롭다운 —— 이 아이콘은 캔버스의 탭 이름 옆과 실행 시 상세 화면에 표시됩니다.
  • 번역: 탭 이름을 원하는 언어로 번역합니다.
  • 숨김: 내부 필드는 삭제하지 않고 탭 전체를 상세 화면에서 숨깁니다.

마지막 탭 옆의 "+"를 클릭하여 새 탭을 추가합니다.

섹션 (Sections)

섹션 속성

각 탭은 섹션(필드 그룹)으로 나뉩니다. 섹션 제목을 클릭하면 다음을 할 수 있습니다.

  • 이름을 변경하고 번역합니다.
  • 열 개수를 설정합니다(1, 2, 또는 3) —— 이는 대략적인 모양이 아니라 폼이 실제로 구성되는 CSS Grid를 제어합니다.
  • 섹션을 삭제합니다 —— 내부 필드는 삭제되지 않고 "미분류" 상태가 됩니다.

필드 (Fields)

텍스트 필드 속성

필드를 클릭하여 다음을 편집합니다.

  • 레이블필드 이름(필드 이름은 자동 생성되며 수정할 수 없습니다).
  • 번역 —— 탭과 같은 원리입니다.
  • 필드가 표시되는 섹션.
  • 필수: 실제(네이티브 HTML) 유효성 검사를 활성화합니다 —— 값이 없으면 레코드를 저장할 수 없습니다.
  • 목록에 표시: 이 열이 목록 화면에 표시되는지 여부를 제어합니다.
  • 기본(Primary): 레코드의 "제목"을 나타내는 기본 필드 —— 본문에 반복되는 대신 상세 화면 헤더에 표시되며, 최초 저장 후에는 잠겨서(수정 불가) 편집할 수 없게 됩니다.
  • 읽기 전용(Read Only): 필드가 표시만 되고 수동으로 편집할 수 없습니다 —— Action Script가 제어하는 필드(자동 계산되는 합계 등)에 유용합니다.

숫자 필드 속성: 읽기 전용 + 숫자 형식

필드 유형이 숫자인 경우 추가 옵션이 나타납니다.

  • 숫자 형식(Number Format): 정수(기본값), 소수(Float), 또는 통화 —— 소수 또는 통화를 선택하면 브라우저가 "유효하지 않음"으로 표시하지 않고 필드가 소수(450.75 등)를 정상적으로 받아들입니다.

필드 유형

단순한 유형(텍스트, 숫자, 날짜, 예/아니오, 목록 선택) 외에 두 가지 고급 유형이 있습니다.

링크 필드 속성

자유 텍스트 대신 다른 곳의 실제 레코드를 가리키는 필드입니다. 다음 중 하나를 가리키도록 선택할 수 있습니다.

  • 도메인: 시스템의 모든 도메인.
  • 시스템 테이블: 자산(Assets), 위치(Locations), 품목(Items), 인력(Labors) 등의 실제 테이블.
  • 커스텀 객체: 사용자가 만든 다른 커스텀 앱.

"현재 사이트로 결과 필터링" 옵션도 있습니다 —— 활성화하면 검색 결과가 사용자와 동일한 사이트에 속한 결과만 반환합니다.

테이블 필드 (Table)

테이블 필드 속성

하나의 레코드 내에 여러 행을 추가할 수 있는 필드입니다(자산 화면의 부품 테이블과 유사). 정의하는 방법은 세 가지입니다.

  1. 열을 수동으로 정의: 자체 열을 추가합니다 —— 각 열은 텍스트/숫자/날짜/예-아니오/목록이거나, 실제 레코드를 가리키는 링크(자산 테이블에서 검색을 여는 "자산" 열 등)일 수도 있습니다.
  2. 객체에 연결: 테이블이 다른 커스텀 앱의 필드에서 자동으로 열을 가져옵니다.
  3. 도메인에 연결: 테이블이 특정 도메인의 값에서 행을 추가할 수 있게 합니다.

테이블 열 속성: 너비, 읽기 전용, 목록 선택지, 통화 형식

수동으로 정의한 각 열에는 추가 속성이 있습니다.

  • 너비(Width): 상대적인 숫자입니다(ERPNext의 열 시스템과 유사) —— 너비 2인 열은 너비 1인 열보다 두 배의 공간을 차지하며, 고정된 픽셀 수가 아닙니다.
  • 읽기 전용: 필드 수준과 같은 원리이지만 열 단위로 적용됩니다 —— 스크립트가 자동으로 계산하는 열(줄 합계 등)에 유용합니다.
  • 목록 유형: 쉼표로 구분된 값을 입력하는 "Choices" 상자가 표시됩니다 —— 실행 시 이 열은 해당 값을 가진 드롭다운으로 표시됩니다.
  • 숫자 형식: 열이 숫자인 경우 일반 숫자 필드와 마찬가지로 정수/소수/통화를 선택할 수 있습니다.

실행 시 테이블: 목록 열과 통화 열이 있는 행

실전 단계

1. 새 커스텀 앱 만들기

"Custom Applications" 목록에서 새 앱을 클릭하고 이름과 카테고리를 입력한 다음, 상단 바에서 필드 추가를 시작합니다.

2. 폼 정리하기

필드를 드래그하여 순서를 바꾸고, 논리적인 탭과 섹션으로 그룹화하며, 각 섹션의 열 개수를 설정합니다.

3. 번역하기

서로 다른 언어를 사용하는 여러 사용자가 봐야 하는 필드/탭/섹션에 대해 "+ Add language"를 클릭하고 필요한 번역을 추가합니다 —— 11개 언어 모두를 번역할 필요는 없으며, 필요한 언어만 선택하면 됩니다.

4. 게시하기

완료되면 화면 상단의 Published(게시됨)를 클릭합니다 —— 게시되기 전까지 이 앱은 사용자의 사이드바나 상단 메뉴에 표시되지 않습니다.

5. 권한

역할(Roles) 화면에서 새 앱에 대한 읽기/생성/수정/삭제 권한을 추가해야 합니다 —— 각 커스텀 앱은 자동으로 권한 키(custom_<앱_이름>)를 부여받습니다.

게시하기 전에

게시하기 전에 모든 필수 필드(Required)와 기본 필드(Primary)가 올바르게 설정되었는지 확인하세요 —— 사용자가 데이터를 입력하기 시작한 후에 이를 변경하면 혼란을 일으킬 수 있습니다.


돌아가기: 커스텀 애플리케이션 ←