Embedding SDK -- issue when adding an action

Question & Answer
,
1

Hello,

I am encountering the following issue when I try to add an action.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addActions')

I am loading the package with the tag in NextJS. I have tried two ways to add the action. Both ways I get the error.

Way 1: Initializing the onMessage property of the content options. (as in docs here).

  const onMessage = async (messageEvent: any) => {
    const { eventName, message } = messageEvent;
    switch (eventName) {
      case "CONTENT_LOADED":
        await embeddedVisual!.addActions([
          {
            CustomActionId: "console-log-action",
            Name: "log to console",
            Trigger: "DATA_POINT_CLICK",
            Status: "ENABLED",
            ActionOperations: [
              {
                CallbackOperation: {
                  EmbeddingMessage: {},
                },
              },
            ],
          },
        ]);
        break;
      case "CALLBACK_OPERATION_INVOKED":
        console.log("callback operation invoked");
        console.log(message);
        break;
    }
  };

Way 2: calling a method on the embedded visual.

    embeddedVisual.setActions([
      {
        Name: "test click action",
        CustomActionId: `test-click-action`,
        Status: "ENABLED",
        Trigger: "DATA_POINT_CLICK", // or 'DATA_POINT_MENU'
        ActionOperations: [
          {
            CallbackOperation: {
              EmbeddingMessage: {},
            },
          },
        ],
      },
    ]);
  };

I have also tried both of these with the package loaded through node_modules/package.json.
amazon-quicksight-embedding-sdk@2.8.0.

2

Hello @tct1, welcome to the QuickSight community!

My immediate thought when viewing your initial error is that this is not a QuickSight related error, but rather a JavaScript/TypeScript error. You are referencing embeddedVisual and dot notating into addActions. Where is your embeddedVisual reference coming from?

Also, a side note, I would recommend ordering the options in the same way that they are ordered in the SDK documentation. It should be Name, CustomActionId, then Status.

If you can provide some more information about where embeddedVisual is coming from, we can try and resolve the error. Thank you!

3

Hi, okay.

Let me switch gears slightly, in the interest of possibly finding at least one working path, and then let’s circle back to the cases I have documented above, if we need to.

You’re probably right that there may be some TypeScript/NextJS difficulty here. What I have done is to put the invocation of addActions in a useEffect hook, and then check that the variable is defined before proceeding.

WIth this, I get errors very similar to what are described in here and here.

Here’s the code:

  useEffect(() => {
    if (embeddedVisual) {
    console.log('running effect for embedded visual')
    console.log(embeddedVisual)
    embeddedVisual.setActions([
      {
        Name: "test click action",
        CustomActionId: `test-click-action`,
        Status: "ENABLED",
        Trigger: "DATA_POINT_CLICK", // or 'DATA_POINT_MENU'
        ActionOperations: [
          {
            CallbackOperation: {
              EmbeddingMessage: {},
            },
          },
        ],
      },
    ]);
  }}, [embeddedVisual]);

embeddedVisual is set like this:

  useEffect(() => {
    if (embeddingContext) {
      embed();
    }
  }, [embeddingContext]);

  const embed = async () => {
    const frame_options = {
      url: dashboardUrl,
      container: "#mytest",
      height: "300px",
      width: "900px",
    };

    const content_options = {
      // onMessage: onMessage,
    };

    const newEmbeddedVisual = await embeddingContext!.embedVisual(
      frame_options,
      content_options,
    );

    // console.log("embedded");

    console.log(newEmbeddedVisual)
    await setEmbeddedVisual(newEmbeddedVisual);
    
    console.log(newEmbeddedVisual)
    // console.log(embeddedVisual)
  };

image

2 Likes
4

Hello @tct1, I have a few thoughts on the issue you are facing. First of all, it may be beneficial to bring up this issue on the Discussions tab or in the Issues tab of the SDK Github. There you might be able to receive a little more guidance on this issue as I haven’t added visual actions this way.

Another thing I noticed in the documentation for the addActions functionality is that it mentions using this with an existing action:

“This method appends the new actions provided in the request to the existing actions of the visual”

Is there currently an action on the visual that you are trying to embed? If not, that may be a road block for this functionality.

Let me know if this helps!

2 Likes
5

Hello @tct1, did my last response help you resolve the issue you are facing in QuickSight? If so, please mark my reply as the solution. Otherwise, let us know what other ways you have tried to debug or fix this error and we can help guide you further.

If we do not hear back from you in 3 days, I will archive this topic. Thank you!