dhis2_generate_ui_form_patterns
Automatically create @dhis2/ui form patterns, including inputs, validation, date picker, file upload, and multi-select components, tailored for DHIS2 health information systems.
Instructions
Generate @dhis2/ui form patterns (inputs, validation, date picker, file upload, multi-select)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| accessibility | No | Add accessibility attributes and checklist | |
| componentName | No | Component name | |
| density | No | Form density guidance | |
| i18n | No | Include @dhis2/d2-i18n usage | |
| includeDatePicker | No | Include DatePicker | |
| includeFileUpload | No | Include FileInput upload | |
| includeMultiSelect | No | Include MultiSelect | |
| includeSelects | No | Include SingleSelect inputs | |
| includeValidation | No | Include client-side validation | |
| rtl | No | Add RTL considerations |
Implementation Reference
- src/webapp-generators.ts:1228-1350 (handler)The core handler function that generates React code snippets for DHIS2 UI form patterns using @dhis2/ui components, supporting validation, date pickers, file uploads, multi-selects, and more.export function generateUIFormPatterns(args: any): string { const { componentName = 'AdvancedForm', includeValidation = true, includeDatePicker = true, includeFileUpload = true, includeMultiSelect = true, includeSelects = true } = args; return `# @dhis2/ui Form Patterns: ${componentName} ## Implementation \`\`\`jsx import React from 'react'; import { Button, Field, InputField, TextAreaField, SingleSelectField, SingleSelectOption, ${includeMultiSelect ? 'MultiSelectField, MultiSelectOption,' : ''} ${includeDatePicker ? 'DatePicker,' : ''} ${includeFileUpload ? 'FileInput,' : ''} } from '@dhis2/ui'; ${includeValidation ? "import { useState } from 'react';" : ''} export const ${componentName} = () => { ${includeValidation ? 'const [errors, setErrors] = useState<Record<string, string | null>>({});' : ''} const [form, setForm] = React.useState({ name: '', description: '', valueType: 'NUMBER', date: '', ${includeMultiSelect ? 'options: [],' : ''} }); const onChange = (key, value) => setForm(prev => ({ ...prev, [key]: value })); const onSubmit = (e) => { e.preventDefault(); ${includeValidation ? ` const nextErrors: Record<string, string | null> = {}; if (!form.name?.trim()) nextErrors.name = 'Name is required'; if (form.name && form.name.length > 50) nextErrors.name = 'Max 50 characters'; setErrors(nextErrors); if (Object.keys(nextErrors).length > 0) return; ` : ''} // Submit logic here console.log('Submitting form', form); }; return ( <form onSubmit={onSubmit} style={{ display: 'grid', gap: 16 }}> <InputField label="Name" name="name" value={form.name} onChange={({ value }) => onChange('name', value)} ${includeValidation ? 'validationText={errors.name || undefined}' : ''} ${includeValidation ? 'error={Boolean(errors.name)}' : ''} required /> <TextAreaField label="Description" name="description" value={form.description} onChange={({ value }) => onChange('description', value)} rows={4} /> ${includeSelects ? ` <SingleSelectField label="Value type" selected={form.valueType} onChange={({ selected }) => onChange('valueType', selected)} > <SingleSelectOption value="NUMBER" label="Number" /> <SingleSelectOption value="INTEGER" label="Integer" /> <SingleSelectOption value="TEXT" label="Text" /> </SingleSelectField> ` : ''} ${includeMultiSelect ? ` <MultiSelectField label="Categories" selected={form.options} onChange={({ selected }) => onChange('options', selected)} > <MultiSelectOption value="male" label="Male" /> <MultiSelectOption value="female" label="Female" /> </MultiSelectField> ` : ''} ${includeDatePicker ? ` <Field label="Start date"> <DatePicker calendar="gregorian" date={form.date} onDateSelect={({ date }) => onChange('date', date)} /> </Field> ` : ''} ${includeFileUpload ? ` <Field label="Attachment"> <FileInput onChange={({ files }) => onChange('file', files?.[0])} buttonLabel="Choose file" /> </Field> ` : ''} <Button type="submit" primary>Save</Button> </form> ); }; \`\`\` ## Notes - Includes validation, date picker, file upload, and multi-select patterns. - Replace options with dynamic lists as needed. `; }
- src/index.ts:1070-1077 (registration)Registration and dispatch handler in the main MCP server CallToolRequestSchema handler that invokes the generateUIFormPatterns function when the tool is called.case 'dhis2_generate_ui_form_patterns': const formArgs = args as any; const formCode = generateUIFormPatterns(formArgs); return { content: [ { type: 'text', text: formCode } ] };
- src/permission-system.ts:170-170 (registration)Tool permission mapping that requires 'canUseUITools' permission for the dhis2_generate_ui_form_patterns tool.['dhis2_generate_ui_form_patterns', 'canUseUITools'],
- src/index.ts:19-35 (registration)Import statement that brings the generateUIFormPatterns handler into the main index.ts for tool registration.generateWebAppInitInstructions, generateManifestContent, generateBuildSystemConfig, generateDevEnvironmentConfig, generateAppRuntimeConfig, generateAuthenticationPatterns, generateUIComponents, generateUIFormPatterns, generateUIDataDisplayPatterns, generateUINavigationLayout, generateDesignSystemConfig, generateAndroidMaterialForm, generateAndroidListAdapter, generateAndroidNavigationDrawer, generateAndroidBottomSheet, generateTestSetup } from './webapp-generators.js';