#ctx.view

현재 활성화된 뷰 컨트롤러(팝업, 드로어, 팝오버, 임베디드 영역 등)로, 뷰 수준의 정보와 작업에 액세스하는 데 사용됩니다. FlowViewContext에서 제공하며, ctx.viewer 또는 ctx.openView를 통해 열린 뷰 콘텐츠 내에서만 사용할 수 있습니다.

#적용 시나리오

주의: ctx.view는 뷰 컨텍스트가 있는 RunJS 환경(예: ctx.viewer.dialog()의 content 내부, 팝업 폼, 관계 선택기 내부)에서만 사용할 수 있습니다. 일반 페이지나 백엔드 컨텍스트에서는 undefined이므로, 사용 시 옵셔널 체이닝(ctx.view?.close?.())을 사용하는 것이 좋습니다.

#타입 정의

type FlowView = {
  type: 'drawer' | 'popover' | 'dialog' | 'embed';
  inputArgs: Record<string, any>;
  Header: React.FC<{ title?: React.ReactNode; extra?: React.ReactNode }> | null;
  Footer: React.FC<{ children?: React.ReactNode }> | null;
  close: (result?: any, force?: boolean) => void;
  update: (newConfig: any) => void;
  navigation?: ViewNavigation;
  destroy?: () => void;
  submit?: () => Promise<any>;  // 워크플로우 설정 뷰에서 사용 가능
};

#주요 속성 및 메서드

현재 dialog와 drawer만 Header와 Footer를 지원합니다.

#inputArgs 주요 필드

뷰를 여는 시나리오에 따라 inputArgs 필드가 다르며, 주요 필드는 다음과 같습니다.

ctx.getVar('ctx.view.inputArgs.xxx') 또는 ctx.view.inputArgs.xxx를 통해 액세스합니다.

#예시

#현재 뷰 닫기

// 제출 성공 후 팝업 닫기
await ctx.resource.runAction('create', { data: formData });
ctx.view?.close();

// 닫고 결과 반환
ctx.view?.close({ id: newRecord.id, name: newRecord.name });

#콘텐츠 내에서 Header / Footer 사용하기

function DialogContent() {
  const ctx = useFlowViewContext();
  const { Header, Footer, close } = ctx.view;
  return (
    <div>
      <Header title="편집" extra={<Button size="small">도움말</Button>} />
      <div>폼 내용...</div>
      <Footer>
        <Button onClick={() => close()}>취소</Button>
        <Button type="primary" onClick={handleSubmit}>확인</Button>
      </Footer>
    </div>
  );
}

#뷰 유형 또는 inputArgs에 따른 분기 처리

if (ctx.view?.type === 'embed') {
  // 임베디드 뷰에서 헤더 숨기기
  ctx.model.setProps('headerStyle', { display: 'none' });
}

const collectionName = ctx.view?.inputArgs?.collectionName;
if (collectionName === 'users') {
  // 사용자 선택기 시나리오
}

#ctx.viewer, ctx.openView와의 관계

ctx.viewer는 뷰를 "여는" 역할을 담당하고, ctx.view는 "현재" 위치한 뷰 인스턴스를 나타냅니다. ctx.openView는 이미 설정된 워크플로우 뷰를 여는 데 사용됩니다.

#주의사항

• ctx.view는 뷰 내부에서만 사용할 수 있으며, 일반 페이지에서는 undefined입니다.
• 옵셔널 체이닝을 사용하세요: ctx.view?.close?.()를 통해 뷰 컨텍스트가 없을 때의 오류를 방지합니다.
• close(result)의 result는 ctx.viewer.open()이 반환하는 Promise로 전달됩니다.

#관련 문서

• ctx.openView(): 설정된 워크플로우 뷰 열기
• ctx.modal: 가벼운 팝업 (정보, 확인 등)

ctx.viewer는 dialog(), drawer(), popover(), embed() 등의 메서드를 제공하여 뷰를 열며, 해당 메서드로 열린 content 내에서 ctx.view에 액세스할 수 있습니다.