Forum Discussion

MikeAinOz's avatar
MikeAinOz
Icon for Helper V rankHelper V
8 years ago
Solved

Text property for a custom visual only takes one character

HI There, I'm trying to add a text property to my custom visual. It is not working correctly and only allows the entry of one character and then rests the field to default.   I have defined an obje...
  • MikeAinOz's avatar
    8 years ago

    After taking a break from this problem, I came back with a fresher mind and reviewed what I had done. It seems the parse was not returning the value from the properties pane. I checked my capabilities. json and settings.ts to ensure that they  were aligned, thet weren't so I fixed that.

    capabilities.json
    
        "url":{
                "displayName": "Url",
                "properties" : {
                    "targetUrl":{
                        "displayName": "Target URL",
                            "type": {
                            "text": true
                            }
                        }
                    }
                }
    
    settings.ts
    
       export class VisualSettings extends DataViewObjectsParser {
          public dataPoint: dataPointSettings = new dataPointSettings();
          public url: postUrlSettings = new postUrlSettings();
          }
    ...
       export class postUrlSettings {
          // Target Url
          public targetUrl: string = "https://";
        }
    
    
    

    The most important thing here is that the object name "url" and property name "targetUrl" have the same names, in a case-sensitive fashion.

     

    Next I fixed the visual.ts in this way:

     public update(options: VisualUpdateOptions) {
                this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
                console.log('Visual update', options);
                if (typeof this.textNode !== "undefined") {
                    this.textNode.textContent = (this.updateCount++).toString();
                }
            }
    
            private static parseSettings(dataView: DataView): VisualSettings {
                return VisualSettings.parse(dataView) as VisualSettings;
            }
    
            /** 
             * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the 
             * objects and properties you want to expose to the users in the property pane.
             * 
             */
            public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
                return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
            }

    This uses API 1.13.0, the important bit is that the parse in Update brings the values of the settings back from the dataview into this.settings and then enumerateObjectInstances take the value in this.settings and puts them into the dataview for display in the pane. This is all enabled by the DataViewObjectsParser. The key lightbulb moment was that the Update and enumerateObjectInstances methods are triggered for each change/keystroke in the properties pane.

     

    Problem solved, but any further contributions would be welcomed E. & O.E.