topic Re: Passing access_token to custom visual (dynamically) in Custom Visuals Development Discussion

Passing access_token to custom visual (dynamically)

pieduke88 — Thu, 06 Jun 2024 17:09:00 GMT

trying to pass an access_token to my custom visual.

If I use capabilities and data mapping, I end up with a lot of values because I am also passing some objectids and statuses. The access token value get copied and passed for every objectid value.

Is there another way to pass a single value (the token) to the visual?

I've tried properties but with no luck as the token is dynamic so needs to be pass dynamically to the visual (it refreshes every hour)

Re: Passing access_token to custom visual (dynamically)

dm-p — Fri, 07 Jun 2024 00:05:53 GMT

Hi @pieduke88,

Properties would be your only option for a scalar value. If this is data-bound (and it sounds like it is if it's in your dataset), can you make this a measure and specify that the property use conditional formatting?

Outside of this, the only alternative would be to use the HTTP fetch API to poll/resync your token from within your visual (assuming that (a) it's an option, (b) you haven't tried this already, and (c) your endpoint allows access from null origin iframes).

Regards,

Daniel

Re: Passing access_token to custom visual (dynamically)

pieduke88 — Sat, 08 Jun 2024 11:28:20 GMT

thanks - I can set it to a measure but how would do I the mapping?

Re: Passing access_token to custom visual (dynamically)

pieduke88 — Sun, 09 Jun 2024 12:41:37 GMT

how would that work?

Re: Passing access_token to custom visual (dynamically)

dm-p — Sun, 09 Jun 2024 21:59:03 GMT

Hi @pieduke88,

The documentation shows you how to implement, but if you want a simple example using the simple template visual you get when using pbiviz new:

Add Property and Slice to Settings

First, we'll add a property called testToken to capabilities.json:

{ ... "objects": { "dataPoint": { "properties": { ... "testToken": { "type": { "text": true } } } } }, ... }

In settings.ts, we'll first add our imports, e.g.:

import powerbiVisualsApi from "powerbi-visuals-api"; import VisualEnumerationInstanceKinds = powerbiVisualsApi.VisualEnumerationInstanceKinds;

Add a new property to the DataPointCardSettings class, e.g.:

/** * Data Point Formatting Card */ class DataPointCardSettings extends FormattingSettingsCard { ... // Simple text input testToken = new formattingSettings.TextInput({ name: "testToken", displayName: "Test Token", value: "", placeholder: "Enter or assign token", // conditional formatting specifier instanceKind: VisualEnumerationInstanceKinds.ConstantOrRule }); name: string = "dataPoint"; displayName: string = "Data colors"; slices: Array<FormattingSettingsSlice> = [ ... // existing slices this.testToken, // Ensure that new property is added to the card ]; }

Note that the object for this property needs the include the instanceKind to tell Power BI that it is a conditional formatting property.

Verify Conditional Formatting is Available

Save all changes and ensuring that the visual is reloaded, check the formatting pane. You should now see the card with the conditional formatting option, e.g.:

Use the dialog to browse to and select a suitable text measure from your model and then click OK. Your property will update to show that a measure is now assigned, e.g.:

Accessing the Property

This can now be accessed from your settings, just like any other property. For example, I can add the following to my visual's update method after the settings have been processed:

console.log( "Token value:", this.formattingSettings.dataPointCard.testToken.value );

And I'll see this in my browser console, e.g.:

----

Hopefully this will help you get started. Good luck!

Daniel