#ctx.view

View controller yang aktif saat ini (popup, drawer, popover, area embedded, dll.), untuk mengakses informasi level view dan operasi. Disediakan oleh FlowViewContext, hanya tersedia di konten view yang dibuka melalui ctx.viewer atau ctx.openView.

#Skenario Penggunaan

Perhatian: ctx.view hanya tersedia pada environment RunJS yang memiliki konteks view (seperti dalam content ctx.viewer.dialog(), popup form, dalam pemilih relasi); pada halaman biasa atau konteks backend adalah undefined, disarankan melakukan optional chaining saat digunakan (ctx.view?.close?.()).

#Definisi Tipe

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>;  // Tersedia pada view konfigurasi flow
};

#Properti dan Method Umum

Saat ini hanya dialog dan drawer yang mendukung Header dan Footer.

#Field Umum inputArgs

Field inputArgs berbeda pada skenario pembukaan yang berbeda, yang umum termasuk:

Diakses melalui ctx.getVar('ctx.view.inputArgs.xxx') atau ctx.view.inputArgs.xxx.

#Contoh

#Menutup View Saat Ini

// Menutup popup setelah submit berhasil
await ctx.resource.runAction('create', { data: formData });
ctx.view?.close();

// Menutup dan mengembalikan hasil
ctx.view?.close({ id: newRecord.id, name: newRecord.name });

#Menggunakan Header / Footer di content

function DialogContent() {
  const ctx = useFlowViewContext();
  const { Header, Footer, close } = ctx.view;
  return (
    <div>
      <Header title="Edit" extra={<Button size="small">Bantuan</Button>} />
      <div>Konten form...</div>
      <Footer>
        <Button onClick={() => close()}>Batal</Button>
        <Button type="primary" onClick={handleSubmit}>OK</Button>
      </Footer>
    </div>
  );
}

#Membuat Cabang Berdasarkan Tipe View atau inputArgs

if (ctx.view?.type === 'embed') {
  // Sembunyikan header pada view embedded
  ctx.model.setProps('headerStyle', { display: 'none' });
}

const collectionName = ctx.view?.inputArgs?.collectionName;
if (collectionName === 'users') {
  // Skenario pemilih user
}

#Hubungan dengan ctx.viewer, ctx.openView

ctx.viewer bertanggung jawab atas "membuka" view, ctx.view merepresentasikan instance view "saat ini" tempat berada; ctx.openView digunakan untuk membuka flow view yang sudah dikonfigurasi.

#Hal yang Perlu Diperhatikan

• ctx.view hanya tersedia di dalam view, di halaman biasa adalah undefined
• Gunakan optional chaining: ctx.view?.close?.() untuk menghindari error pada konteks tanpa view
• result dari close(result) akan diteruskan ke Promise yang dikembalikan ctx.viewer.open()

#Terkait

• ctx.openView(): Membuka flow view yang sudah dikonfigurasi
• ctx.modal: Popup ringan (informasi, konfirmasi, dll.)

ctx.viewer menyediakan method seperti dialog(), drawer(), popover(), embed() untuk membuka view, di dalam content yang dibuka dapat mengakses ctx.view.