PalmyraViewForm#

@palmyralabs/rt-forms · src/palmyra/form/PalmyraViewForm.tsx

Overview#

Read-only variant of PalmyraEditForm. Fetches a record by id on mount, exposes getData and refresh, but has no saveData and no onValidChange — the form is never considered dirty because it never submits.

Use for detail views, confirmation panes, and drill-downs. Pair it with rt-forms-mantine field widgets in their disabled / display-only mode.

Props — IPalmyraViewFormInput#

interface IPalmyraViewFormInput extends IuseFormOptions<StoreOptions>,
                                        IFormQueryEventHandler {
  id:              string;
  idKey?:          string;             // defaults to the store's id property
  fields?:         string[];           // projection — fetch only these
  onQueryData?:    (data: any) => void;
  onQueryFailure?: (error: any) => void;
  children?:       any;
}

Ref — IViewForm#

interface IViewForm extends IForm {
  refresh(): void;       // re-fetch the record
}

getData() and setData() are inherited from IForm; isValid() always returns true.

Example#

import { useRef } from 'react';
import { PalmyraViewForm, FieldGroupContainer, type IViewForm } from '@palmyralabs/rt-forms';
import { TextField, TextArea } from '@palmyralabs/rt-forms-mantine';
import { Button } from '@mantine/core';

export function ManufacturerDetails({ id }: { id: string }) {
  const formRef = useRef<IViewForm>(null);

  return (
    <>
      <PalmyraViewForm
        formRef={formRef}
        endPoint="/mstManufacturer/{id}"
        id={id}
        fields={['name', 'contactMobile', 'contactEmail', 'address', 'rating']}
      >
        <FieldGroupContainer columns={2}>
          <TextField attribute="name"          label="Name"    readOnly />
          <TextField attribute="contactMobile" label="Mobile"  readOnly />
          <TextField attribute="contactEmail"  label="Email"   readOnly />
          <TextArea  attribute="address"       label="Address" readOnly colspan={2} />
        </FieldGroupContainer>
      </PalmyraViewForm>
      <Button onClick={() => formRef.current?.refresh()}>Reload</Button>
    </>
  );
}
Backward PalmyraEditForm FieldGroup Forward