dhis2_generate_ui_data_display
Create customizable UI components like tables, cards, lists, modals, and loading states for DHIS2 health information systems, enhancing data display and user interaction.
Instructions
Generate @dhis2/ui data display patterns (tables, cards, lists, modal, loading states)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | No | Component name | |
| emptyState | No | Include empty state component | |
| includeCards | No | Include Card layout | |
| includeLists | No | Include list component | |
| includeLoading | No | Include CircularLoader loading state | |
| includeModal | No | Include Modal dialog | |
| includePagination | No | Include pagination controls | |
| includeTable | No | Include DataTable | |
| selection | No | Include row selection example | |
| skeleton | No | Include skeleton placeholders | |
| sorting | No | Include column sorting example | |
| stickyHeader | No | Use sticky header in table |
Implementation Reference
- src/index.ts:1079-1086 (handler)MCP tool handler implementation. Receives arguments, calls generateUIDataDisplayPatterns function from webapp-generators.ts, and returns generated markdown code as tool response.case 'dhis2_generate_ui_data_display': const displayArgs = args as any; const displayCode = generateUIDataDisplayPatterns(displayArgs); return { content: [ { type: 'text', text: displayCode } ] };
- src/webapp-generators.ts:1352-1440 (helper)Core generator function that produces markdown documentation with complete React JSX code examples for data display UI patterns using DHIS2 UI library components (DataTable, Card, lists, modals, loading states, pagination). Customizable via args.export function generateUIDataDisplayPatterns(args: any): string { const { componentName = 'DataDisplay', includeTable = true, includePagination = true, includeCards = true, includeLists = true, includeModal = true, includeLoading = true } = args; return `# @dhis2/ui Data Display Patterns: ${componentName} ## Implementation \`\`\`jsx import React from 'react'; import { DataTable, DataTableHead, DataTableRow, DataTableColumnHeader, DataTableBody, DataTableCell, Card, Modal, ModalTitle, ModalContent, ModalActions, Button, ${includeLoading ? 'CircularLoader,' : ''} } from '@dhis2/ui'; export const ${componentName} = ({ items = [], loading = false }) => { const [open, setOpen] = React.useState(false); if (loading) { return ${includeLoading ? '<CircularLoader />' : '<div>Loading...</div>'}; } return ( <div style={{ display: 'grid', gap: 16 }}> ${includeTable ? ` <DataTable> <DataTableHead> <DataTableRow> <DataTableColumnHeader>Name</DataTableColumnHeader> <DataTableColumnHeader>Type</DataTableColumnHeader> </DataTableRow> </DataTableHead> <DataTableBody> {items.map((it) => ( <DataTableRow key={it.id}> <DataTableCell>{it.displayName}</DataTableCell> <DataTableCell>{it.valueType}</DataTableCell> </DataTableRow> ))} </DataTableBody> </DataTable> ${includePagination ? `<div style={{ textAlign: 'center' }}><Button>Prev</Button> <Button>Next</Button></div>` : ''} ` : ''} ${includeCards ? ` <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}> {items.slice(0, 4).map((it) => ( <Card key={it.id}> <div style={{ padding: 16 }}> <h3 style={{ margin: '0 0 8px' }}>{it.displayName}</h3> <div>Type: {it.valueType}</div> </div> </Card> ))} </div> ` : ''} ${includeLists ? ` <ul> {items.slice(0, 5).map((it) => ( <li key={it.id}>{it.displayName}</li> ))} </ul> ` : ''} ${includeModal ? ` <> <Button onClick={() => setOpen(true)}>Open modal</Button> <Modal open={open} onClose={() => setOpen(false)}> <ModalTitle>Details</ModalTitle> <ModalContent>Modal content here</ModalContent> <ModalActions> <Button secondary onClick={() => setOpen(false)}>Close</Button> </ModalActions> </Modal> </> ` : ''} </div> ); }; \`\`\` `;
- src/permission-system.ts:170-174 (registration)Permission registration in TOOL_PERMISSIONS static map. Associates tool with 'canUseUITools' permission, used by PermissionSystem.filterToolsByPermissions() to control tool visibility based on DHIS2 user authorities.['dhis2_generate_ui_form_patterns', 'canUseUITools'], ['dhis2_generate_ui_data_display', 'canUseUITools'], ['dhis2_generate_ui_navigation_layout', 'canUseUITools'], ['dhis2_generate_design_system', 'canUseUITools'], ['android_generate_material_form', 'canUseMobileFeatures'],