Edit Card – Code

Implementation
EditCard Props

Common Examples

import { EditCard, EditCardState } from "@servicetitan/anvil2";

const ExampleComponent = () => {
  const [state, setState] = useState<EditCardState>("not started");
  const onChange = (change: EditCardChange) => {
    if (change === "edit") {
      setState("in progress");
    }
    if (change === "save") {
      setState("complete");
    }
    if (change === "cancel") {
      setState("not started");
    }
  };
  return <EditCard state={state} headerText="Header" />;
};

Validation

Saving can be disabled while the contents of the component fail validation.

import { EditCard } from "@servicetitan/anvil2";

function ExampleComponent() {
return (

<EditCard
  headerText="Header"
  state="not started"
  disableEdit={false}
  disableSave={false}
  editButtonText="Edit"
  saveButtonText="Save"
/>
); }

`EditCard` Props

headerText

string | { "not started": string; "in progress": string; error: string; complete: string }

required

Pass an object in order to change the header text based on the current state. This property is required.

state

"not started" | "in progress" | "error" | "complete"

required

disableEdit

boolean

default:"false"

disableSave

boolean

default:"false"

editButtonText

string

default:"Edit"

onStateChange

Called when a button is pressed intended to change state (edit, save, or cancel).

saveButtonText

string

default:"Save"

The text displayed on the save button.

Anvil2 Web

Resources

Edit Card – Code

Common Examples

Validation

`EditCard` Props

Anvil2 Web

Resources

Documentation Index

​Common Examples

​Validation

​EditCard Props

Common Examples

Validation

`EditCard` Props