Custom Visual - TextInput in Visual Format Setting does not save value and reverts to default

[WZorn]

Here's what happens:

When I go to Visualizations->Format Visual->Visual, I have a textbox with default text in it.  If I enter new text and hit enter, nothing happens.  As soon as I click outside of the textbox the default value returns.  Can anyone explain what's happening?

Here is what I think are the relevent sections of code:

From Capabilities.json

	"objects": {
        "redirectURL": {
            "displayName": "Redirect",
            "properties": {
                "value": {
                    "displayName": "Hyperlink",
                    "type": {
                        "text": true
                    }
                }
            }
        }
    }

From Settings.ts

class DataPointCardSettings extends FormattingSettingsCard {
    
    redirectURL = new formattingSettings.TextInput({
        "placeholder": "Hyperlink",
        "name": "Hyperlink",
        "value": "Enter URL Here"
    });

    name: string = "redirection";
    displayName: string = "Redirection";
    slices: Array<FormattingSettingsSlice> = [this.redirectURL];
}

export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    // Create formatting settings model formatting cards
    dataPointCard = new DataPointCardSettings();
    cards = [this.dataPointCard];
}

From visual.ts

import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import { VisualFormattingSettingsModel } from "./settings";
...

export class Visual implements IVisual {
    private formattingSettings: VisualFormattingSettingsModel;
    private formattingSettingsService: FormattingSettingsService;
	...

    constructor(options: VisualConstructorOptions) {
        ...
		
        this.formattingSettingsService = new FormattingSettingsService();
		
		...
	}
		
	public update(options: VisualUpdateOptions) {
		this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
	}

	public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }
}

[dm-p · Accepted solution]

Hi @WZorn,

When setting up your VisualFormattingSettingsModel, your card name (class property) must match the value declared in your capabilities. In your example, the object name in capabilities.json is redirectURL, and it's dataPointCard in your settings.ts. Power BI will not be able to reconcile them and as a result your propoerty won't know where to get stored in the data view.

Here's a mimimal "happy path" example:

capabilities.json

{
    ...
    "objects": {
        "redirection": {
            "properties": {
                "redirectURL": {
                    "type": {
                        "text": true
                    }
                }
            }
        }
    },
    ...
}

Note that I've given the object a name of redirection, as this is my assumed purpose of that particular formatting menu. I've kept the property name as redirectURL, just to help make them distinct in the example code. You can call these whatever you like as long as your associated settings classes and properties match (see below)

settings.ts - RedirectionCardSettings class

class RedirectionCardSettings extends FormattingSettingsCard {
    redirectURL = new formattingSettings.TextInput({
        name: 'redirectURL',
        displayName: 'Redirect URL',
        placeholder: 'Enter URL',
        value: ''
    });

    name: string = 'redirection';
    displayName: string = 'Redirection Settings';
    slices: Array<FormattingSettingsSlice> = [this.redirectURL];
}

I've set up my class that will match the properties in my object from my capabilities. I've named this RedirectionCardSettings, but again, it's not that important.

What is important is that the class property - redirectURL matches the name of the corresponding property declaration from capabilities.json.

settings.ts - VisualFormattingSettingsModel class

export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    redirection = new RedirectionCardSettings();

    cards = [this.redirection];
}

All I've done here is ensure that my class property, redirection matches the corresponding object name from capabilities.json. This will allow Power BI to reconcile your code-based properties and values with those declared in the capabilities (as Power BI only accepts 'known' objects and properties in the data view, which are handled by the capabilities when the visual is loaded). You can add more class properties but if there is no corresponding capability for it, then it will not work as intended.

Testing in the visual

I now get my card and property as expected, e.g.:

I can enter a test value and tab out, or press [Enter], e.g.:

And I can see this in my data view, e.g.:

Hopefully, that should be all you need. Good luck!

Daniel

[WZorn]

EXCELENT!

I see where I was going wrong.  Thank you.  I DID read that the names in the capabilities file and the settings needed to match, but apparently I was lost in the weeds and missed the obvious.