---
name: opencti-platform-create-creation-form
description: "Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity"
license: "NOASSERTION"
metadata:
  decimalai-skill-id: "48e9b441-b264-44e3-babf-52e2c9c28122"
  decimalai-version-id: "435077b6-8cbe-4276-939e-7d458665f027"
  decimalai-version: "1"
  decimalai-body-sha256: "fb24c6f74f51f1efdc744610d561ef719698d78f613e694542d6910d445f99c2"
  decimalai-name: "opencti-platform/create-creation-form"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/opencti-platform-create-creation-form@1/SKILL.md"
---
# 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>
  );
};
```