From ee6271eb8b88e01e28d544c51d4ab099e88060a3 Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <nhnkhoa@live.com>
Date: Thu, 8 Feb 2024 21:47:38 +0000
Subject: [PATCH] added language pack support (#96)

* added language pack

* added build process in readme
---
 LookdownComponent/.vscode/settings.json       |   2 +-
 .../Lookdown/ControlManifest.Input.xml        |   7 +-
 .../Lookdown/components/LookdownControl.tsx   |  41 ++--
 LookdownComponent/Lookdown/index.ts           |  14 +-
 .../Lookdown/services/DataverseService.ts     |  45 ++++-
 .../Lookdown/strings/Lookdown.1033.resx       | 140 ++++++++++++++
 .../Lookdown/types/languagePack.ts            |   7 +
 .../PolyLookup/ControlManifest.Input.xml      |   5 +-
 .../components/PolyLookupControl.tsx          |  53 ++++--
 PolyLookupComponent/PolyLookup/index.ts       |  22 ++-
 .../PolyLookup/services/DataverseService.ts   |  38 ++++
 .../PolyLookup/strings/PolyLookup.1033.resx   | 176 ++++++++++++++++++
 .../PolyLookup/types/languagePack.ts          |  16 ++
 PolyLookupComponent/package-lock.json         |  26 ++-
 PolyLookupComponent/package.json              |   4 +-
 README.md                                     |  32 ++++
 solution/src/Other/Solution.xml               |   4 +-
 17 files changed, 583 insertions(+), 49 deletions(-)
 create mode 100644 LookdownComponent/Lookdown/strings/Lookdown.1033.resx
 create mode 100644 LookdownComponent/Lookdown/types/languagePack.ts
 create mode 100644 PolyLookupComponent/PolyLookup/strings/PolyLookup.1033.resx
 create mode 100644 PolyLookupComponent/PolyLookup/types/languagePack.ts

diff --git a/LookdownComponent/.vscode/settings.json b/LookdownComponent/.vscode/settings.json
index e4ec09c..59bacff 100644
--- a/LookdownComponent/.vscode/settings.json
+++ b/LookdownComponent/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll": true
+        "source.fixAll": "explicit"
     }
 }
\ No newline at end of file
diff --git a/LookdownComponent/Lookdown/ControlManifest.Input.xml b/LookdownComponent/Lookdown/ControlManifest.Input.xml
index 80ad061..dbf383a 100644
--- a/LookdownComponent/Lookdown/ControlManifest.Input.xml
+++ b/LookdownComponent/Lookdown/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="DCEPCF" constructor="Lookdown" version="1.1.0" display-name-key="Lookdown v1.1.0" description-key="Display a lookup control as a dropdown" control-type="virtual" >
+  <control namespace="DCEPCF" constructor="Lookdown" version="1.2.0" display-name-key="Lookdown v1.2.0" description-key="Display a lookup control as a dropdown" control-type="virtual" >
     <external-service-usage enabled="false">
       <!--UNCOMMENT TO ADD EXTERNAL DOMAINS
       <domain></domain>
@@ -9,7 +9,7 @@
     </external-service-usage>
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
     <property name="lookupField" display-name-key="Lookup Field" description-key="The lookup field that the component is bound to." of-type="Lookup.Simple" usage="bound" required="true" />
-    <property name="customFilter" display-name-key="Custom Filter" description-key="Additional filter to be added to the Lookup view. Custom filter should be serialized as a FetchXML <filter> node." of-type-group="text" usage="input" required="false" />
+    <property name="customFilter" display-name-key="Custom Filter" description-key="Additional filter to be added to the Lookup view. Custom filter should be serialized as a FetchXML filter node." of-type-group="text" usage="input" required="false" />
     <property name="groupByField" display-name-key="Group By Field" description-key="Group the options dropdown by this field." of-type="SingleLine.Text" usage="input" required="false" />
     <property name="optionTemplate" display-name-key="Option Display Template" description-key="Dynamic template to display option text." of-type="SingleLine.Text" usage="input" required="false" />
     <property name="selectedItemTemplate" display-name-key="Selected Option Display Template" description-key="Dynamic template to display selected option text. Default to option text if not provided." of-type="SingleLine.Text" usage="input" required="false" />
@@ -35,6 +35,7 @@
       <value name="no" display-name-key="No">0</value>
       <value name="yes" display-name-key="Yes">1</value>
     </property>
+    <property name="languagePackPath" display-name-key="Language Pack Path" description-key="Path to a resx web resource, relative to the environment url (eg. /webresources/new_/resx/Lookdown.1033.resx), to be used as Language Pack. Default to English if not provided." of-type="SingleLine.Text" usage="input" required="false" />
     <type-group name="text">
       <type>SingleLine.Text</type>
       <type>SingleLine.TextArea</type>
@@ -46,8 +47,8 @@
       <platform-library name="Fluent" version="8.29.0" />
       <!-- UNCOMMENT TO ADD MORE RESOURCES
       <css path="css/Lookdown.css" order="1" />
-      <resx path="strings/Lookdown.1033.resx" version="1.0.0" />
       -->
+      <resx path="strings/Lookdown.1033.resx" version="1.0.0" />
     </resources>
     <!-- UNCOMMENT TO ENABLE THE SPECIFIED API
     <feature-usage>
diff --git a/LookdownComponent/Lookdown/components/LookdownControl.tsx b/LookdownComponent/Lookdown/components/LookdownControl.tsx
index 3a9bcff..afb211e 100644
--- a/LookdownComponent/Lookdown/components/LookdownControl.tsx
+++ b/LookdownComponent/Lookdown/components/LookdownControl.tsx
@@ -1,22 +1,23 @@
-import React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   Dropdown,
   DropdownMenuItemType,
-  IStyle,
+  IContextualMenuItemStyles,
+  IContextualMenuProps,
   IDropdownOption,
-  Stack,
-  Image,
-  Label,
-  ImageFit,
-  ILabelStyles,
   IIconProps,
-  IContextualMenuProps,
+  ILabelStyles,
+  IStyle,
   IconButton,
-  IContextualMenuItemStyles,
+  Image,
+  ImageFit,
+  Label,
+  Stack,
 } from "@fluentui/react";
-import { getCurrentRecord, useFetchXmlData, useMetadata } from "../services/DataverseService";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Handlebars from "handlebars";
+import React from "react";
+import { getCurrentRecord, useFetchXmlData, useLanguagePack, useMetadata } from "../services/DataverseService";
+import { LanguagePack } from "../types/languagePack";
 
 const queryClient = new QueryClient();
 
@@ -51,6 +52,8 @@ export interface LookdownProps {
   allowQuickCreate?: boolean;
   allowLookupPanel?: boolean;
   disabled?: boolean;
+  defaultLanguagePack: LanguagePack;
+  languagePackPath?: string;
   onChange?: (selectedItem: ComponentFramework.LookupValue | null) => void;
 }
 
