dhis2_generate_ui_data_display
Generate UI data display components for DHIS2 applications, including tables, cards, lists, modals, and loading states to visualize health information system data.
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 | |
| includeTable | No | Include DataTable | |
| includePagination | No | Include pagination controls | |
| includeCards | No | Include Card layout | |
| includeLists | No | Include list component | |
| includeModal | No | Include Modal dialog | |
| includeLoading | No | Include CircularLoader loading state | |
| skeleton | No | Include skeleton placeholders | |
| emptyState | No | Include empty state component | |
| sorting | No | Include column sorting example | |
| selection | No | Include row selection example | |
| stickyHeader | No | Use sticky header in table |
Implementation Reference
- src/index.ts:1079-1086 (handler)Handler dispatch for the tool: calls generateUIDataDisplayPatterns with input args and returns the generated code as text content.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-1441 (helper)Core implementation: Generates React code snippets using @dhis2/ui components for data display patterns including tables, cards, lists, modals, pagination, and loading states.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:171-178 (registration)Tool permission registration: Maps the tool to 'canUseUITools' permission in TOOL_PERMISSIONS allowing access control.['dhis2_generate_ui_data_display', 'canUseUITools'], ['dhis2_generate_ui_navigation_layout', 'canUseUITools'], ['dhis2_generate_design_system', 'canUseUITools'], ['android_generate_material_form', 'canUseMobileFeatures'], ['android_generate_list_adapter', 'canUseMobileFeatures'], ['android_generate_navigation_drawer', 'canUseMobileFeatures'], ['android_generate_bottom_sheet', 'canUseMobileFeatures'], ]);
- src/index.ts:27-35 (helper)Import statement for the generateUIDataDisplayPatterns helper function from webapp-generators.generateUIDataDisplayPatterns, generateUINavigationLayout, generateDesignSystemConfig, generateAndroidMaterialForm, generateAndroidListAdapter, generateAndroidNavigationDrawer, generateAndroidBottomSheet, generateTestSetup } from './webapp-generators.js';