Fabric App /Data App简介：代码实现数据的可视化

Fabric App是Fabric中一个新的项目类型，实际上就是Web Application。一个简单的 Fabric App 示例可以是连接到Semantic Model并进行查询的交互式 Web 仪表板。由于此仪表板完全由代码构建，而不是自助服务工具，这意味着您可以创建所需的任何设计或功能。重要的是可以完全使用 GitHub Copilot、Claude Code 等编码代理来驱动整个过程。Visualization as code ，通过代码实现数据的可视化。

Fabric App和Data App为 Microsoft Fabric 开启了众多令人兴奋的新可能性，不仅可以用于数据可视化，还能利用数据创建新颖、富有创意且交互式的数据体验。大多数 BI 开发人员、分析师和业务用户都没有创建 Web Application的经验，因此，如果他们要创建此类应用，通常会主要使用 AI。然而，这也意味着 Fabric 向新的角色敞开了大门：Web 和前端开发人员。

一，比较Fabric App和 Data App的区别

• Fabric Apps are an item type in Fabric for making web applications.
• Data apps are a template type of Fabric App that lets you easily connect to and query data. It queries data via DAX. It doesn’t provision a SQL database

简单来说，Data App是一个部署在Fabric中的Web Application，能够从Semantic Model中使用DAX查询数据，就像从Power BI 报表中获取数据一样。

查询结果可用于展示表格、可视化图表及其他各类内容，包括自定义功能和系统集成。由于这是一个 Web 应用程序，而不仅仅是自助式仪表板，因此只要能在代码中实现，你几乎可以构建任何功能。这涵盖了自定义交互或集成，例如利用数据来触发或控制其他操作。需要强调的是，所有功能都必须通过代码实现；这里没有现成的用户界面（UI），一切代码均需由你亲自编写。

In Power BI, for most report authors, this goes as follows:

1. You create a report and connect it to a semantic model.
2. To add visuals, you use a user interface to select, position, and format them. They come with a preset “Power BI identity” in their configuration.
3. A JSON theme file provides the general styles across the report, but you can override them with finite selections in a formatting pane.
4. The visuals populate with data using DAX queries that are automatically generated. You can only view them with the Performance Analyzer.
5. Visuals and reports come with a lot of functionality baked-in:
   1. Cross-filtering or highlighting between visuals with edit interactions.
   2. Drilldown or drillthrough.
   3. Filter pane and slicers, among many more.
   4. You can add, order, hide pages, all from the UI.
6. When you save the report it saves it in a structured metadata JSON format (PBIR). You don’t need to use that format save for advanced scenarios; you can even deploy (publish) the report from the UI.

In contrast, in a data app you (with or without an AI agent) follow the below steps:

1. You create a project of source files using a command-line tool in a terminal; there’s no user interface. The connection is specified in a configuration file.
2. To add visuals, you must write their specification in code. You are unlimited in your flexibility, but it’s possible to write invalid, bad, or inconsistent specifications.
3. A CSS file provides the general styles which can be overridden programmatically.
4. DAX queries must be authored as .dax files. They must follow a special syntax to use string replacement to work with filtering and dynamic selections.
5. Visuals have some functionality baked in with the Microsoft packages, like cross-highlighting. However, other functionality like drilldown, drillthrough, or even something like Export to Excel are not. Even separate pages must be coded yourself, from scratch.
6. In a data app, you are working solely with the code. To view your app, you need to run a command to build it and run a local development server, then view it in your browser. To deploy it, you also need to run a command.

总结一下：

Data App和Power BI Desktop的开发很不同，所有的功能都需要使用Code来实现，而不是通过在画布或面板上进行拖放操作来实现。在Power BI Desktop中，代码和技术复杂性都被隐藏在UI的底层代码之下。Data App的数据应用包括HTML、CSS、TypeScript、JavaScript 和 DAX 等多种语言的源代码，以及各种 YAML 配置文件。因此，Data App比Power BI报表复杂的多，这些文件需要一个项目来进行管理，实际上，这是一个Web Application的开发项目。虽然Data App更复杂，但是其功能更强大，且赋予了你更高的自由度。除非你是 Web 开发人员，否则这意味着你很可能需要借助 GitHub Copilot 和 Claude Code 等具备编码能力的 AI 智能体来编写这些文件。

二，Data App的文件系统

数据应用中包含各种文件，这些文件使用多种不同的编程语言编写。这些文件定义了所有内容：DAX 查询、可视化图表、格式/样式、配置和功能。

• Web app文件：包含了构建 Web 应用所需的各种组件。
• fabric.yaml 文件描述了您连接到的工作区和语义模型，而 rayfin.yml 文件则包含后端配置。
• global.css 文件为应用提供集中式的样式和格式。您可以将其视为 Power BI 报表中的主题文件，但它是 CSS 文件，而不是 JSON 文件。

一个图表是如何渲染的？

Data App Dashboard中的每个chart通常都由一个 React 组件（.tsx 文件；.ts 和 .tsx 是 TypeScript 源文件）构成，该组件使用 Microsoft 的标准组件来创建图表和表格。此文件由项目中三个同名的小文件组成：

• .dax文件：用于显示数据的 DAX 查询。此 DAX 文件包含元素的占位符，例如筛选值，这些占位符会根据筛选条件或交互情况，通过字符串替换来获取正确的值。与 Power BI 报表的主要区别在于，在 Power BI 中，您无需编写可视化的 DAX 查询，而且 DAX 查询在文件中也不可见；它是自动生成的。将 DAX 查询放在文件中意味着更多的工作，但也意味着更多的控制权和更高的可见性，以便在必要时进行调试和故障排除，因为您可以在表格编辑器和 DAX Studio 中打开此 DAX 文件并以交互方式运行查询。
• .json文件：一个包含视觉规范的 .json 文件。这仅适用于使用 Vega-Lite 和 Microsoft 提供的组件的情况；使用其他库时，其工作方式有所不同。视觉效果的格式由 global.css 文件提供，但也可以在此处进行覆盖。
• .ts 文件：它将 .dax 和 .json 文件关联起来，并将它们指向您的语义模型。该文件就像一个“工厂”，它使用各种配置文件和辅助包，接收 DAX 查询来查询您的模型。

这里有一个.dax文件示例，该文件由 AI 代理使用 @microsoft 软件包提供的技能编写：

// by-region.dax
EVALUATE
CALCULATETABLE(
    FILTER(
        SUMMARIZECOLUMNS(
            'Regions'[{{LEVEL}}],
            "OTD %",     [OTD % (Lines)],
            "OTD % 1YP", [OTD % (Lines) 1YP],
            "vs 1YP",    [OTD % (Lines) vs 1YP (Δ)]
        ),
        NOT ISBLANK([OTD %])
    ),
    'Date'[Calendar Year Number (ie 2021)] = {{YEAR}},
    'Exchange Rate'[From Currency] = "EUR"{{FILTERS}}
)
ORDER BY [OTD %]

请注意，CALCULATETABLE 中的筛选器语法比较特殊；其中包含占位符 {{LEVEL}}、{{YEAR}} 和 {{FILTERS}}。这是因为数据应用程序在运行时使用字符串替换来构建最终查询；它执行查找和替换操作。TypeScript (.ts) 文件正是执行此操作。对应的 by-region.ts 文件如下所示（您无需了解 TypeScript 即可理解其功能）：

 

// by-region.ts
import type { ColumnMetadataMap } from "@/lib/to-data-table";
import type { CrossFilter, RegionLevel } from "@/lib/cross-filter";
import { buildFilterDax } from "@/lib/cross-filter";
import baseQuery from "./by-region.dax?raw";
import vegaLiteSpec from "./by-region.json";
const connection = "spaceparts";
export function byRegion(filter: CrossFilter) {
  const level: RegionLevel = filter.regionLevel ?? "System";
  const columnMetadata: ColumnMetadataMap = {
    [`Regions[${level}]`]: { name: "Region", displayName: level },
    "[OTD %]":     { name: "OTD",    displayName: "OTD %",     format: ".1%" },
    "[OTD % 1YP]": { name: "OTD1YP", displayName: "OTD % 1YP", format: ".1%" },
    "[vs 1YP]":    { name: "vs1YP",  displayName: "vs 1YP",    format: "+.1%" },
  };
  const query = baseQuery
    .replace(/{{LEVEL}}/g,   level)
    .replace(/{{YEAR}}/g,    String(filter.year))
    .replace(/{{FILTERS}}/g, buildFilterDax(filter, "region"));
  return { connection, query, columnMetadata, vegaLiteSpec };
}

如您所见，它提供了连接、筛选配置（CrossFilter）甚至 Vega 可视化图表的列元数据映射（即 by-region.json 文件）。然后，在底部的查询部分，您可以看到用于构建 DAX 查询的字符串替换。

用于visual specification中：

// by-region.json:
{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "title": "On-time delivery by region",
  "mark": { "type": "bar", "cornerRadiusEnd": 3, "tooltip": true },
  "encoding": {
    "y": {
      "field": "Region",
      "type": "nominal",
      "sort": "-x",
      "axis": { "title": null }
    },
    "x": {
      "field": "OTD",
      "type": "quantitative",
      "axis": { "format": ".0%", "title": "OTD %" }
    }
  }
}

这三个文件共同构成了可用的可视化效果。与 Power BI 报表不同，Power BI 报表每个可视化效果只需要一个 PBIR JSON 文件（您甚至无需查看或了解它），而要创建数据应用，您必须编写多个这样的文件。

然后，当用户打开已部署的应用时，他们会使用自己的 Entra 帐户登录（需要 Fabric SSO），该帐户与他们用于 Power BI 的帐户相同。之后，语义模型中的任何行级安全性都会以与 Power BI 报表相同的方式应用查询。查询返回数据，用户即可在呈现的可视化效果中看到结果。

 

三，开发Data App的简单过程

第一步，检查前提条件，

• 已发布的Power BI Semantic Model
• 对Model有读写权限
• 在Fabric Workspace拥有Contributor或更高的权限
• A Fabric admin who has enabled: “Fabric Apps” tenant setting，“Dataset Execute Queries REST API” tenant setting

第二步，本地创建项目文件

在Fabric Workspace中创建一个App项目，命名为Test，就会得到以下提示：

第三步，使用VS Code和Code Agent进行编辑

使用Code Agent来创建Data App的可视化。

第四步，本地编辑

bun run dev

第五步：发布到Fabric

bunx rayfin up

四，结论

Fabric Apps 本质上是一个Web application，只不过是在 Fabric 中创建和分发 的Web application。Data App是 Fabric App的模板，您可以在其中使用 DAX 查询语义模型，并在交互式体验中可视化或使用数据。您可以在数据应用中创建和分发仪表板，这些仪表板可以更快地生成更高保真度、更灵活的输出。但是，它们也带来了一些新的注意事项和限制，大多数组织在将它们作为 Power BI 报表的补充或替代方案之前，都需要牢记这些事项。

 

原文：

Fabric Apps explained: Visualization as code in a data app dashboard