@@ -115,8 +118,14 @@ const Body = ({
   allowQuickCreate,
   allowLookupPanel,
   disabled,
+  defaultLanguagePack,
+  languagePackPath,
   onChange,
 }: LookdownProps) => {
+  const { data: loadedLanguagePack } = useLanguagePack(languagePackPath, defaultLanguagePack);
+
+  const languagePack = loadedLanguagePack ?? defaultLanguagePack;
+
   const {
     data: metadata,
     isLoading: isLoadingMetadata,
@@ -152,7 +161,7 @@ const Body = ({
     if (groupBy) {
       const grouped: Record<string, ComponentFramework.WebApi.Entity[]> = {};
       fetchData.forEach((item) => {
-        const key = item[groupBy]?.toString() ?? "(Blank)";
+        const key = item[groupBy]?.toString() ?? languagePack.BlankValueLabel;
 
         if (!grouped[key]) grouped[key] = [];
         grouped[key].push(item);
@@ -190,7 +199,7 @@ const Body = ({
     if (options.length === 0) {
       options.push({
         key: "no-records",
-        text: "No records found",
+        text: languagePack.EmptyListMessage,
         disabled: true,
       });
     }
@@ -353,7 +362,7 @@ const Body = ({
     items: [
       {
         key: "open-record",
-        text: "Open record",
+        text: languagePack.OpenRecordLabel,
         iconProps: { iconName: "OpenInNewWindow" },
         itemProps: { styles: !openRecordMode ? hiddenCommandStyle : visibleCommandStyle },
         disabled: !selectedId,
@@ -361,7 +370,7 @@ const Body = ({
       },
       {
         key: "quick-create",
-        text: "Quick create",
+        text: languagePack.QuickCreateLabel,
         itemProps: { styles: !allowQuickCreate ? hiddenCommandStyle : visibleCommandStyle },
         iconProps: { iconName: "Add" },
         disabled: !allowQuickCreate,
@@ -369,7 +378,7 @@ const Body = ({
       },
       {
         key: "lookup-panel",
-        text: "Lookup panel",
+        text: languagePack.LookupPanelLabel,
         itemProps: { styles: !allowLookupPanel ? hiddenCommandStyle : visibleCommandStyle },
         iconProps: { iconName: "LookupEntities" },
         disabled: !allowLookupPanel,
diff --git a/LookdownComponent/Lookdown/index.ts b/LookdownComponent/Lookdown/index.ts
index adc12b0..1e83ec1 100644
--- a/LookdownComponent/Lookdown/index.ts
+++ b/LookdownComponent/Lookdown/index.ts
@@ -1,12 +1,14 @@
+import * as React from "react";
 import LookdownControl, { IconSizes, OpenRecordMode, ShowIconOptions } from "./components/LookdownControl";
 import { IInputs, IOutputs } from "./generated/ManifestTypes";
-import * as React from "react";
+import { LanguagePack } from "./types/languagePack";
 
 export class Lookdown implements ComponentFramework.ReactControl<IInputs, IOutputs> {
   private theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;
   private notifyOutputChanged: () => void;
   private output: ComponentFramework.LookupValue | null;
   private context: ComponentFramework.Context<IInputs>;
+  private languagePack: LanguagePack;
 
   /**
    * Empty constructor.
@@ -28,7 +30,13 @@ export class Lookdown implements ComponentFramework.ReactControl<IInputs, IOutpu
   ): void {
     this.notifyOutputChanged = notifyOutputChanged;
     this.context = context;
-    console.log("init", context);
+    this.languagePack = {
+      BlankValueLabel: context.resources.getString("BlankValueLabel"),
+      EmptyListMessage: context.resources.getString("EmptyListMessage"),
+      OpenRecordLabel: context.resources.getString("OpenRecordLabel"),
+      QuickCreateLabel: context.resources.getString("QuickCreateLabel"),
+      LookupPanelLabel: context.resources.getString("LookupPanelLabel"),
+    };
   }
 
   /**
@@ -61,6 +69,8 @@ export class Lookdown implements ComponentFramework.ReactControl<IInputs, IOutpu
       allowQuickCreate: context.parameters.commandQuickCreate?.raw === "1",
       allowLookupPanel: context.parameters.commandQuickCreate?.raw === "1",
       disabled: context.mode.isControlDisabled,
+      defaultLanguagePack: this.languagePack,
+      languagePackPath: context.parameters.languagePackPath?.raw ?? undefined,
       onChange: (value) => {
         this.output = value;
         this.notifyOutputChanged();
diff --git a/LookdownComponent/Lookdown/services/DataverseService.ts b/LookdownComponent/Lookdown/services/DataverseService.ts
index c0fa3db..0fbdcd6 100644
--- a/LookdownComponent/Lookdown/services/DataverseService.ts
+++ b/LookdownComponent/Lookdown/services/DataverseService.ts
@@ -1,7 +1,7 @@
-import axios from "axios";
 import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { LanguagePack } from "../types/languagePack";
 import { IEntityDefinition, IMetadata, IViewDefinition, IViewLayout } from "../types/metadata";
-import Handlebars from "handlebars";
 
 const tableDefinitionColumns = [
   "LogicalName",
@@ -27,7 +27,7 @@ export function useMetadata(
   entityIcon = false
 ) {
   return useQuery({
-    queryKey: [`${lookupTable}_${lookupViewId}_metadata`, { lookupTable, lookupViewId }],
+    queryKey: ["metadata", lookupTable, lookupViewId],
     queryFn: () => getMetadata(lookupTable ?? "", lookupViewId ?? ""),
     enabled: !!lookupTable && !!lookupViewId,
   });
@@ -41,7 +41,7 @@ export function useFetchXmlData(
   groupBy?: string | null
 ) {
   return useQuery({
-    queryKey: [`${entitySetName}_${lookupViewId}_fetchdata`, { entitySetName, lookupViewId, fetchXml }],
+    queryKey: ["fetchdata", entitySetName, lookupViewId, fetchXml],
     queryFn: () => {
       return retrieveMultipleFetch(entitySetName ?? "", fetchXml ?? "", groupBy);
     },
@@ -49,6 +49,43 @@ export function useFetchXmlData(
   });
 }
 
+export function useLanguagePack(webResourcePath: string | undefined, defaultLanguagePack: LanguagePack) {
+  return useQuery({
+    queryKey: ["languagePack", webResourcePath],
+    queryFn: () => getLanguagePack(webResourcePath, defaultLanguagePack),
+    enabled: !!webResourcePath,
+  });
+}
+
+export function getLanguagePack(
+  webResourceUrl: string | undefined,
+  defaultLanguagePack: LanguagePack
+): Promise<LanguagePack> {
+  const languagePack: LanguagePack = { ...defaultLanguagePack };
+
+  if (webResourceUrl === undefined) return Promise.resolve(languagePack);
+
+  return axios
+    .get(webResourceUrl)
+    .then((res) => {
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(res.data, "text/xml");
+
+      const nodes = xmlDoc.getElementsByTagName("data");
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const key = node.getAttribute("name");
+        const value = node.getElementsByTagName("value")[0].childNodes[0].nodeValue ?? "";
+        if (key && value) {
+          languagePack[key as keyof LanguagePack] = value;
+        }
+      }
+
+      return languagePack;
+    })
+    .catch(() => languagePack);
+}
+
 async function getMetadata(lookupTable: string, lookupViewId: string): Promise<IMetadata> {
   const [lookupEntity, lookupView] = await Promise.all([
     getEntityDefinition(lookupTable),
diff --git a/LookdownComponent/Lookdown/strings/Lookdown.1033.resx b/LookdownComponent/Lookdown/strings/Lookdown.1033.resx
new file mode 100644
index 0000000..d841be3
--- /dev/null
+++ b/LookdownComponent/Lookdown/strings/Lookdown.1033.resx
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!--
+    Microsoft ResX Schema
+
+    Version 2.0
+
+    The primary goals of this format is to allow a simple XML format
+    that is mostly human readable. The generation and parsing of the
+    various data types are done through the TypeConverter classes
+    associated with the data types.
+
+    Example:
+
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+
+    There are any number of "resheader" rows that contain simple
+    name/value pairs.
+
+    Each data row contains a name, and value. The row also contains a
+    type or mimetype. Type corresponds to a .NET class that support
+    text/value conversion through the TypeConverter architecture.
+    Classes that don't support this are serialized and stored with the
+    mimetype set.
+
+    The mimetype is used for serialized objects, and tells the
+    ResXResourceReader how to depersist the object. This is currently not
+    extensible. For a given mimetype the value must be set accordingly:
+
+    Note - application/x-microsoft.net.object.binary.base64 is the format
+    that the ResXResourceWriter will generate, however the reader can
+    read any of the formats listed below.
+
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace"/>
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0"/>
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string"/>
+              <xsd:attribute name="type" type="xsd:string"/>
+              <xsd:attribute name="mimetype" type="xsd:string"/>
+              <xsd:attribute ref="xml:space"/>
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string"/>
+              <xsd:attribute name="name" type="xsd:string"/>
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1"/>
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2"/>
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1"/>
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3"/>
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4"/>
+              <xsd:attribute ref="xml:space"/>
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1"/>
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required"/>
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="BlankValueLabel" xml:space="preserve">
+    <value>(Blank)</value>
+    <comment>Label shown when group value is null or empty</comment>
+  </data>
+  <data name="EmptyListMessage" xml:space="preserve">
+    <value>No options found</value>
+    <comment>Message shown when option list is empty</comment>
+  </data>
+  <data name="OpenRecordLabel" xml:space="preserve">
+    <value>Open record</value>
+    <comment>Label for open record button</comment>
+  </data>
+  <data name="QuickCreateLabel" xml:space="preserve">
+    <value>Quick create</value>
+    <comment>Label for quick create button</comment>
+  </data>
+  <data name="LookupPanelLabel" xml:space="preserve">
+    <value>Lookup panel</value>
+    <comment>Label for open lookup panel button</comment>
+  </data>
+</root>
\ No newline at end of file
diff --git a/LookdownComponent/Lookdown/types/languagePack.ts b/LookdownComponent/Lookdown/types/languagePack.ts
new file mode 100644
index 0000000..5bbd193
--- /dev/null
+++ b/LookdownComponent/Lookdown/types/languagePack.ts
@@ -0,0 +1,7 @@
+export interface LanguagePack {
+  BlankValueLabel: string;
+  EmptyListMessage: string;
+  OpenRecordLabel: string;
+  QuickCreateLabel: string;
+  LookupPanelLabel: string;
+}
diff --git a/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml b/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
index 7bd8f61..93cc510 100644
--- a/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
+++ b/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="DCEPCF" constructor="PolyLookup" version="1.2.2" display-name-key="PolyLookup v1.2.2" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="virtual" >
+  <control namespace="DCEPCF" constructor="PolyLookup" version="1.3.0" display-name-key="PolyLookup v1.3.0" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="virtual" >
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:
@@ -37,6 +37,7 @@
       <value name="false" display-name-key="No">0</value>
       <value name="true" display-name-key="Yes">1</value>
     </property>
+    <property name="languagePackPath" display-name-key="Language Pack Path" description-key="Path to a resx web resource, relative to the environment url (eg. /webresources/new_/resx/PolyLookup.1033.resx), to be used as Language Pack. Default to English if not provided." of-type="SingleLine.Text" usage="input" required="false" />
     <type-group name="text">
       <type>SingleLine.Text</type>
       <type>SingleLine.TextArea</type>
@@ -59,8 +60,8 @@
       <platform-library name="Fluent" version="8.29.0" />
       <!-- UNCOMMENT TO ADD MORE RESOURCES
       <css path="css/PolyLookup.css" order="1" />
-      <resx path="strings/PolyLookup.1033.resx" version="1.0.0" />
       -->
+      <resx path="strings/PolyLookup.1033.resx" version="1.0.0" />
     </resources>
     <!-- UNCOMMENT TO ENABLE THE SPECIFIED API
     <feature-usage>
diff --git a/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx b/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx
index c1e0a81..5f906ef 100644
--- a/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx
+++ b/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx
@@ -10,6 +10,7 @@ import {
 import { QueryClient, QueryClientProvider, useMutation } from "@tanstack/react-query";
 import Handlebars from "handlebars";
 import React, { useCallback } from "react";
+import { sprintf } from "sprintf-js";
 import {
   associateRecord,
   createRecord,
@@ -17,9 +18,11 @@ import {
   disassociateRecord,
   getCurrentRecord,
   retrieveMultipleFetch,
+  useLanguagePack,
   useMetadata,
   useSelectedItems,
 } from "../services/DataverseService";
+import { LanguagePack } from "../types/languagePack";
 import { IMetadata } from "../types/metadata";
 import { SuggestionInfo } from "./SuggestionInfo";
 
@@ -46,6 +49,8 @@ export interface PolyLookupProps {
   disabled?: boolean;
   formType?: XrmEnum.FormType;
   outputSelectedItems?: boolean;
+  defaultLanguagePack: LanguagePack;
+  languagePackPath?: string;
   onChange?: (selectedItems: ComponentFramework.EntityReference[] | undefined) => void;
   onQuickCreate?: (
     entityName: string | undefined,
@@ -72,40 +77,51 @@ const Body = ({
   disabled,
   formType,
   outputSelectedItems,
+  defaultLanguagePack,
+  languagePackPath,
   onChange,
   onQuickCreate,
 }: PolyLookupProps) => {
+  
+  const [selectedItemsCreate, setSelectedItemsCreate] = React.useState<ComponentFramework.WebApi.Entity[]>([]);
+
+  const pickerRef = React.useRef<TagPickerBase>(null);
+
+  const { data: loadedLanguagePack } = useLanguagePack(languagePackPath, defaultLanguagePack);
+
+  const languagePack = loadedLanguagePack ?? defaultLanguagePack;
+
   const pickerSuggestionsProps: IBasePickerSuggestionsProps = {
-    noResultsFoundText: "No records found",
-    forceResolveText: "Quick Create",
+    suggestionsHeaderText: languagePack.SuggestionListHeaderDefaultLabel,
+    noResultsFoundText: languagePack.EmptyListDefaultMessage,
+    forceResolveText: languagePack.AddNewLabel,
     showForceResolve: () => onQuickCreate !== undefined,
-    resultsFooter: () => <div>No more records</div>,
-    resultsFooterFull: () => <div>Refine search term for more</div>,
+    resultsFooter: () => <div>{languagePack.NoMoreRecordsMessage}</div>,
+    resultsFooterFull: () => <div>{languagePack.SuggestionListFullMessage}</div>,
     resultsMaximumNumber: (pageSize ?? 50) * 2,
-    searchForMoreText: "Load more",
+    searchForMoreText: languagePack.LoadMoreLabel,
   };
-  const [selectedItemsCreate, setSelectedItemsCreate] = React.useState<ComponentFramework.WebApi.Entity[]>([]);
-
-  const pickerRef = React.useRef<TagPickerBase>(null);
 
   const getPlaceholder = () => {
     if (formType === XrmEnum.FormType.Create) {
       if (!outputSelectedItems) {
-        return "Please save the record first";
+        return languagePack.CreateFormNotSupportedMessage;
       }
     } else if (formType !== XrmEnum.FormType.Update) {
-      return "The control is not available in this form";
+      return languagePack.ControlIsNotAvailableMessage;
     }
 
     if (isDataLoading) {
-      return "Loading";
+      return languagePack.LoadingMessage;
     }
 
     if (selectedItems?.length || selectedItemsCreate.length || disabled) {
       return "";
     }
 
-    return `Select ${metadata?.associatedEntity.DisplayCollectionNameLocalized ?? "an item"}`;
+    return metadata?.associatedEntity.DisplayCollectionNameLocalized
+      ? sprintf(languagePack.Placeholder, metadata?.associatedEntity.DisplayCollectionNameLocalized)
+      : languagePack.PlaceholderDefault;
   };
 
   const shouldDisable = () => {
@@ -133,8 +149,13 @@ const Body = ({
   );
 
   if (metadata && isLoadingMetadataSuccess) {
-    pickerSuggestionsProps.suggestionsHeaderText = `Suggested ${metadata.associatedEntity.DisplayCollectionNameLocalized}`;
-    pickerSuggestionsProps.noResultsFoundText = `No ${metadata.associatedEntity.DisplayCollectionNameLocalized} found`;
+    pickerSuggestionsProps.suggestionsHeaderText = metadata.associatedEntity.DisplayCollectionNameLocalized
+      ? sprintf(languagePack.SuggestionListHeaderLabel, metadata.associatedEntity.DisplayCollectionNameLocalized)
+      : languagePack.SuggestionListHeaderDefaultLabel;
+
+    pickerSuggestionsProps.noResultsFoundText = metadata.associatedEntity.DisplayCollectionNameLocalized
+      ? sprintf(languagePack.EmptyListMessage, metadata.associatedEntity.DisplayCollectionNameLocalized)
+      : languagePack.EmptyListDefaultMessage;
   }
 
   const associatedTableSetName = metadata?.associatedEntity.EntitySetName ?? "";
@@ -232,7 +253,7 @@ const Body = ({
           [`${metadata?.associatedEntityNavigationPropertyName}@odata.bind`]: `/${metadata?.associatedEntity.EntitySetName}(${id})`,
         });
       }
-      return Promise.reject("Relationship type not supported");
+      return Promise.reject(languagePack.RelationshipNotSupportedMessage);
     },
     onSuccess: (data, variables, context) => {
       selectedItemsRefetch();
@@ -250,7 +271,7 @@ const Body = ({
       ) {
         return deleteRecord(metadata?.intersectEntity.EntitySetName, id);
       }
-      return Promise.reject("Relationship type not supported");
+      return Promise.reject(languagePack.RelationshipNotSupportedMessage);
     },
     onSuccess: (data, variables, context) => {
       selectedItemsRefetch();
diff --git a/PolyLookupComponent/PolyLookup/index.ts b/PolyLookupComponent/PolyLookup/index.ts
index 5b59dc8..d9edc13 100644
--- a/PolyLookupComponent/PolyLookup/index.ts
+++ b/PolyLookupComponent/PolyLookup/index.ts
@@ -1,7 +1,8 @@
-import { IInputs, IOutputs } from "./generated/ManifestTypes";
 import * as React from "react";
 import PolyLookupControl, { PolyLookupProps, RelationshipTypeEnum } from "./components/PolyLookupControl";
+import { IInputs, IOutputs } from "./generated/ManifestTypes";
 import { IExtendedContext } from "./types/extendedContext";
+import { LanguagePack } from "./types/languagePack";
 
 export class PolyLookup implements ComponentFramework.ReactControl<IInputs, IOutputs> {
   private theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;
@@ -9,6 +10,7 @@ export class PolyLookup implements ComponentFramework.ReactControl<IInputs, IOut
   private output: string | undefined;
   private outputSelectedItems: string | undefined;
   private context: IExtendedContext;
+  private languagePack: LanguagePack;
 
   /**
    * Empty constructor.
@@ -26,6 +28,22 @@ export class PolyLookup implements ComponentFramework.ReactControl<IInputs, IOut
   public init(context: IExtendedContext, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary): void {
     this.notifyOutputChanged = notifyOutputChanged;
     this.context = context;
+    this.languagePack = {
+      AddNewLabel: context.resources.getString("AddNewLabel"),
+      ControlIsNotAvailableMessage: context.resources.getString("ControlIsNotAvailableMessage"),
+      CreateFormNotSupportedMessage: context.resources.getString("CreateFormNotSupportedMessage"),
+      EmptyListDefaultMessage: context.resources.getString("EmptyListDefaultMessage"),
+      EmptyListMessage: context.resources.getString("EmptyListMessage"),
+      LoadingMessage: context.resources.getString("LoadingMessage"),
+      PlaceholderDefault: context.resources.getString("PlaceholderDefault"),
+      Placeholder: context.resources.getString("Placeholder"),
+      RelationshipNotSupportedMessage: context.resources.getString("RelationshipNotSupportedMessage"),
+      SuggestionListHeaderDefaultLabel: context.resources.getString("SuggestionListHeaderDefaultLabel"),
+      SuggestionListHeaderLabel: context.resources.getString("SuggestionListHeaderLabel"),
+      LoadMoreLabel: context.resources.getString("LoadMoreLabel"),
+      NoMoreRecordsMessage: context.resources.getString("NoMoreRecordsMessage"),
+      SuggestionListFullMessage: context.resources.getString("SuggestionListFullMessage"),
+    };
   }
 
   /**
@@ -55,6 +73,8 @@ export class PolyLookup implements ComponentFramework.ReactControl<IInputs, IOut
       disabled: context.mode.isControlDisabled,
       formType: typeof Xrm === "undefined" ? undefined : Xrm.Page.ui.getFormType(),
       outputSelectedItems: !!context.parameters.outputField?.attributes?.LogicalName,
+      defaultLanguagePack: this.languagePack,
+      languagePackPath: context.parameters.languagePackPath?.raw ?? undefined,
       onChange:
         context.parameters.outputSelected?.raw === "1" || context.parameters.outputField?.attributes?.LogicalName
           ? this.onLookupChange
diff --git a/PolyLookupComponent/PolyLookup/services/DataverseService.ts b/PolyLookupComponent/PolyLookup/services/DataverseService.ts
index 38e2066..c86f713 100644
--- a/PolyLookupComponent/PolyLookup/services/DataverseService.ts
+++ b/PolyLookupComponent/PolyLookup/services/DataverseService.ts
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
+import { LanguagePack } from "../types/languagePack";
 import {
   IEntityDefinition,
   IManyToManyRelationship,
@@ -85,6 +86,43 @@ export function useSelectedItems(
   });
 }
 
+export function useLanguagePack(webResourcePath: string | undefined, defaultLanguagePack: LanguagePack) {
+  return useQuery({
+    queryKey: ["languagePack", webResourcePath],
+    queryFn: () => getLanguagePack(webResourcePath, defaultLanguagePack),
+    enabled: !!webResourcePath,
+  });
+}
+
+export function getLanguagePack(
+  webResourceUrl: string | undefined,
+  defaultLanguagePack: LanguagePack
+): Promise<LanguagePack> {
+  const languagePack: LanguagePack = { ...defaultLanguagePack };
+
+  if (webResourceUrl === undefined) return Promise.resolve(languagePack);
+
+  return axios
+    .get(webResourceUrl)
+    .then((res) => {
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(res.data, "text/xml");
+
+      const nodes = xmlDoc.getElementsByTagName("data");
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const key = node.getAttribute("name");
+        const value = node.getElementsByTagName("value")[0].childNodes[0].nodeValue ?? "";
+        if (key && value) {
+          languagePack[key as keyof LanguagePack] = value;
+        }
+      }
+
+      return languagePack;
+    })
+    .catch(() => languagePack);
+}
+
 export function getManytoManyRelationShipDefinition(
   currentTable: string | undefined,
   relationshipName: string | undefined
diff --git a/PolyLookupComponent/PolyLookup/strings/PolyLookup.1033.resx b/PolyLookupComponent/PolyLookup/strings/PolyLookup.1033.resx
new file mode 100644
index 0000000..ff32ef7
--- /dev/null
+++ b/PolyLookupComponent/PolyLookup/strings/PolyLookup.1033.resx
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!--
+    Microsoft ResX Schema
+
+    Version 2.0
+
+    The primary goals of this format is to allow a simple XML format
+    that is mostly human readable. The generation and parsing of the
+    various data types are done through the TypeConverter classes
+    associated with the data types.
+
+    Example:
+
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+
+    There are any number of "resheader" rows that contain simple
+    name/value pairs.
+
+    Each data row contains a name, and value. The row also contains a
+    type or mimetype. Type corresponds to a .NET class that support
+    text/value conversion through the TypeConverter architecture.
+    Classes that don't support this are serialized and stored with the
+    mimetype set.
+
+    The mimetype is used for serialized objects, and tells the
+    ResXResourceReader how to depersist the object. This is currently not
+    extensible. For a given mimetype the value must be set accordingly:
+
+    Note - application/x-microsoft.net.object.binary.base64 is the format
+    that the ResXResourceWriter will generate, however the reader can
+    read any of the formats listed below.
+
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace"/>
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0"/>
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string"/>
+              <xsd:attribute name="type" type="xsd:string"/>
+              <xsd:attribute name="mimetype" type="xsd:string"/>
+              <xsd:attribute ref="xml:space"/>
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string"/>
+              <xsd:attribute name="name" type="xsd:string"/>
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1"/>
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2"/>
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1"/>
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3"/>
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4"/>
+              <xsd:attribute ref="xml:space"/>
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1"/>
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required"/>
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="PlaceholderDefault" xml:space="preserve">
+    <value>Select an option</value>
+    <comment>Used when Table Plural Name is not available</comment>
+  </data>
+  <data name="Placeholder" xml:space="preserve">
+    <value>Select %s</value>
+    <comment>Select { Table Plural Name }</comment>
+  </data>
+  <data name="EmptyListDefaultMessage" xml:space="preserve">
+    <value>No options found</value>
+    <comment>Message shown when suggestion list is empty</comment>
+  </data>
+  <data name="EmptyListMessage" xml:space="preserve">
+    <value>No %s found</value>
+    <comment>No { Table Plural Name } found</comment>
+  </data>
+  <data name="SuggestionListHeaderDefaultLabel" xml:space="preserve">
+    <value>Suggested options</value>
+    <comment>Suggestion list header</comment>
+  </data>
+  <data name="SuggestionListHeaderLabel" xml:space="preserve">
+    <value>Suggested %s</value>
+    <comment>Suggested { Table Plural Name }</comment>
+  </data>
+  <data name="LoadingMessage" xml:space="preserve">
+    <value>Loading</value>
+    <comment>Message shown when data is loading</comment>
+  </data>
+  <data name="AddNewLabel" xml:space="preserve">
+    <value>Quick Create</value>
+    <comment>Label for quick create button</comment>
+  </data>
+  <data name="LoadMoreLabel" xml:space="preserve">
+    <value>Load More</value>
+    <comment>Label for load more button</comment>
+  </data>
+  <data name="CreateFormNotSupportedMessage" xml:space="preserve">
+    <value>Please save the form first</value>
+    <comment>Message shown when create form</comment>
+  </data>
+  <data name="ControlIsNotAvailableMessage" xml:space="preserve">
+    <value>The control is not available in this form</value>
+    <comment>Message shown when control is not available</comment>
+  </data>
+  <data name="RelationshipNotSupportedMessage" xml:space="preserve">
+    <value>Relationship not supported</value>
+    <comment>Label shown when relationship not supported</comment>
+  </data>
+  <data name="NoMoreRecordsMessage" xml:space="preserve">
+    <value>No more options</value>
+    <comment>Message shown when there is no more record to load</comment>
+  </data>
+  <data name="SuggestionListFullMessage" xml:space="preserve">
+    <value>Refine search term for more</value>
+    <comment>Message shown when there are more records but the suggestion list already full</comment>
+  </data>
+</root>
\ No newline at end of file
diff --git a/PolyLookupComponent/PolyLookup/types/languagePack.ts b/PolyLookupComponent/PolyLookup/types/languagePack.ts
new file mode 100644
index 0000000..b446f5a
--- /dev/null
+++ b/PolyLookupComponent/PolyLookup/types/languagePack.ts
@@ -0,0 +1,16 @@
+export interface LanguagePack {
+  PlaceholderDefault: string;
+  Placeholder: string;
+  EmptyListDefaultMessage: string;
+  EmptyListMessage: string;
+  SuggestionListHeaderDefaultLabel: string;
+  SuggestionListHeaderLabel: string;
+  LoadingMessage: string;
+  AddNewLabel: string;
+  LoadMoreLabel: string;
+  CreateFormNotSupportedMessage: string;
+  ControlIsNotAvailableMessage: string;
+  RelationshipNotSupportedMessage: string;
+  NoMoreRecordsMessage: string;
+  SuggestionListFullMessage: string;
+}
diff --git a/PolyLookupComponent/package-lock.json b/PolyLookupComponent/package-lock.json
index a70f368..d8e3115 100644
--- a/PolyLookupComponent/package-lock.json
+++ b/PolyLookupComponent/package-lock.json
@@ -13,12 +13,14 @@
         "axios": "^1.3.4",
         "handlebars": "^4.7.8",
         "react": "16.8.6",
-        "react-dom": "16.8.6"
+        "react-dom": "16.8.6",
+        "sprintf-js": "^1.1.3"
       },
       "devDependencies": {
         "@microsoft/eslint-plugin-power-apps": "^0.2.6",
         "@types/node": "^18.8.2",
         "@types/powerapps-component-framework": "^1.3.4",
+        "@types/sprintf-js": "^1.1.4",
         "@types/xrm": "^9.0.70",
         "@typescript-eslint/eslint-plugin": "^5.39.0",
         "@typescript-eslint/parser": "^5.39.0",
@@ -2726,6 +2728,12 @@
       "integrity": "sha512-dKkr1bTxbEsFlh2ARpKzcaAmsYixqt9UyCdoEZk8rHyE4iQYcDCyvSjDSf7JUWJHlJiTtbIoQjxKh6ViywqDAg==",
       "dev": true
     },
+    "node_modules/@types/sprintf-js": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.4.tgz",
+      "integrity": "sha512-aWK1reDYWxcjgcIIPmQi3u+OQDuYa9b+lr6eIsGWrekJ9vr1NSjr4Eab8oQ1iKuH1ltFHpXGyerAv1a3FMKxzQ==",
+      "dev": true
+    },
     "node_modules/@types/xrm": {
       "version": "9.0.70",
       "resolved": "https://registry.npmjs.org/@types/xrm/-/xrm-9.0.70.tgz",
@@ -8260,6 +8268,11 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+    },
     "node_modules/stack-chain": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/stack-chain/-/stack-chain-1.3.7.tgz",
@@ -11175,6 +11188,12 @@
       "integrity": "sha512-dKkr1bTxbEsFlh2ARpKzcaAmsYixqt9UyCdoEZk8rHyE4iQYcDCyvSjDSf7JUWJHlJiTtbIoQjxKh6ViywqDAg==",
       "dev": true
     },
+    "@types/sprintf-js": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.4.tgz",
+      "integrity": "sha512-aWK1reDYWxcjgcIIPmQi3u+OQDuYa9b+lr6eIsGWrekJ9vr1NSjr4Eab8oQ1iKuH1ltFHpXGyerAv1a3FMKxzQ==",
+      "dev": true
+    },
     "@types/xrm": {
       "version": "9.0.70",
       "resolved": "https://registry.npmjs.org/@types/xrm/-/xrm-9.0.70.tgz",
@@ -15337,6 +15356,11 @@
         "source-map": "^0.6.0"
       }
     },
+    "sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+    },
     "stack-chain": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/stack-chain/-/stack-chain-1.3.7.tgz",
diff --git a/PolyLookupComponent/package.json b/PolyLookupComponent/package.json
index edda883..8566154 100644
--- a/PolyLookupComponent/package.json
+++ b/PolyLookupComponent/package.json
@@ -17,12 +17,14 @@
     "axios": "^1.3.4",
     "handlebars": "^4.7.8",
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "sprintf-js": "^1.1.3"
   },
   "devDependencies": {
     "@microsoft/eslint-plugin-power-apps": "^0.2.6",
     "@types/node": "^18.8.2",
     "@types/powerapps-component-framework": "^1.3.4",
+    "@types/sprintf-js": "^1.1.4",
     "@types/xrm": "^9.0.70",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
diff --git a/README.md b/README.md
index 27e955f..c5b0230 100644
--- a/README.md
+++ b/README.md
@@ -43,3 +43,35 @@ I'll review your changes and work with you to merge them into the main repositor
 ### Git branches
 
 - **main**: This branch contains the latest features of the components. Please see [tags](https://github.com/khoait/DCE.PCF/tags) for version specific code
+
+### Build and test individual component in dev
+
+1. open the repo in VS Code
+2. in Terminal, navigate to a component folder `cd PolyLookupComponent` for example
+3. run `npm install` to install all required packages
+4. run `npm run build` to build the component
+5. to test the component, because the component needs to load metadata from Dataverse, we can't use the test harness by running `npm run start`. 
+   
+   Instead, we need to deploy the component to an environment by running 
+   ```
+   pac pcf push --publisher-prefix dce
+   ```
+
+   you'll need PowerApps CLI to run `pac` commands, please install it [here](https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction)
+
+### Build the component package for production
+
+when you're ready, you can build a solution package that contains all components in the repo to deploy to a production environment.
+
+1. in Terminal, navigate to folder `cd DCEPCF/solution`
+2. for dotnet build, run  
+   ```
+   dotnet build --configuration Release
+   ```
+
+   for msbuild, run 
+   
+   ```
+   msbuild /t:build /restore /p:configuration=Release
+   ```
+3. you can find an managed solution and an unmanaged solution will be created in the output folder under `solution/bin/Release`
\ No newline at end of file
diff --git a/solution/src/Other/Solution.xml b/solution/src/Other/Solution.xml
index 9d82bab..2ebe6e4 100644
--- a/solution/src/Other/Solution.xml
+++ b/solution/src/Other/Solution.xml
@@ -8,7 +8,7 @@
       <LocalizedName description="DCE PCF Components" languagecode="1033" />
     </LocalizedNames>
     <Descriptions />
-    <Version>1.0.4.1</Version>
+    <Version>1.0.5.0</Version>
     <!-- Solution Package Type: Unmanaged(0)/Managed(1)/Both(2)-->
     <Managed>2</Managed>
     <Publisher>
@@ -20,7 +20,7 @@
       </LocalizedNames>
       <Descriptions>
         <!-- Description of Cds Publisher in language code -->
-        <Description description="DynamicsCrmExp PCF Components Library.&#xA;- PolyLookup v1.2.2&#xA;- Lookdown v1.1.0&#xA;&#xA;For documentation and configuration, please visit: https://github.com/khoait/DCE.PCF/wiki&#xA;&#xA;For feedback and report issues, please visit: https://github.com/khoait/DCE.PCF/issues" languagecode="1033" />
+        <Description description="DynamicsCrmExp PCF Components Library.&#xA;- PolyLookup v1.3.0&#xA;- Lookdown v1.2.0&#xA;&#xA;For documentation and configuration, please visit: https://github.com/khoait/DCE.PCF/wiki&#xA;&#xA;For feedback and report issues, please visit: https://github.com/khoait/DCE.PCF/issues" languagecode="1033" />
       </Descriptions>
       <EMailAddress xsi:nil="true"></EMailAddress>
       <SupportingWebsiteUrl xsi:nil="true"></SupportingWebsiteUrl>