# Create Creation Form

> Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity

- Skill: `opencti-platform/create-creation-form` (Agent Skill)
- Install (CLI): `npx skillmds@latest add opencti-platform/create-creation-form`
- Raw SKILL.md: https://api.skillmd.com/api/skills/opencti-platform/create-creation-form/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: OpenCTI-Platform (https://skillmd.com/u/opencti-platform)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/opencti-platform/create-creation-form

---


# Create Creation Form (Drawer)

## Prerequisites
- **Mutation**: GraphQL mutation for creating the entity.
- **Fields**: List of fields to display.

## Procedure

### Step 0 — Find an Existing Example
Use the **Codebase Pattern Finder** agent to locate a similar existing creation form in `opencti-platform/opencti-front/src/private/components/` (look for files ending in `Creation.tsx`). Model the new form after the existing one to stay idiomatic.

### Step 1 — Define Mutation & Validation
Use `Yup` for validation schema.

```tsx
const creationMutation = graphql`
  mutation MyEntityCreationMutation($input: MyEntityAddInput!) {
    myEntityAdd(input: $input) {
      ...MyEntityLine_node
    }
  }
`;

const validationSchema = Yup.object().shape({
  name: Yup.string().required(t('This field is required')),
});
```

### Step 2 — Create Component Structure
Return a `Drawer` containing a `Formik` form.

```tsx
export const MyEntityCreation: React.FC<Props> = ({ paginationOptions }) => {
  const [commit] = useApiMutation(creationMutation);
  
  const onSubmit = (values, { setSubmitting, resetForm }) => {
    commit({
      variables: {
        input: values,
      },
      updater: (store) => {
        // Use utils/store helper
        insertNode(store, 'Pagination_myEntities', paginationOptions, 'myEntityAdd');
      },
      onCompleted: () => {
        setSubmitting(false);
        resetForm();
      },
    });
  };

  return (
    <Drawer title={t_i18n('Create entity')}>
      <Formik initialValues={{ name: '' }} validationSchema={validationSchema} onSubmit={onSubmit}>
         <Form>
            <Field component={TextField} name="name" label={t_i18n('Name')} />
             <Button type="submit">{t_i18n('Create')}</Button>
         </Form>
      </Formik>
    </Drawer>
  );
};
```