UI Data Grid

Instructions

Implementation Reference

• src/tools/ui/ui-data-grid-tool.ts:76-108 (registration)

  Registration of the 'ui-data-grid' tool with MCP server, including title, description, input schema, and handler reference.

      public async register(): Promise<void> {
          this.mcpServer.registerTool(
              "ui-data-grid",
              {
                  title: "UI Data Grid Generator",
                  description: `Generate interactive data grids for SAP entities with advanced features.
  
  Features:
  - Dynamic columns from SAP entity metadata
  - Sorting, filtering, and grouping capabilities
  - Export to Excel/CSV/PDF formats
  - Virtual scrolling for large datasets
  - Column resizing and reordering
  - Responsive design for mobile/desktop
  - Real-time data refresh
  - Selection modes (single/multiple)
  - Custom cell formatters and templates
  
  Required scope: ui.grids
  
  Examples:
  - Basic customer grid: {"entitySet": "Customers"}
  - Products with custom columns: {"entitySet": "Products", "columns": [...]}
  - Orders with filtering: {"entitySet": "Orders", "features": {"filtering": true, "export": true}}`,
                  inputSchema: UIDataGridSchema
              },
              async (args: Record<string, unknown>) => {
                  return await this.handleDataGridGeneration(args);
              }
          );
  
          this.logger.info("✅ UI Data Grid tool registered successfully");
      }

• src/tools/ui/ui-data-grid-tool.ts:20-53 (schema)

  Input schema using Zod for validating parameters such as entitySet, columns, features, pageSize, and dataQuery for the UI data grid tool.

  const UIDataGridSchema = {
      entitySet: z.string().describe("SAP entity set name (e.g., 'Customers', 'Products', 'Orders')"),
      serviceId: z.string().optional().describe("SAP service ID containing the entity set"),
      columns: z.array(z.object({
          key: z.string().describe("Field name from entity"),
          label: z.string().describe("Column header display name"),
          type: z.enum(['text', 'number', 'date', 'boolean', 'custom']).optional().describe("Column data type"),
          width: z.string().optional().describe("Column width (e.g., '150px', '20%')"),
          sortable: z.boolean().optional().describe("Enable sorting for this column"),
          filterable: z.boolean().optional().describe("Enable filtering for this column"),
          formatter: z.string().optional().describe("Custom formatter function name"),
          template: z.string().optional().describe("Custom cell template")
      })).optional().describe("Custom column configurations"),
      features: z.object({
          sorting: z.boolean().optional().describe("Enable sorting functionality"),
          filtering: z.boolean().optional().describe("Enable filtering functionality"),
          grouping: z.boolean().optional().describe("Enable grouping functionality"),
          export: z.boolean().optional().describe("Enable export functionality"),
          columnResize: z.boolean().optional().describe("Enable column resizing"),
          virtualScrolling: z.boolean().optional().describe("Enable virtual scrolling for large datasets")
      }).optional().describe("Grid feature toggles"),
      pageSize: z.number().min(1).max(1000).optional().describe("Number of rows per page"),
      selectionMode: z.enum(['none', 'single', 'multiple']).optional().describe("Row selection mode"),
      initialData: z.array(z.record(z.any())).optional().describe("Initial data to display"),
      dataQuery: z.object({
          filter: z.string().optional().describe("OData $filter query"),
          orderby: z.string().optional().describe("OData $orderby query"),
          select: z.string().optional().describe("OData $select query"),
          top: z.number().optional().describe("OData $top query"),
          skip: z.number().optional().describe("OData $skip query")
      }).optional().describe("Initial data query parameters"),
      theme: z.enum(['sap_horizon', 'sap_fiori_3']).optional().describe("SAP UI theme"),
      responsive: z.boolean().optional().describe("Enable responsive design")
  };

• src/tools/ui/ui-data-grid-tool.ts:110-204 (handler)

  Main handler function that validates input, checks authorization, fetches metadata and data, generates grid configuration and UI, enhances with SAP styles/scripts, and returns the interactive data grid response.

  private async handleDataGridGeneration(args: unknown): Promise<any> {
      try {
          // Validate input parameters
          const params = z.object(UIDataGridSchema).parse(args);
  
          this.logger.info(`📊 Generating UI data grid for entity set: ${params.entitySet}`);
  
          // Check authentication and authorization
          const authCheck = await this.checkUIAccess('ui.grids');
          if (!authCheck.hasAccess) {
              return {
                  content: [{
                      type: "text",
                      text: `❌ Authorization denied: ${authCheck.reason || 'Access denied for UI grid generation'}\n\nRequired scope: ui.grids`
                  }]
              };
          }
  
          // Step 1: Get entity metadata
          const entityMetadata = await this.getEntityMetadata(params.entitySet, params.serviceId);
  
          // Step 2: Generate columns from metadata or use custom
          const gridColumns = params.columns ? params.columns.map(col => ({
              ...col,
              formatter: undefined // Convert string formatters to undefined for now
          })) : await this.generateColumnsFromMetadata(entityMetadata);
  
          // Step 3: Fetch initial data if query provided
          const initialData = params.initialData || await this.fetchInitialData(params.entitySet, params.dataQuery);
  
          // Step 4: Create grid configuration
          const gridConfig: GridConfig = {
              entitySet: params.entitySet,
              columns: gridColumns,
              features: {
                  sorting: true,
                  filtering: true,
                  export: true,
                  columnResize: true,
                  virtualScrolling: Boolean(params.pageSize && params.pageSize > 100),
                  ...params.features
              },
              pageSize: params.pageSize || 20,
              selectionMode: params.selectionMode || 'single'
          };
  
          // Step 5: Generate grid UI
          const gridResult = await this.componentLibrary.generateDataGrid(gridConfig);
  
          // Step 6: Add SAP-specific enhancements
          const enhancedResult = await this.enhanceGridResult(gridResult, params, initialData);
  
          // Step 7: Prepare response
          const response = this.createGridResponse(enhancedResult, gridConfig, initialData);
  
          this.logger.info(`✅ UI data grid generated successfully for ${params.entitySet}`);
  
          return {
              content: [
                  {
                      type: "text",
                      text: `# SAP ${params.entitySet} Data Grid\n\n` +
                            `Interactive data grid generated successfully.\n\n` +
                            `## Grid Features:\n` +
                            `- Columns: ${gridColumns.length}\n` +
                            `- Sorting: ${gridConfig.features?.sorting ? '✅' : '❌'}\n` +
                            `- Filtering: ${gridConfig.features?.filtering ? '✅' : '❌'}\n` +
                            `- Export: ${gridConfig.features?.export ? '✅' : '❌'}\n` +
                            `- Virtual Scrolling: ${gridConfig.features?.virtualScrolling ? '✅' : '❌'}\n` +
                            `- Page Size: ${gridConfig.pageSize}\n` +
                            `- Selection Mode: ${gridConfig.selectionMode}\n\n` +
                            `## Data:\n` +
                            `- Initial Rows: ${initialData.length}\n` +
                            `- Entity Set: ${params.entitySet}\n\n` +
                            `## Usage:\n` +
                            `Embed this grid in your SAP application or use via MCP client.`
                  },
                  {
                      type: "resource",
                      data: response,
                      mimeType: "application/json"
                  }
              ]
          };
  
      } catch (error) {
          this.logger.error(`❌ Failed to generate UI data grid`, error as Error);
          return {
              content: [{
                  type: "text",
                  text: `❌ Failed to generate UI data grid: ${(error as Error).message}`
              }]
          };
      }
  }