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