javascriptamazon-web-servicesaxiosamazon-quicksightquicksight-embedding

How to include bookmarks in AWS QuickSight embedded dashboards?


I’m currently trying to get bookmarks showing in an embedded QuickSight dashboard per Amazon QuickSight now supports State Persistence and Bookmarks for embedded dashboards. I’ve been stumped on it for several days, however.

My steps thus far have been to try to adapt the “Request Syntax” from the GenerateEmbedUrlForRegisteredUser article in the above link. We use Axios for our API call to get the QuickSight dashboards, so I’ve tried adapting it into the params for that. The adjustments I've made to the params don't seem to have had an effect on our embedded dashboards, however.

Any advice for getting bookmarks to show in embedded QuickSight dashboards using an Axios API call? Here's how we've tried to thus far:

import Axios from "axios";
import { v4 as uuidv4 } from "uuid";

const uuid = uuidv4();

export async function syncQSretrieveDashboards(
  userEmailAddress,
  groupsArr,
  accessToken
) {
  try {
    const headers = {
      Authorization: accessToken,
    };
    const params = {
      user_email: userEmailAddress,
      // vvvvvvvv this is new
      ExperienceConfiguration: {
        Dashboard: {
          FeatureConfigurations: {
            Bookmarks: {
              Enabled: true
            },
            StatePersistence: {
              Enabled: true
            }
          },
          InitialDashboardId: ""//string
        },
        DashboardVisual: {
          InitialDashboardVisualId: {
            DashboardId: "",//string,
            SheetId: "",//string,
            VisualId: "",//string
          }
        },
        QSearchBar: {
          InitialTopicId: "",//string
        },
        QuickSightConsole: {
          FeatureConfigurations: {
            StatePersistence: {
              Enabled: true
            }
          },
          InitialPath: "",//string
        }
      },
//      SessionLifetimeInMinutes: number,
//      UserArn: "",//string
      // ^^^^^^^^ this is new
    };
    const quicksightAPIResponse = await new Axios.post(
      process.env.REACT_APP_POST_DASHBOARDS,
      JSON.stringify({ correlationId: uuid }),
      {
        headers,
        params,
      }
    );
    console.log("Api", quicksightAPIResponse)
    return quicksightAPIResponse;
  } catch (e) {
    console.log(e)
  }
}

export async function retrieveDashboards(userEmailAddress, accessToken) {
  try {
    const headers = {
      Authorization: accessToken,
    };
    const params = {
      user_email: userEmailAddress,
      correlationId: uuid,
      // vvvvvvvv this is new
      ExperienceConfiguration: {
        Dashboard: {
          FeatureConfigurations: {
            Bookmarks: {
              Enabled: true
            },
            StatePersistence: {
              Enabled: true
            }
          },
          InitialDashboardId: ""//string
        },
        DashboardVisual: {
          InitialDashboardVisualId: {
            DashboardId: "",//string,
            SheetId: "",//string,
            VisualId: "",//string
          }
        },
        QSearchBar: {
          InitialTopicId: "",//string
        },
        QuickSightConsole: {
          FeatureConfigurations: {
            StatePersistence: {
              Enabled: true
            }
          },
          InitialPath: "",//string
        }
      },
//      SessionLifetimeInMinutes: number,
//      UserArn: "",//string
      // ^^^^^^^^ this is new
    };
    const quicksightAPIResponse = await new Axios.get(
      process.env.REACT_APP_GET_DASHBOARDS,
      {
        headers,
        params,
      }
    );
    console.log(" [QS API] [GET] RESPONSE: ", quicksightAPIResponse);
    return quicksightAPIResponse;
  } catch (e) {
    console.log(e);
  }
}

Solution

  • I got it working, see https://community.amazonquicksight.com/t/bookmarks-not-showing-in-embedded-quicksight-dashboards/16704 for details.