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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
MikeAinOz
Helper III
Helper III

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

 FormatPaneText.gif

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?

1 ACCEPTED SOLUTION
MikeAinOz
Helper III
Helper III

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.

 

 

View solution in original post

7 REPLIES 7
MikeAinOz
Helper III
Helper III

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.

 

 

And then satisfied that I had resolved the issue it appeared again. and I noticed that I had the message:

AI: StringValueTooLong message:"string value is too long. It has been truncated to 1024 characters." props:"{value:TypeError: Unable to get property 'resolve' of undefined or null reference\n at i.prototype.enumerateObjectRepetitionAsync (https://app.powerbi.com/13.0.6700.191/scripts/powerbiportal.common.bundle.min.js:68:9323)\n at r.prototype.enumerateObjectRepetitionAsync (https://app.powerbi.com/13.0.6700.191/scripts/powerbiportal.common.bundle.min.js:65:26319)\n at Anonymous function (https://app.powerbi.com/13.0.6700.191/scripts/powerbiportal.common.bundle.min.js:66:1461)\n at t.prototype.executeSafely (https://app.powerbi.com/13.0.6700.191/scripts/powerbiportal.common.bundle.min.js:66:2079)\n at t.prototype.enumerateObjectRepetitionAsync (https://app.powerbi.com/13.0.6700.191/scripts/powerbiportal.common.bundle.min.js:66:1356)\n at r (https://app.powerbi.com/13.0.6700.191/scripts/powerbiportal.explore.bundle.min.js:8:25543)\n at e.prototype.createBuckets (https://app.powerbi.com/13.0.6700.

 

Which left me a little confused, until I put some fields in measure and category, and everything worked again. Which then had me wonderng how much this had to do with the original issue! 

v-viig
Community Champion
Community Champion

You can ignore this exception since it comes from Power BI core.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Easy for you to say Ignat! I know it's not caused by my code directly, but if I ignore it my functionality is affected

v-viig
Community Champion
Community Champion

How does it affect functionality? We see the same exceptions in other visuals.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi Ignat, I was under the impression that when I was getting that message my property pane was not responding properly, getting the one character issue. I'm not getting the error now and it's working fine. If I get the chance I'll experiment. Thanks for your interest 🙂

v-viig
Community Champion
Community Champion

Strange issue...

 

Let me know If you face it again.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

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