그룹코드 등록
분류: 그룹코드 등록
공통 코드 체계(그룹코드/그룹코드명)를 등록하는 팝업 화면의 실제 HandStack 업무 예제입니다. 헤더에는 팝업을 닫는 아이콘 버튼만 두고, 본문은 mb-3으로 줄 간격을 준 입력 필드들을 세로로 나열한 뒤 각 필드 아래 .form-hint로 입력 규칙을 안내합니다. required 클래스가 붙은 라벨은 필수 입력 항목임을 표시합니다.
이 예제의 id, syn-datafield, syn-options, syn-events 속성은 CSS 클래스가 아니라 HandStack view-designer가 화면 컨트롤을 데이터·이벤트에 연결할 때 사용하는 자체 바인딩 속성입니다(예: syn-datafield="CodeID"는 이 입력을 CodeID 데이터 필드에 연결). 마크업/스타일 범위를 다루는 이 문서에서는 다루지 않으며, 자세한 내용은 view-designer 데이터 바인딩 가이드를 참고하세요.
소스
<div class="card">
<div class="card-header sticky-top bg-white">
<h3 class="card-title">그룹코드 등록</h3>
<div class="card-actions">
<div class="input-group box-shadow:none!">
<div class="btn-group box-shadow:none!">
<button type="button" id="btnCloseGroupCode" syn-options="{triggerConfig: {triggerEvent:'click', method: 'syn.$w.closeDialog'}}" class="btn btn-icon border-0 box-shadow:none!">
<i class="f:20 ti ti-x"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label required">그룹코드</label>
<div>
<input id="txtCodeID" syn-datafield="CodeID" syn-options="{belongID: ['ID01']}" type="text" class="form-control" placeholder="그룹코드 6자리를 입력 하세요.">
<small class="form-hint">아르하 업무 코드: COM, 프로그램: PGM, 시스템: SYS 접두어로 코드를 구분합니다.</small>
</div>
</div>
<div class="mb-3">
<label class="form-label required">그룹코드명</label>
<div>
<input id="txtCodeValue" syn-datafield="CodeValue" syn-options="{belongID: ['ID01']}" type="text" class="form-control">
<small class="form-hint">
그룹코드를 표현하는 명칭을 입력합니다.
</small>
</div>
</div>
<div>
<label class="form-label">설명</label>
<textarea id="txtComment" syn-datafield="Comment" syn-options="{belongID: ['ID01'], toSynControl: false}" class="form-control h:100!" placeholder="그룹코드에 대한 추가 설명을 입력합니다."></textarea>
</div>
</div>
<div class="card-footer p-2 text-end">
<button type="button" id="btnAddGroupCode" class="btn btn-primary" syn-events="['click']">
<i class="f:20 ti ti-device-floppy mr:4"></i> 확인
</button>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
card, card-header, card-title, card-body, card-footer | 팝업 카드의 헤더/본문/하단 영역 |
sticky-top | 카드를 스크롤해도 헤더가 상단에 고정되도록 지정 |
bg-white | 헤더 배경을 흰색으로 지정 |
card-actions | 헤더 오른쪽에 닫기 버튼 등 부가 액션을 배치하는 영역 |
input-group, btn-group | 닫기 버튼을 감싸는 Bootstrap 입력/버튼 그룹 컨테이너 |
btn, btn-icon, btn-primary | 아이콘 전용 버튼, 프라이머리 색상 버튼 |
border-0 | 버튼의 기본 테두리 제거 |
form-label | 입력 필드 라벨 |
required | 라벨에 필수 입력 표시(붉은 별표 등) 추가 |
form-control | 텍스트 입력/textarea의 기본 스타일 |
form-hint | 입력 필드 아래에 표시하는 보조 안내 문구 |
mb-3 | 입력 필드 그룹 사이의 아래쪽 여백 |
p-2, text-end | 하단 영역의 안쪽 여백과 버튼 오른쪽 정렬 |
ti, ti-x, ti-device-floppy | Tabler 아이콘 폰트와 아이콘 종류(닫기, 저장) |
f:20 | master-css 속성형 클래스, 아이콘 글자 크기를 20px로 지정 |
mr:4 | master-css 속성형 클래스, 아이콘 오른쪽 여백을 4px로 지정 |
h:100! | master-css 속성형 클래스, !important로 높이를 100%로 강제 지정 |
box-shadow:none! | master-css 속성형 클래스, !important로 그림자를 제거 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/그룹코드-등록.html 경로에서 렌더링 결과를 확인할 수 있습니다.