LocalStorage V2 always returning as undefined

[hugofernandes]

I'm trying to develop an custom visual, and use the LocalStorage API, but when I try to define it in this.host.strageV2Service, it always return as undefined.

Is it active in admin panel? Yes.

Is added in the cappabilities.json? Yes.

Code i'm trying to run:

"use strict";

import powerbi from "powerbi-visuals-api";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import "./../style/visual.less";

import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import IVisualLocalStorageV2Service = powerbi.extensibility.IVisualLocalStorageV2Service; 
import StorageV2ResultInfo = powerbi.extensibility.StorageV2ResultInfo; 
import PrivilegeStatus = powerbi.PrivilegeStatus; 
import ILocalVisualStorageService = powerbi.extensibility.ILocalVisualStorageService;


import { VisualFormattingSettingsModel } from "./settings";

export class Visual implements IVisual {
    private target: HTMLElement;
    private textNode: Text;
    private host: powerbi.extensibility.visual.IVisualHost;
    private formattingSettings: VisualFormattingSettingsModel;
    private formattingSettingsService: FormattingSettingsService;
    private filters: any[] = [];
    private messages: string = "";
    
    private storageV2Service: IVisualLocalStorageV2Service; 
    private storage: ILocalVisualStorageService;
    private storageName: string = "testePbi";
    private valueStorage: string = "";

    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        this.storageV2Service = this.host.storageV2Service;
        console.log("constructor", this.storageV2Service); // always undefined
    }

    private handleIframeOnload() {
        const iframe = this.target.querySelector("iframe");
        if (iframe?.contentWindow) {
            iframe.contentWindow.postMessage({
                type: "FILTER_UPDATE",
                filters: this.filters
            }, "*");
        }
    }

    public update(options: VisualUpdateOptions) {
        if (!this.storageV2Service) {
            this.storageV2Service = this.host.storageV2Service;
            console.log("update", this.storageV2Service); // always undefined
        }
    }

    /**
     * Returns properties pane formatting model content hierarchies, properties and latest formatting values, Then populate properties pane.
     * This method is called once every time we open properties pane or when the user edit any format property. 
     */
    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }
}

My capabilities.json:

{
    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],
    "objects": {
        "dataPoint": {
            "properties": {
                "defaultColor": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "showAllDataPoints": {
                    "type": {
                        "bool": true
                    }
                },
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "fillRule": {
                    "type": {
                        "fill": {}
                    }
                },
                 "fontSize": {
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                }
            }
        }
    },
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    },
                    "dataReductionAlgorithm": {
                        "top": {}
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        }
                    ]
                }
            }
        }
    ],
    "privileges": [
        {
            "name": "WebAccess",
            "essential": true,
            "parameters": [
                "http://localhost:3000",
                "http://127.0.0.1:5500",
                "http://localhost:5500",
                "http://localhost:5173"
            ]
        },
        {
            "name": "LocalStorage",
            "essential": true
        }
    ]
}

[hugofernandes]

Hey, @DataNinja777 ,

If i add the "StorageV2" instead of "LocalStorage" returns the error: 

 error  should be equal to one of the allowed values .privileges[2].name
 error  Invalid capabilities

The error itself was the package version, that was using the 5.3.0 instead of the more recent that has this api implemented.

Thanks for recommending the best practices and sending a base code!

Will adjust my code to follow it!

[Natalie_iTalent]

Hello @hugofernandes, the comment you responded to has been removed.  I'm glad you were able to find a solution to your question.

Best,

Natalie H.

Community Manager 

[hugofernandes]

Upgrading the version worked, thanks!!!

I didn't pay attention to the release date of the api, and in the documentation wasn't mentioning anything about it either, thanks!!!

[dm-p]

It's a huge misstep in the documentation, as far as I'm concerned, as it tripped me up as well to the point where I was convinced it was broken and I was going to recommend you create a support issue 😅

Glad you're up and running though!

[dm-p · Accepted solution]

Hi @hugofernandes,

I replicated your setup using a new visual, and it looks fine in terms of how you're trying to access the API, but I had the same issues as you. This is weird, as I have built visuals for people using this API, so I know it works, but I dug further and found what is hopefully the same root cause as will be for you.

Check your pbiviz.json, under apiVersion. If you've set up a brand new visual using the tools and haven't changed this, the tools set this to 5.3.0 by default, e.g.:

{
    "visual": {
        "name": "storageTest",
        "displayName": "storageTest",
        "guid": "storageTestD056CAC136254AB789825C03790B59FA",
        "visualClassName": "Visual",
        "version": "1.0.0.0",
        "description": "",
        "supportUrl": "",
        "gitHubUrl": ""
    },
    "apiVersion": "5.3.0",    // <------ THIS RIGHT HERE
    "author": {
        "name": "",
        "email": ""
    },
    "assets": {
        "icon": "assets/icon.png"
    },
    "externalJS": null,
    "style": "style/visual.less",
    "capabilities": "capabilities.json",
    "dependencies": null,
    "stringResources": [],
    "version": "1.0.0.0"
}

If you try to access the V2 local storage API with this version, it will return as undefined, because it wasn't introduced until 5.8.0.

If you set your apiVersion to "5.8.0" or higher (I used 5.9.1), stop your server and re-run the start task, the tools will install the relevant version of powerbi-visuals-api for you, e.g.:

When you re-run this will now show in the console as defined, e.g.:

You should then be able to continue to use as normal.

Good luck!

Daniel