Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Hinzufügen eingebetteter Rückrufaktionen zur Laufzeit in Amazon Quick Sight
<a name="embedding-custom-actions-callback"></a>

Verwenden Sie eingebettete Rückrufaktionen für Datenpunkte, um engere Integrationen zwischen Ihrer SaaS-Anwendung (Software as a Service) und Ihren eingebetteten Amazon Quick Sight-Dashboards und Grafiken aufzubauen. Entwickler können mit dem Amazon Quick Sight-Embedding-SDK Datenpunkte registrieren, die zurückgerufen werden sollen. Wenn Sie einen Callback für eine Visualisierung registrieren, können Leser einen Datenpunkt auf der Visualisierung auswählen, um einen Callback zu erhalten, der spezifische Daten für den ausgewählten Datenpunkt bereitstellt. Diese Informationen können verwendet werden, um wichtige Datensätze zu kennzeichnen, datenpunktspezifische Rohdaten zu kompilieren, Datensätze zu erfassen und Daten für Backend-Prozesse zu kompilieren.

Eingebettete Callbacks werden für benutzerdefinierte visuelle Inhalte, Textfelder oder Insights nicht unterstützt.

Aktualisieren des Embedding SDK auf Version 2.3.0, bevor Sie mit der Registrierung von Datenpunkten für den Callback beginnen. Weitere Informationen zur Verwendung des Amazon Quick Sight Embedding SDK finden Sie unter [amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk) unter. GitHub

Ein Datenpunkt-Callback kann zur Laufzeit über das Amazon Quick Sight SDK für ein oder mehrere Visuals registriert werden. Sie können auch einen Datenpunkt-Callback für jede Interaktion registrieren, die von der API-Struktur unterstützt wird. [VisualCustomAction](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_VisualCustomAction.html) Dadurch kann der Datenpunkt-Callback initiiert werden, wenn der Benutzer den Datenpunkt auf der Visualisierung auswählt oder wenn der Datenpunkt aus dem Datenpunkt-Kontextmenü ausgewählt wird. Im folgenden Beispiel wird ein Datenpunkt-Callback registriert, den der Leser initiiert, wenn er einen Datenpunkt auf der Visualisierung auswählt.

```
/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);
```

Sie können das vorherige Beispiel auch so konfigurieren, dass ein Datenpunkt-Callback ausgelöst wird, wenn der Benutzer das Kontextmenü öffnet. Um dies mit dem vorherigen Beispiel zu tun, legen Sie den Wert `actionTrigger` auf `ActionTrigger.DATA_POINT_MENU` fest.

Nachdem ein Datenpunkt-Callback registriert wurde, wird er auf die meisten Datenpunkte auf der angegebenen Visualisierung oder den Visualisierungen angewendet. Callbacks gelten nicht für Summen oder Zwischensummen auf Visualisierungen. Wenn ein Leser mit einem Datenpunkt interagiert, wird eine `CALLBACK_OPERATION_INVOKED` Nachricht an das Amazon Quick Sight Embedding SDK gesendet. Diese Nachricht wird vom `onMessage`-Handler erfasst. Die Nachricht enthält die Rohwerte und die Anzeigewerte für die gesamte Datenzeile, die dem ausgewählten Datenpunkt zugeordnet ist. Sie enthält auch die Spaltenmetadaten für alle Spalten in der Visualisierung, in der der Datenpunkt enthalten ist. Es folgt ein Beispiel einer `CALLBACK_OPERATION_INVOKED`-Nachricht:

```
{
   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"
                                }
                            }
                        }
                    }
            ]
        }
   ]
}
```