Embedding superset application in Angular Application

info

This is second part of embedding. Before you start writing code for the application you have to configure superset to be embedded. First part can be found Setting up superset to be embedded in applications

Tutorial to follow along

Embedding superset into Angular Application

Create service in angular using following command
```
ng g s superset-embed
```
Once service is created run following command to install dependencies npm install --save @superset-ui/embedded-sdk

Our environment is ready lets begin coding. You can use following code. Please make sure you divide following function into two. One part till you get guest token should be in backend and you should not add creds in here. So whenever you call backend it will return guest token with all filters, RLS pre implemented.

private supersetUrl = 'http://SUPERSET_IP_ADDRESS'
private supersetApiUrl = `${this.supersetUrl}/api/v1/security`
private dashboardId = "YOUR_DASHBOARD_EMBEDDING_ID"


getToken() {
    //calling login to get access token
    const body = {
    "password": "YOUR_PASSWORD_OF_USER_WITH_REPORT_N_EMBEDDING_PERMISSION",
    "provider": "db",
    "refresh": true,
    "username": "YOUR_USERNAME_OF_USER_WITH_REPORT_N_EMBEDDING_PERMISSION"
    };

    const headers = new HttpHeaders({
    "Content-Type": "application/json"
    });

    return this.http.post(`${this.supersetApiUrl}/login`, body, { headers }).pipe(
    catchError((error) => {
        console.error(error);
        return throwError(error);
    }),
    switchMap((accessToken: any) => {
        const body = {
        "resources": [
            {
            "type": "dashboard",
            "id": this.dashboardId,
            }
        ],
        "rls":[],
        "user": {
            "username": "report-viewer",
            "first_name": "report-viewer",
            "last_name": "report-viewer",
        }
        };

        const acc = accessToken["access_token"]; 
        const headers = new HttpHeaders({
        "Content-Type": "application/json",
        "Authorization": `Bearer ${acc}`,
        });

        return this.http.post<any>(`${this.supersetApiUrl}/guest_token/`, body, { headers });
    }));
}

    // Above part should be implemented in backend and should only be called here to get guest token.

embedDashboard() {
    return new Observable((observer) => {
    this.getToken().subscribe(
        (token) => {
        embedDashboard({
            id: this.dashboardId,
            supersetDomain: this.supersetUrl,
            mountPoint: document.getElementById('superset_embedding_div_class')!,
            fetchGuestToken: () => token["token"],
            dashboardUiConfig: {
            hideTitle: true,
            hideChartControls: true,
            hideTab: true,
            filters: {
                visible: false,
                expanded: false
            },
            urlParams: {
                standalone: "1",
                show_filters: "0",
                show_native_filters: "0"

            }
            },
        });
        observer.next();
        observer.complete();
        },
        (error) => {
        observer.error(error);
        }
    );
    });
}

copy component file only (constructor and imports) from [superset-component.ts]("Superset/Embedding Superset/With Authentication/assets/superset-component.ts")
Copy HTML code to following html file of component
```
<div id="superset_embedding_div_class"></div>
```

Copy following css into css file

iframe{
    min-height: 100vh;
    min-height: 100vw;
}

warning

Admin creds should not be used in Angular code directly! You should ideally create service say lambda where your creds are stored and then according to the user you should create Guest user Token using rls if needed.

Tutorial to follow along​

Embedding superset into Angular Application​

Tutorial to follow along

Embedding superset into Angular Application