Forum Discussion

WZorn's avatar
WZorn
Helper III
3 years ago
Solved

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...
  • dm-p's avatar
    3 years ago

    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