本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 将自定义 Amazon Quick Sight 资产嵌入您的应用程序中
<a name="customize-and-personalize-embedded-analytics"></a>

您可以使用 Amazon Quick Sight 嵌入式分析将自定义 Amazon Quick Sight 资产嵌入到您的应用程序中，这些资产专为满足您的业务需求而量身定制。对于嵌入式仪表板和视觉对象，Amazon Quick Sight 作者可以添加筛选器和向下钻取，供读者在浏览仪表板或视觉对象时进行访问。Amazon Quick Sight 开发人员还可以使用 Amazon Quick Sight SDKs 在 SaaS 应用程序和 Amazon Quick Sight 嵌入式资产之间建立更紧密的集成，从而在运行时向仪表板上的视觉对象添加数据点回调操作。

有关 Amazon Quick Sight 的更多信息 SDKs，请参阅 `amazon-quicksight-embedding-sdk` on [GitHub](https://github.com/awslabs/amazon-quicksight-embedding-sdk)或 [NPM](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)。

下面，您可以找到有关如何使用 Amazon Quick Sight SDKs 自定义 Amazon Quick Sight 嵌入式分析的说明。

**Topics**
+ [

# 在 Amazon Quick Sight 中添加运行时嵌入式回调操作
](embedding-custom-actions-callback.md)
+ [

# 在 Amazon Quick Sight 嵌入式控制面板和视觉对象的运行时筛选数据
](embedding-runtime-filtering.md)
+ [

# 自定义 Amazon Quick Sight 嵌入式仪表板和视觉效果的外观
](embedding-runtime-theming.md)
+ [

# 使用 Amazon Quick Sight Embedging SDK 启用指向嵌入式控制面板视图的可共享链接
](embedded-view-sharing.md)

# 在 Amazon Quick Sight 中添加运行时嵌入式回调操作
<a name="embedding-custom-actions-callback"></a>

使用嵌入式数据点回调操作在您的软件即服务 (SaaS) 应用程序与 Amazon Quick Sight 嵌入式仪表板和视觉对象之间建立更紧密的集成。开发人员可以使用 Amazon Quick Sight 嵌入式 SDK 注册要回调的数据点。当您为视觉对象注册回调操作时，读者可以在视觉对象上选择一个数据点，用来接收会针对所选数据点提供数据的回调。此信息可用于标记关键记录、编译针对数据点的原始数据、捕获记录以及为后端进程编译数据。

自定义视觉内容、文本框或见解不支持嵌入式回调。

在开始注册回调数据点之前，请将嵌入开发工具包更新到版本 2.3.0。有关使用 Amazon Quick Sight 嵌入软件开发工具包的更多信息，请参阅[amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk)上的 GitHub。

数据点回调可以在运行时通过 Amazon Quick Sight SDK 注册到一个或多个视觉对象。您还可以向 [VisualCustomAction](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_VisualCustomAction.html)API 结构支持的任何交互注册数据点回调。当用户在视觉对象上选择数据点或从数据点上下文菜单中选择数据点时，此操作允许启动数据点回调。以下示例注册了一个数据点回调，读者在视觉对象上选择数据点时会启动该回调。

```
/const MY_GET_EMBED_URL_ENDPOINT =
  "https://my.api.endpoint.domain/MyGetEmbedUrlApi"; // Sample URL

// The dashboard id to embed
const MY_DASHBOARD_ID = "my-dashboard"; // Sample ID

// The container element in your page that will have the embedded dashboard
const MY_DASHBOARD_CONTAINER = "#experience-container"; // Sample ID

// SOME HELPERS

const ActionTrigger = {
  DATA_POINT_CLICK: "DATA_POINT_CLICK",
  DATA_POINT_MENU: "DATA_POINT_MENU",
};

const ActionStatus = {
  ENABLED: "ENABLED",
  DISABLED: "DISABLED",
};

// This function makes a request to your endpoint to obtain an embed url for a given dashboard id
// The example implementation below assumes the endpoint takes dashboardId as request data
// and returns an object with EmbedUrl property
const myGetEmbedUrl = async (dashboardId) => {
  const apiOptions = {
    dashboardId,
  };
  const apiUrl = new URL(MY_GET_EMBED_URL_ENDPOINT);
  apiUrl.search = new URLSearchParams(apiOptions).toString();
  const apiResponse = await fetch(apiUrl.toString());
  const apiResponseData = await apiResponse.json();
  return apiResponseData.EmbedUrl;
};

// This function constructs a custom action object
const myConstructCustomActionModel = (
  customActionId,
  actionName,
  actionTrigger,
  actionStatus
) => {
  return {
    Name: actionName,
    CustomActionId: customActionId,
    Status: actionStatus,
    Trigger: actionTrigger,
    ActionOperations: [
      {
        CallbackOperation: {
          EmbeddingMessage: {},
        },
      },
    ],
  };
};

// This function adds a custom action on the first visual of first sheet of the embedded dashboard
const myAddVisualActionOnFirstVisualOfFirstSheet = async (
  embeddedDashboard
) => {
  // 1. List the sheets on the dashboard
  const { SheetId } = (await embeddedDashboard.getSheets())[0];
  // If you'd like to add action on the current sheet instead, you can use getSelectedSheetId method
  // const SheetId = await embeddedDashboard.getSelectedSheetId();

  // 2. List the visuals on the specified sheet
  const { VisualId } = (await embeddedDashboard.getSheetVisuals(SheetId))[0];

  // 3. Add the custom action to the visual
  try {
    const customActionId = "custom_action_id"; // Sample ID
    const actionName = "Flag record"; // Sample name
    const actionTrigger = ActionTrigger.DATA_POINT_CLICK; // or ActionTrigger.DATA_POINT_MENU
    const actionStatus = ActionStatus.ENABLED;
    const myCustomAction = myConstructCustomActionModel(
      customActionId,
      actionName,
      actionTrigger,
      actionStatus
    );
    const response = await embeddedDashboard.addVisualActions(
      SheetId,
      VisualId,
      [myCustomAction]
    );
    if (!response.success) {
      console.log("Adding visual action failed", response.errorCode);
    }
  } catch (error) {
    console.log("Adding visual action failed", error);
  }
};

const parseDatapoint = (visualId, datapoint) => {
  datapoint.Columns.forEach((Column, index) => {
    // FIELD | METRIC
    const columnType = Object.keys(Column)[0];

    // STRING | DATE | INTEGER | DECIMAL
    const valueType = Object.keys(Column[columnType])[0];
    const { Column: columnMetadata } = Column[columnType][valueType];

    const value = datapoint.RawValues[index][valueType];
    const formattedValue = datapoint.FormattedValues[index];

    console.log(
      `Column: ${columnMetadata.ColumnName} has a raw value of ${value}
           and formatted value of ${formattedValue.Value} for visual: ${visualId}`
    );
  });
};

// This function is used to start a custom workflow after the end user selects a datapoint
const myCustomDatapointCallbackWorkflow = (callbackData) => {
  const { VisualId, Datapoints } = callbackData;

  parseDatapoint(VisualId, Datapoints);
};

// EMBEDDING THE DASHBOARD

const main = async () => {
  // 1. Get embed url
  let url;
  try {
    url = await myGetEmbedUrl(MY_DASHBOARD_ID);
  } catch (error) {
    console.log("Obtaining an embed url failed");
  }

  if (!url) {
    return;
  }

  // 2. Create embedding context
  const embeddingContext = await createEmbeddingContext();

  // 3. Embed the dashboard
  const embeddedDashboard = await embeddingContext.embedDashboard(
    {
      url,
      container: MY_DASHBOARD_CONTAINER,
      width: "1200px",
      height: "300px",
      resizeHeightOnSizeChangedEvent: true,
    },
    {
      onMessage: async (messageEvent) => {
        const { eventName, message } = messageEvent;
        switch (eventName) {
          case "CONTENT_LOADED": {
            await myAddVisualActionOnFirstVisualOfFirstSheet(embeddedDashboard);
            break;
          }
          case "CALLBACK_OPERATION_INVOKED": {
            myCustomDatapointCallbackWorkflow(message);
            break;
          }
        }
      },
    }
  );
};

main().catch(console.error);
```

您也可以将前面的示例配置为在用户打开上下文菜单时启动数据点回调。要在前面的示例中执行此操作，请将 `actionTrigger` 的值设置为 `ActionTrigger.DATA_POINT_MENU`。

注册数据点回调后，就会应用到指定视觉对象上的大多数数据点。回调不适用于视觉对象的总计或小计。当读者与数据点交互时，会向 Amazon Quick S `CALLBACK_OPERATION_INVOKED` ight 嵌入式 SDK 发送一条消息。此消息由 `onMessage` 处理程序捕获。此消息包含与所选数据点关联的整行数据的原始值和显示值。其中还包含内含数据点的视觉对象中所有列的列元数据。以下是 `CALLBACK_OPERATION_INVOKED` 消息的示例。

```
{
   CustomActionId: "custom_action_id",
   DashboardId: "dashboard_id",
   SheetId: "sheet_id",
   VisualId: "visual_id",
   DataPoints: [
        {
            RawValues: [
                    {
                        String: "Texas" // 1st raw value in row
                    },
                    {
                        Integer: 1000 // 2nd raw value in row
                    }
            ],
            FormattedValues: [
                    {Value: "Texas"}, // 1st formatted value in row
                    {Value: "1,000"} // 2nd formatted value in row
            ],
            Columns: [
                    { // 1st column metadata
                        Dimension: {
                            String: {
                                Column: {
                                    ColumnName: "State",
                                    DatsetIdentifier: "..."
                                }
                            }
                        }
                    },
                    { // 2nd column metadata
                        Measure: {
                            Integer: {
                                Column: {
                                    ColumnName: "Cancelled",
                                    DatsetIdentifier: "..."
                                },
                                AggregationFunction: {
                                    SimpleNumericalAggregation: "SUM"
                                }
                            }
                        }
                    }
            ]
        }
   ]
}
```

# 在 Amazon Quick Sight 嵌入式控制面板和视觉对象的运行时筛选数据
<a name="embedding-runtime-filtering"></a>

您可以在 Amazon Quick Sight 嵌入软件开发工具包中使用筛选方法，在运行时在软件即服务 (SaaS) 应用程序中利用 Amazon Quick Sight 筛选器的强大功能。运行时筛选器允许企业主将其应用程序与嵌入式 Amazon Quick Sight 仪表板和视觉效果集成。为此，请在应用程序中创建自定义筛选条件控件，并根据应用程序中的数据应用筛选条件预设。然后，开发人员可以在运行时为最终用户个性化筛选条件配置。

开发人员可以使用 Amazon Quick Sight Embedding SDK 在嵌入式控制面板上创建、查询、更新和移除 Amazon Quick Sight 筛选条件，或者从应用程序中移除视觉效果。使用[FilterGroup](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_FilterGroup.html)数据模型在您的应用程序中创建 Amazon Quick Sight 筛选对象，并使用筛选方法将其应用于嵌入式仪表板和视觉对象。有关使用 Amazon Quick Sight 嵌入软件开发工具包的更多信息，请参阅[amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk)上的 GitHub。

**先决条件**

在开始之前，请确保您使用的是 Amazon Quick Sight Embedding SDK 版本 2.5.0 或更高版本。

## 术语和概念
<a name="runtime-filtering-terminology"></a>

使用嵌入式运行时筛选时，以下术语可能很有用。
+ *筛选条件组* – 一组单独的筛选条件。位于 `FilterGroup` 内的筛选条件彼此之间进行 OR 运算。中的筛选[FilterGroup](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_FilterGroup.html)器应用于相同的工作表或视觉对象。
+ *筛选条件* - 单个筛选条件。筛选条件可以是类别、数字或日期时间筛选条件类型。有关筛选条件的更多信息，请参阅[筛选条件](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_Filter.html)。

## 设置
<a name="runtime-filtering-setup"></a>

开始之前，请确保您已准备好以下资产和信息。
+ 您想要将 `FilterGroup` 范围限定到的工作表的工作表 ID。这可以通过 Embedding SDK 中的 `getSheets` 方法获取。
+ 您想要筛选的数据集和数据集的列标识符。这可以通过 [DescribeDashboardDefinition](https://docs.amazonaws.cn/APIReference/API_DescribeDashboardDefinition.html)API 操作获得。

  根据您使用的列类型，可以添加到嵌入式资产的筛选条件类型可能会受到限制。有关筛选条件限制的更多信息，请参阅 [Filter](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_Filter.html)。
+ 如果适用，则为要将 `FilterGroup` 范围限定到的视觉对象的视觉对象 ID。这可以使用 Embedding SDK 中的 `getSheetVisuals` 方法获取。

  除了 `getSheetVisuals` 方法之外，您添加的 `FilterGroup` 只能限于当前选定的工作表。

要使用此功能，您必须已经通过 Amazon Quick Sight Embedding SDK 将仪表板或视觉效果嵌入到应用程序中。有关使用 Amazon Quick Sight 嵌入软件开发工具包的更多信息，请参阅[amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk)上的 GitHub。

## SDK 方法接口
<a name="runtime-filtering-sdk-interface"></a>

**控制面板嵌入 getter 方法**

下表介绍了开发人员可以使用的不同控制面板嵌入 getter 方法。


| 方法 | 说明 | 
| --- | --- | 
|  `getFilterGroupsForSheet(sheetId: string) `  |  返回当前限 FilterGroups 定为参数中提供的表单的所有内容。  | 
|  `getFilterGroupsForVisual(sheetId: string, visualId: string)`  |  返回范围限定为参数中提供的视觉对象的所有 `FilterGroups`。  | 

如果参数中提供的工作表不是嵌入式控制面板中当前选定的工作表，则上述方法会返回错误。

**视觉对象嵌入 getter 方法**

下表介绍了开发人员可以使用的不同视觉对象嵌入 getter 方法。


| 方法 | 说明 | 
| --- | --- | 
|  `getFilterGroups()`  |  返回范围当前限定为嵌入式视觉对象的所有 `FilterGroups`。  | 

**Setter 方法**

下表介绍了开发人员可用于控制面板或视觉对象嵌入的不同 setter 方法。


| 方法 | 说明 | 
| --- | --- | 
|  `addFilterGroups(filterGroups: FilterGroup[])`  |  将提供的内容添加并应用**FilterGroups**到嵌入式仪表板或视觉对象。返回 `ResponseMessage` 指示添加是否成功。  | 
|  `updateFilterGroups(filterGroups: FilterGroup[])`  |  更新嵌入式体验上与参数中提供的 `FilterGroup` 包含相同 `FilterGroupId` 的 `FilterGroups`。返回 `ResponseMessage` 指示更新是否成功。  | 
|  `removeFilterGroups(filterGroupsOrIds: FilterGroup[] \| string[])`  |   FilterGroups 从仪表板中移除提供的内容，并返回 a，`ResponseMessage`表示删除尝试是否成功。  | 

提供的 `FilterGroup` 的范围必须限定于当前选定的嵌入式工作表或视觉对象。

# 自定义 Amazon Quick Sight 嵌入式仪表板和视觉效果的外观
<a name="embedding-runtime-theming"></a>

您可以使用 Amazon Quick Sight Embedding SDK（版本 2.5.0 及更高版本）在运行时更改嵌入式 Amazon Quick Sight 仪表板和视觉对象的主题。运行时主题可以更轻松地将软件即服务 (SaaS) 应用程序与 Amazon Quick Sight 嵌入式资产集成。运行时主题允许您将嵌入内容的主题与嵌入 Amazon Quick Sight 资产的父应用程序的主题同步。您还可以使用运行时主题为读者添加自定义选项。主题更改可以在初始化时应用于嵌入式资产，也可以在嵌入式控制面板或视觉对象的整个生命周期内应用。

有关主题的更多信息，请参阅 [使用 Amazon Quick Sight 中的主题](themes-in-quicksight.md)。有关使用 Amazon Quick Sight 嵌入软件开发工具包的更多信息，请参阅[amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk)上的 GitHub。

**先决条件**

在开始之前，请确保您已满足以下先决条件。
+ 你使用的是 Amazon Quick Sight Embedding SDK 版本 2.5.0 或更高版本
+ 访问您想要使用的主题的权限。要在 Amazon Quick Sight 中授予主题的权限，请调用 `UpdateThemePermissions` API 或使用 Amazon Quick Sight 控制台分析编辑器中主题旁边的**共享**图标。

## 术语和概念
<a name="runtime-theming-terminology"></a>

使用嵌入式运行时主题时，以下术语可能很有用。
+ *主题* – 可应用于多个分析和控制面板的设置集合，可更改内容的显示方式。
+ *ThemeConfiguration*— 包含主题所有显示属性的配置对象。
+ *主题覆盖* - 应用于活动主题的 `ThemeConfiguration` 对象，用于覆盖内容显示方式的部分或全部方面。
+ *主题 ARN* — 标识亚马逊 Quick Sight 主题的亚马逊资源名称 (ARN)。以下是自定义主题 ARN 的示例。

  `arn:aws:quicksight:region:account-id:theme/theme-id`

  Amazon Quick Sight 提供的入门主题在其主题 ARN 中没有区域。以下是入门主题 ARN 的示例。

  `arn:aws:quicksight::aws:theme/CLASSIC`

## 设置
<a name="runtime-theming-setup"></a>

确保您已准备好以下信息，以开始使用运行时主题。
+ 您要使用的主题的主题。 ARNs 您可以选择现有主题，也可以创建一个新主题。要获取您的 Amazon Quick Sight 账户 ARNs 中所有主题和主题的列表，请调用 [ListThemes](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_ListThemes.html)API 操作。有关预设 Amazon Quick Sight 主题的信息，请参阅[使用 Amazon Quick 为 Amazon Quick 分析设置默认主题 APIs](customizing-quicksight-default-theme.md)。
+ 如果您使用注册用户嵌入，请确保该用户可以访问您想要使用的主题。

  如果您使用匿名用户嵌入，请将主题 ARNs列表传递给 `GenerateEmbedUrlForAnonymousUser` API 的`AuthorizedResourceArns`参数。匿名用户有权访问 `AuthorizedResourceArns` 参数中列出的任何主题。

## SDK 方法接口
<a name="runtime-theming-sdk-interface"></a>

**Setter 方法**

下表介绍了开发人员可以用于运行时主题的不同 setter 方法。


| 方法 | 说明 | 
| --- | --- | 
|  `setTheme(themeArn: string)`  |  将控制面板或视觉对象的活动主题替换为其他主题。如果应用，则会移除主题覆盖。 如果您无权访问主题或主题不存在，则会返回错误。  | 
|  `setThemeOverride(themeOverride: ThemeConfiguration)`  |  设置动态 `ThemeConfiguration` 以覆盖当前活动主题。这将替换之前设置的主题覆盖。新 `ThemeConfiguration` 中未提供的任何值都将默认为当前活动主题中的值。 如果您提供的 `ThemeConfiguration` 无效，则会返回错误。  | 

## 使用主题初始化嵌入式内容
<a name="runtime-theming-sdk-initialize"></a>

要使用非默认主题初始化嵌入式控制面板或视觉对象，请在 `DashboardContentOptions` 或 `VisualContentOptions` 参数上定义 `themeOptions` 对象，并将 `themeOptions` 中的 `themeArn` 属性设置为所需的主题 ARN。

以下示例使用 `MIDNIGHT` 主题初始化嵌入式控制面板。

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        themeArn: "arn:aws:quicksight::aws:theme/MIDNIGHT"
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

## 使用主题覆盖初始化嵌入式内容
<a name="runtime-theming-runtime-initialize-override"></a>

开发人员可以使用主题覆盖在运行时定义嵌入式控制面板或视觉对象的主题。这允许控制面板或视觉对象从第三方应用程序继承主题，而无需在 Amazon Quick Sight 中预先配置主题。要使用主题覆盖初始化嵌入式控制面板或视觉对象，请在 `DashboardContentOptions` 或 `VisualContentOptions` 参数中的 `themeOptions` 中设置 `themeOverride` 属性。以下示例将控制面板主题的字体从默认字体覆盖为 `Amazon Ember`。

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "themeOverride":{"Typography":{"FontFamilies":[{"FontFamily":"Comic Neue"}]}}
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

## 使用预加载的主题初始化嵌入式内容
<a name="runtime-theming-runtime-initialize-preloaded"></a>

开发人员可以配置一组控制面板主题，以便在初始化时预加载。这对于在不同视图（例如深色和浅色模式）之间快速切换最为有利。嵌入式控制面板或视觉对象最多可使用 5 个预加载的主题进行初始化。要使用预加载的主题，请使用最多 5 个 `themeArns` 的数组在 `DashboardContentOptions` 或 `VisualContentOptions` 中设置 `preloadThemes` 属性。以下示例将 `Midnight` 和 `Rainier` 入门主题预加载到控制面板。

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "preloadThemes": ["arn:aws:quicksight::aws:theme/RAINIER", "arn:aws:quicksight::aws:theme/MIDNIGHT"]
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

# 使用 Amazon Quick Sight Embedging SDK 启用指向嵌入式控制面板视图的可共享链接
<a name="embedded-view-sharing"></a>

Amazon Quick Sight 开发人员可以使用 Amazon Quick Sight Embedding SDK（版本 2.8.0 及更高版本），允许嵌入式仪表板的读者接收和分发指向嵌入式仪表板视图的可共享链接。开发人员可以使用仪表板或控制台嵌入来生成指向其应用程序页面的可共享链接，其中包含使用Amazon Quick Sight嵌入软件开发工具包封装的Amazon Quick Sight参考文献。然后，Amazon Quick Sight Readers 可以将此可共享链接发送给同行。当他们的同行访问共享链接时，他们会被带到包含嵌入式 Amazon Quick Sight 控制面板的应用程序页面。开发人员还可以生成和保存控制面板视图的可共享链接，当使用匿名嵌入时，这些链接可用作 Amazon Quick Sight 匿名读者的书签。

**先决条件**

在开始之前，请确保您使用的是 Amazon Quick Sight Embedding SDK 版本 2.8.0 或更高版本

**Topics**
+ [

# 为 Amazon Quick Sight 嵌入式分析启用`SharedView`功能配置
](embedded-view-sharing-set-up.md)
+ [

# 使用 Amazon Quick Sight `createSharedView` API 创建共享视图
](embedded-view-sharing-sdk-create.md)
+ [

# 使用共享的 Amazon Quick Sight 视图
](embedded-view-sharing-sdk-consume.md)

# 为 Amazon Quick Sight 嵌入式分析启用`SharedView`功能配置
<a name="embedded-view-sharing-set-up"></a>

当您使用 Amazon Quick Sight API 创建嵌入式实例时，请将`FeatureConfigurations`有效负载中的值设置为`true`，如下例所示。`SharedView` `SharedView`覆盖访问嵌入式仪表板的注册用户的`StatePersistence`配置。如果控制面板用户已禁用 `StatePersistence` 并启用 `SharedView`，则其状态将保留。

```
const generateNewEmbedUrl = async () => {
    const generateUrlPayload = {
        experienceConfiguration: {
            QuickSightConsole: {
            FeatureConfigurations: {
                "SharedView": { 
                    "Enabled": true
                 },
            },
        },
    }
    const result: GenerateEmbedUrlResult = await generateEmbedUrlForRegisteredUser(generateUrlPayload);
    return result.url;
};
```

# 使用 Amazon Quick Sight `createSharedView` API 创建共享视图
<a name="embedded-view-sharing-sdk-create"></a>

将 Embedding SDK 更新至版本 2.8.0 或更高版本后，请使用 `createSharedView` API 创建新的共享视图。记录操作返回的 `sharedViewId` 和 `dashboardId`。下面的示例创建了一个新的共享视图。

```
const response = await embeddingFrame.createSharedView();
const sharedViewId = response.message.sharedViewId;
const dashboardId = response.message.dashboardId;
```

仅当用户查看控制面板时才能调用 `createSharedView`。对于特定于控制台的共享视图创建，请先确保用户位于控制面板页面上，然后再启用 `createSharedView` 操作。您可以使用 `PAGE_NAVIGATION` 事件执行此操作，如下例所示。

```
const contentOptions = {
    onMessage: async (messageEvent, metadata) => {
    switch (messageEvent.eventName) {
            case 'CONTENT_LOADED': {
                console.log("Do something when the embedded experience is fully loaded.");
                break;
            }
            case 'ERROR_OCCURRED': {
                console.log("Do something when the embedded experience fails loading.");
                break;
            }
            case 'PAGE_NAVIGATION': {
                setPageType(messageEvent.message.pageType); 
                if (messageEvent.message.pageType === 'DASHBOARD') {
                    setShareEnabled(true);
                    } else {
                    setShareEnabled(false);
                }
                break;
            }
        }
    }
};
```

# 使用共享的 Amazon Quick Sight 视图
<a name="embedded-view-sharing-sdk-consume"></a>

创建新的共享视图后，请使用 Embedding SDK 使其他用户可以使用共享视图。以下示例在 Amazon Quick Sight 中为嵌入式控制面板设置了可使用的共享视图。

------
#### [ With an appended URL ]

将 `sharedViewId` 附加到嵌入式 URL（位于 ` /views/{viewId}` 下），并将此 URL 公开给您的用户。用户可以使用此 URL 导航到该共享视图。

```
const response = await dashboardFrame.createSharedView();
const newEmbedUrl = await generateNewEmbedUrl();
const formattedUrl = new URL(newEmbedUrl);
formattedUrl.pathname = formattedUrl.pathname.concat('/views/' + response.message.sharedViewId);
const baseUrl = formattedUrl.href;
alert("Click to view this QuickSight shared view", baseUrl);
```

------
#### [ With the contentOptions SDK ]

将 `viewId` 传递给 `contentOptions` 以打开具有给定 `viewId` 的体验。

```
const contentOptions = {
    toolbarOptions: {
        ...
    },
    viewId: sharedViewId,
};

const embeddedDashboard = await embeddingContext.embedDashboard(
    {container: containerRef.current},
    contentOptions
);
```

------
#### [ With the InitialPath property ]

```
const shareView = async() => {
    const returnValue = await consoleFrame.createSharedView();
    const {dashboardId, sharedViewId} = returnValue.message;
    const newEmbedUrl = await generateNewEmbedUrl(`/dashboards/${dashboardId}/views/${sharedViewId}`);
    setShareUrl(newEmbedUrl);
};

const generateNewEmbedUrl = async (initialPath) => {
    const generateUrlPayload = {
        experienceConfiguration: {
            QuickSightConsole: {
            InitialPath: initialPath,
            FeatureConfigurations: {
                "SharedView": { 
                    "Enabled": true
                 },
            },
        },
    }
    const result: GenerateEmbedUrlResult = await generateEmbedUrlForRegisteredUser(generateUrlPayload);
    return result.url;
};
```

------