Enhance Dropdown components to support localization (#27)

* Enhance Dropdown components to support localization with new ILocalizedItemMember interface.

* Added null check for container items in FormattingSettingsService to prevent errors when items are undefined or null.

* Fixed type and added export of interfaces

* Typo

* Removed redundant type assertations and updated changelog

Author: AleksSavelev

CHANGELOG.md

@@ -1,3 +1,9 @@
+
+## 6.1.0
+* `ItemDropdown` now supports new interface `ILocalizedItemMember` for localization of dropdown items.
+* `ItemDropdown` got new method `setValue(value: powerbi.EnumMemberValue, localizationManager?: powerbi.extensibility.ILocalizationManager)` to set value by unique enum member value.
+* Fixed empty groups exception
+
 ## 6.0.4
 * Fix AutoDropDown issue
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-utils-formattingmodel",
-  "version": "6.0.4",
+  "version": "6.1.0",
   "description": "",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -14,12 +14,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "powerbi-visuals-api": "^5.9.0"
+    "powerbi-visuals-api": "^5.11.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-powerbi-visuals": "^0.8.1"
   }
 }

package.json

@@ -5,7 +5,7 @@
 
 import powerbi from "powerbi-visuals-api";
 
-import { IFormattingSettingsSlice } from "./FormattingSettingsInterfaces";
+import { IFormattingSettingsSlice, ILocalizedItemMember } from "./FormattingSettingsInterfaces";
 import * as FormattingSettingsParser from "./utils/FormattingSettingsUtils";
 
 import data = powerbi.data;
@@ -126,9 +126,16 @@ export abstract class SimpleSlice<T = any> extends NamedEntity implements IForma
     }
     // eslint-disable-next-line
     getFormattingComponent?(objectName: string, localizationManager?: powerbi.extensibility.ILocalizationManager): visuals.SimpleComponentBase<any> {
+        let value: T | ILocalizedItemMember = this.value as ILocalizedItemMember;
+        if (value.displayNameKey) {
+            value = {
+                displayName: localizationManager?.getDisplayName(value.displayNameKey),
+                value: value.value
+            } as T;
+        }
         return {
             descriptor: FormattingSettingsParser.getDescriptor(objectName, this),
-            value: this.value,
+            value: value,
         }
     }
 
@@ -235,21 +242,35 @@ export class DatePicker extends SimpleSlice<Date> {
     }
 }
 
-export class ItemDropdown extends SimpleSlice<powerbi.IEnumMember> {
-    items: powerbi.IEnumMember[];
+export class ItemDropdown extends SimpleSlice<powerbi.IEnumMember | ILocalizedItemMember> {
+    items: powerbi.IEnumMember[] | ILocalizedItemMember[];
 
     type?= visuals.FormattingComponent.Dropdown;
 
     constructor(object: ItemDropdown) {
         super(object);
     }
 
-    getFormattingComponent?(objectName: string): visuals.ItemDropdown {
+    getFormattingComponent?(objectName: string, localizationManager?: powerbi.extensibility.ILocalizationManager): visuals.ItemDropdown {
         return {
-            ... super.getFormattingComponent(objectName),
-            items: this.items
+            ... super.getFormattingComponent(objectName, localizationManager),
+            items: this.getFormattingItems(localizationManager, this.items)
         }
     }
+
+    getFormattingItems?(localizationManager?: powerbi.extensibility.ILocalizationManager, items?: powerbi.IEnumMember[] | ILocalizedItemMember[]): powerbi.IEnumMember[] {
+        return items.map((item) => {
+            return {
+                ...item,
+                displayName: (localizationManager && item.displayNameKey) ? localizationManager.getDisplayName(item.displayNameKey) : item.displayName
+            }
+        })
+    }
+
+    setValue?(value: powerbi.EnumMemberValue, localizationManager?: powerbi.extensibility.ILocalizationManager) {
+        const newValue = this.getFormattingItems(localizationManager, this.items).find((item) => item.value === value);
+        this.value = newValue ? newValue : this.items[0];
+    }
 }
 
 export class AutoDropdown extends SimpleSlice<powerbi.EnumMemberValue> {

src/FormattingSettingsComponents.ts

@@ -65,3 +65,8 @@ export interface IBuildFormattingSlicesParams {
     sliceNames: { [name: string]: number; },
     formattingSlices: visuals.FormattingSlice[]
 }
+
+export interface ILocalizedItemMember{
+    displayNameKey: string;
+    value: powerbi.EnumMemberValue;
+}

src/FormattingSettingsInterfaces.ts

@@ -29,7 +29,7 @@ export class FormattingSettingsService implements IFormattingSettingsService {
                 if (card instanceof CompositeCard) card.topLevelSlice?.setPropertiesValues(dataViewObjects, card.name);
 
                 const cardGroupInstances = <CardGroupEntity[]>(card instanceof SimpleCard ? [ card ] : card.groups);
-                cardGroupInstances.forEach((cardGroupInstance: CardGroupEntity) => {
+                cardGroupInstances?.forEach((cardGroupInstance: CardGroupEntity) => {
                     // Set current top level toggle value
                     cardGroupInstance.topLevelSlice?.setPropertiesValues(dataViewObjects, card.name);
                     cardGroupInstance?.slices?.forEach((slice: Slice) => {
@@ -83,8 +83,7 @@ export class FormattingSettingsService implements IFormattingSettingsService {
                 const cardGroupInstances = <CardGroupEntity[]>(isSimpleCard ? 
                     [ card ].filter(({visible = true}) => visible) : 
                     card.groups.filter(({visible = true}) => visible));
-                cardGroupInstances
-                    .forEach((cardGroupInstance: CardGroupEntity) => {
+                cardGroupInstances?.forEach((cardGroupInstance: CardGroupEntity) => {
                         const groupUid = cardGroupInstance.name + "-group";
 
                         // Build formatting group for each group
@@ -121,6 +120,9 @@ export class FormattingSettingsService implements IFormattingSettingsService {
                             }
 
                             container.containerItems.forEach((containerItem: formattingSettings.ContainerItem) => {
+                                if(!containerItem) { // This is to prevent error when container item is null or undefined
+                                    return;
+                                }
                                 // Build formatting container item object
                                 const containerIemName = containerItem.displayNameKey ? containerItem.displayNameKey : containerItem.displayName;
                                 const containerItemUid: string = containerUid + containerIemName;
@@ -193,7 +195,7 @@ export class FormattingSettingsService implements IFormattingSettingsService {
         const cardGroupInstances = <CardGroupEntity[]>(card instanceof SimpleCard ? 
             [ card ].filter(({visible = true}) => visible) : 
             card.groups.filter(({visible = true}) => visible));
-        cardGroupInstances.forEach((cardGroupInstance: CardGroupEntity) => {
+        cardGroupInstances?.forEach((cardGroupInstance: CardGroupEntity) => {
             cardSlicesDefaultDescriptors = this.getSlicesRevertToDefaultDescriptor(card.name, cardGroupInstance.slices, sliceNames, cardGroupInstance.topLevelSlice);
 
             cardGroupInstance.container?.containerItems?.forEach((containerItem: formattingSettings.ContainerItem) => {

src/FormattingSettingsService.ts

@@ -1,3 +1,4 @@
 import * as formattingSettings from "./FormattingSettingsComponents"
 import FormattingSettingsService from "./FormattingSettingsService"
-export { formattingSettings, FormattingSettingsService }
+import * as formattingSettingsInterfaces from "./FormattingSettingsInterfaces"
+export { formattingSettings, FormattingSettingsService, formattingSettingsInterfaces }