Forum Discussion

MikeAinOz's avatar
MikeAinOz
Helper 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 object in capabilities.json

 "objects": {
        "url":{
            "displayName": "Post Url",
            "properties" : {
                "urlPostHere":{
                    "displayName": "URL Post Here",
                    "type": {
                        "text": true
                    }
                }
            }
        }
    },

This is my settings.ts

module powerbi.extensibility.visual {
    "use strict";
    import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser;

    export class VisualSettings extends DataViewObjectsParser {
        public postUrl: postUrlSettings = new postUrlSettings();
      }
    export class postUrlSettings {
        // Post Url
        public url: string ;
      }
}

I've updated enumerate object Instances

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
           // return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
           let objectName: string = options.objectName;
           let objectEnumeration: VisualObjectInstance[] = [];

           switch( objectName ) {
           case 'url':
               objectEnumeration.push({
                   objectName: objectName,
                   properties: {
                      urlPostHere: this.settings.postUrl.url
                   },
                   selector: null
               });
               break;
           };
           
           return objectEnumeration;
        }

in the update method I have parsed the settings as per the default code:

          this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);

 

I figure it's just resetting to the default, I can see the update counter run for each letter typed in. What am I missing here?

  • MikeAinOz's avatar
    MikeAinOz
    7 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.

     

     

7 Replies

  • MikeAinOz's avatar
    MikeAinOz
    Helper V
    7 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.