#ctx.openView()

프로그래밍 방식으로 지정된 뷰(서랍, 팝업, 내장 페이지 등)를 엽니다. FlowModelContext에서 제공하며, JSBlock, 테이블 셀, 워크플로우 등의 시나리오에서 구성된 ChildPage 또는 PopupAction 뷰를 여는 데 사용됩니다.

#적용 사례

주의: ctx.openView는 FlowModel 컨텍스트가 존재하는 RunJS 환경에서 사용할 수 있습니다. uid에 해당하는 모델이 존재하지 않으면 PopupActionModel이 자동으로 생성되고 유지됩니다.

#시그니처

openView(uid: string, options?: OpenViewOptions): Promise<void>

#매개변수 설명

#uid

뷰 모델의 고유 식별자입니다. 존재하지 않으면 자동으로 생성되어 저장됩니다. 동일한 팝업을 여러 번 열 때 구성을 재사용할 수 있도록 ${ctx.model.uid}-detail과 같은 고정된 UID를 사용하는 것이 좋습니다.

#options 주요 필드

#예제

#기본 사용법: 서랍 열기

const popupUid = `${ctx.model.uid}-detail`;
await ctx.openView(popupUid, {
  mode: 'drawer',
  size: 'medium',
  title: ctx.t('상세'),
});

#현재 행 컨텍스트 전달

const primaryKey = ctx.collection?.primaryKey || 'id';
await ctx.openView(`${ctx.model.uid}-1`, {
  mode: 'dialog',
  title: ctx.t('행 상세'),
  params: {
    filterByTk: ctx.record?.[primaryKey],
    record: ctx.record,
  },
});

#runAction을 통해 열기

모델에 openView 액션(연관 필드, 클릭 가능한 필드 등)이 구성되어 있는 경우 다음과 같이 호출할 수 있습니다.

await ctx.runAction('openView', {
  navigation: false,
  mode: 'dialog',
  collectionName: 'users',
  filterByTk: ctx.record?.id,
});

#사용자 정의 컨텍스트 주입

await ctx.openView(`${ctx.model.uid}-edit`, {
  mode: 'drawer',
  filterByTk: ctx.record?.id,
  defineProperties: {
    onSaved: {
      get: () => () => ctx.resource?.refresh?.(),
      cache: false,
    },
  },
});

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

ctx.openView는 FlowPage(ChildPageModel)를 열며 내부적으로 전체 워크플로우 페이지를 렌더링합니다. ctx.viewer는 임의의 React 콘텐츠를 엽니다.

#주의 사항

• uid는 여러 블록 간의 충돌을 피하기 위해 ctx.model.uid와 연관시키는 것이 좋습니다(예: ${ctx.model.uid}-xxx).
• defineProperties / defineMethods를 전달할 때, 새로고침 후 컨텍스트 손실을 방지하기 위해 navigation은 강제로 false로 설정됩니다.
• 팝업 내의 ctx.view는 현재 뷰 인스턴스를 가리키며, ctx.view.inputArgs를 통해 열 때 전달된 매개변수를 읽을 수 있습니다.

#관련 문서

• ctx.view: 현재 열려 있는 뷰 인스턴스
• ctx.model: 고정된 popupUid를 생성하는 데 사용되는 현재 모델