create-creation-form
Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity
Quellinformationen
- Repository
- OpenCTI-Platform/opencti
- Letzte Quellaktivität
- 12. Mai 2026 um 12:56
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 10.152
- Forks
- 1.480
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- create-creation-form
- description
- Use when: scaffolding a creation form drawer with Formik validation and a Relay mutation for a new entity
# 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>
);
};
```
Auf GitHub ansehen