Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
WZorn
Helper II
Helper II

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

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?

 

WZorn_0-1682614489763.png

 

 

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);
    }
}

 

 

 

 

 

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

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.:

 

dmp_0-1682657309576.png

 

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

 

dmp_1-1682657449353.png

 

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

 

dmp_2-1682657502470.png

 

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

 

Daniel

 





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

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.:

 

dmp_0-1682657309576.png

 

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

 

dmp_1-1682657449353.png

 

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

 

dmp_2-1682657502470.png

 

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

 

Daniel

 





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




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.

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors