added show option details (#189)

khoait · Nov 1, 2024 · 2c9c116 · 2c9c116
1 parent 7c7e8a1
commit 2c9c116
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 30 deletions.
diff --git 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.6.2" display-name-key="PolyLookup v1.6.2" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="standard" >
+  <control namespace="DCEPCF" constructor="PolyLookup" version="1.6.3" display-name-key="PolyLookup v1.6.3" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="standard" >
     <!--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:
@@ -33,7 +33,7 @@
     <property name="outputField" display-name-key="Output Selected Field" description-key="The field to output the selected records as a JSON array. Can be the same as bound field" of-type-group="text" usage="bound" required="false" />
     <property name="lookupView" display-name-key="Lookup View" description-key="Lookup View configuration. Value can be a static text or bound to a field on the form, the value can be: 1 - a FetchXML, 2 - a OData URL to a column of a record containing a FetchXML, 3 - An environment variable logical name containing a FetchXML, 4 - System View name" of-type-group="text" usage="input" required="false" />        
     <property name="itemLimit" display-name-key="Item Limit" description-key="Maximum number of selected items" of-type="Whole.None" usage="input" required="false" />
-     <property name="showIcon" display-name-key="Show Icon" description-key="Whether to show an icon in option item. Default: None." of-type="Enum" usage="input" required="false" default-value="0" >
+    <property name="showIcon" display-name-key="Show Icon" description-key="Whether to show an icon in option item. Default: None." of-type="Enum" usage="input" required="false" default-value="0" >
       <value name="none" display-name-key="None">0</value>
       <value name="entityIcon" display-name-key="Use Entity Icon">1</value>
       <value name="recordImage" display-name-key="Use Record Image">2</value>
@@ -49,6 +49,11 @@
       <value name="open-inline-intersect" display-name-key="Open Inline (Intersect relationship)">3</value>
       <value name="open-dialog-intersect" display-name-key="Open Dialog (Intersect relationship)">4</value>
     </property>
+    <property name="showOptionDetails" display-name-key="Show Option Details" description-key="Option to show more details in suggestion list. Default: Collapsed." of-type="Enum" usage="input" required="false" default-value="0" >
+      <value name="collapsed" display-name-key="Collapsed">0</value>
+      <value name="expanded" display-name-key="Expanded">1</value>
+      <value name="tooltip" display-name-key="Tooltip">2</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>

diff --git a/PolyLookupComponent/PolyLookup/components/PolyLookupControlClassic.tsx b/PolyLookupComponent/PolyLookup/components/PolyLookupControlClassic.tsx
@@ -32,10 +32,10 @@ import {
   PolyLookupProps,
   RelationshipTypeEnum,
   ShowIconOptions,
+  ShowOptionDetailsEnum,
   TagAction,
 } from "../types/typings";
 import { SuggestionInfo } from "./SuggestionInfo";
-import { Avatar } from "@fluentui/react-components";
 
 interface ITagWithData extends ITag {
   data: EntityOption;
@@ -56,6 +56,7 @@ export default function PolyLookupControlClassic({
   outputSelectedItems,
   showIcon,
   tagAction,
+  showOptionDetails,
   defaultLanguagePack,
   languagePackPath,
   onChange,
@@ -524,7 +525,13 @@ export default function PolyLookupControlClassic({
       }}
       onRenderSuggestionsItem={(tag: ITag) => {
         const data = (tag as ITagWithData).data;
-        return <SuggestionInfo data={data} columns={lookupViewConfig?.columns ?? []} />;
+        return (
+          <SuggestionInfo
+            data={data}
+            columns={lookupViewConfig?.columns ?? []}
+            showOptionDetails={showOptionDetails ?? ShowOptionDetailsEnum.Collapsed}
+          />
+        );
       }}
       resolveDelay={100}
       inputProps={{

diff --git a/PolyLookupComponent/PolyLookup/components/PolyLookupControlNewLook.tsx b/PolyLookupComponent/PolyLookup/components/PolyLookupControlNewLook.tsx
@@ -1,5 +1,7 @@
 import {
   Avatar,
+  Button,
+  Divider,
   FluentProvider,
   InteractionTag,
   InteractionTagPrimary,
@@ -12,15 +14,15 @@ import {
   TagPickerList,
   TagPickerOption,
   TagPickerProps,
-  makeStyles,
-  tokens,
   Text,
-  Button,
+  makeStyles,
   mergeClasses,
-  Divider,
+  tokens,
 } from "@fluentui/react-components";
 import { useQueryClient } from "@tanstack/react-query";
 import React, { useEffect, useState } from "react";
+import { sprintf } from "sprintf-js";
+import { useAttributeOnChange } from "../hooks/useAttributeOnChange";
 import {
   useAssociateQuery,
   useDisassociateQuery,
@@ -36,11 +38,10 @@ import {
   PolyLookupProps,
   RelationshipTypeEnum,
   ShowIconOptions,
+  ShowOptionDetailsEnum,
   TagAction,
 } from "../types/typings";
-import { sprintf } from "sprintf-js";
 import { SuggestionInfo } from "./SuggestionInfo";
-import { useAttributeOnChange } from "../hooks/useAttributeOnChange";
 
 const useStyle = makeStyles({
   tagGroup: {
@@ -93,6 +94,7 @@ export default function PolyLookupControlNewLook({
   outputSelectedItems,
   showIcon,
   tagAction,
+  showOptionDetails,
   defaultLanguagePack,
   languagePackPath,
   fluentDesign,
@@ -386,7 +388,11 @@ export default function PolyLookupControlNewLook({
               value={option.id}
               text={option.optionText}
             >
-              <SuggestionInfo data={option} columns={lookupViewConfig?.columns ?? []} />
+              <SuggestionInfo
+                data={option}
+                columns={lookupViewConfig?.columns ?? []}
+                showOptionDetails={showOptionDetails ?? ShowOptionDetailsEnum.Collapsed}
+              />
             </TagPickerOption>
           ))}
         </div>

diff --git a/PolyLookupComponent/PolyLookup/components/SuggestionInfo.tsx b/PolyLookupComponent/PolyLookup/components/SuggestionInfo.tsx
@@ -1,11 +1,15 @@
-import { IconButton, ILabelStyles, IStyle, Stack, Text } from "@fluentui/react";
+import { IconButton, ILabelStyles, IStyle, Stack, Text, TooltipHost } from "@fluentui/react";
+import { Tooltip } from "@fluentui/react-components";
 import { useBoolean } from "@fluentui/react-hooks";
+import { Info16Regular } from "@fluentui/react-icons";
 import React from "react";
-import { EntityOption } from "../types/typings";
+import { EntityOption, ShowOptionDetailsEnum } from "../types/typings";
 
 export interface ISuggestionInfoProps {
   data: EntityOption;
   columns: string[];
+  showOptionDetails: ShowOptionDetailsEnum;
+  isModern?: boolean;
 }
 
 const commonStyle: IStyle = {
@@ -23,8 +27,8 @@ const secondaryStyle: Partial<ILabelStyles> = {
   root: { ...commonStyle, color: "#666" },
 };
 
-export const SuggestionInfo = ({ data, columns }: ISuggestionInfoProps) => {
-  const [showMore, { toggle: toggleshowMore }] = useBoolean(false);
+export const SuggestionInfo = ({ data, columns, showOptionDetails, isModern }: ISuggestionInfoProps) => {
+  const [showMore, { toggle: toggleshowMore }] = useBoolean(showOptionDetails === ShowOptionDetailsEnum.Expanded);
 
   const infoMap = new Map<string, string>();
   columns.forEach((column) => {
@@ -36,6 +40,10 @@ export const SuggestionInfo = ({ data, columns }: ISuggestionInfoProps) => {
     infoMap.set(column, displayValue);
   });
 
+  const tooltipContent = Array.from(infoMap)
+    .filter(([key, value], index) => value !== "" && index > 0)
+    .map(([key, value]) => <div key={`tooltip_${key}`}>{value}</div>);
+
   return (
     <Stack horizontal grow styles={{ root: { flex: 1, minWidth: 0 } }}>
       <Stack.Item grow align="stretch" styles={{ root: { minWidth: "0", padding: 10 } }}>
@@ -51,20 +59,41 @@ export const SuggestionInfo = ({ data, columns }: ISuggestionInfoProps) => {
       </Stack.Item>
       {columns.length > 1 ? (
         <Stack.Item align="stretch">
-          <IconButton
-            iconProps={{ iconName: showMore ? "ChevronUp" : "ChevronDown" }}
-            styles={{
-              root: { height: "100%", color: "#000" },
-              flexContainer: { alignItems: showMore ? "flex-start" : "center", paddingTop: showMore ? 11 : 0 },
-            }}
-            title="More details"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              toggleshowMore();
-              return false;
-            }}
-          />
+          {showOptionDetails === ShowOptionDetailsEnum.Tooltip ? (
+            <Stack verticalAlign="center" horizontalAlign="center" verticalFill>
+              {isModern ? (
+                <Tooltip
+                  content={{
+                    children: tooltipContent,
+                  }}
+                  positioning="above-start"
+                  withArrow
+                  relationship="description"
+                >
+                  <Info16Regular tabIndex={0} />
+                </Tooltip>
+              ) : (
+                <TooltipHost content={tooltipContent}>
+                  <Info16Regular tabIndex={0} style={{ padding: "0 4px" }} />
+                </TooltipHost>
+              )}
+            </Stack>
+          ) : (
+            <IconButton
+              iconProps={{ iconName: showMore ? "ChevronUp" : "ChevronDown" }}
+              styles={{
+                root: { height: "100%", color: "#000" },
+                flexContainer: { alignItems: showMore ? "flex-start" : "center", paddingTop: showMore ? 11 : 0 },
+              }}
+              title="More details"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleshowMore();
+                return false;
+              }}
+            />
+          )}
         </Stack.Item>
       ) : null}
     </Stack>

diff --git a/PolyLookupComponent/PolyLookup/index.ts b/PolyLookupComponent/PolyLookup/index.ts
@@ -4,7 +4,14 @@ import PolyLookupControl from "./components/PolyLookupControl";
 import { IInputs, IOutputs } from "./generated/ManifestTypes";
 import { IExtendedContext } from "./types/extendedContext";
 import { LanguagePack } from "./types/languagePack";
-import { EntityReference, PolyLookupProps, RelationshipTypeEnum, ShowIconOptions, TagAction } from "./types/typings";
+import {
+  EntityReference,
+  PolyLookupProps,
+  RelationshipTypeEnum,
+  ShowIconOptions,
+  ShowOptionDetailsEnum,
+  TagAction,
+} from "./types/typings";
 export class PolyLookup implements ComponentFramework.StandardControl<IInputs, IOutputs> {
   private container: HTMLDivElement;
   private root: Root;
@@ -119,6 +126,9 @@ export class PolyLookup implements ComponentFramework.StandardControl<IInputs, I
       tagAction: this.context.parameters.tagAction?.raw
         ? (Number.parseInt(this.context.parameters.tagAction.raw) as TagAction)
         : undefined,
+      showOptionDetails: this.context.parameters.showOptionDetails?.raw
+        ? (Number.parseInt(this.context.parameters.showOptionDetails.raw) as ShowOptionDetailsEnum)
+        : undefined,
       defaultLanguagePack: this.languagePack,
       languagePackPath: this.context.parameters.languagePackPath?.raw ?? undefined,
       fluentDesign: this.context.fluentDesignLanguage,

diff --git a/PolyLookupComponent/PolyLookup/types/typings.ts b/PolyLookupComponent/PolyLookup/types/typings.ts
@@ -15,6 +15,7 @@ export interface PolyLookupProps {
   outputSelectedItems?: boolean;
   showIcon?: ShowIconOptions;
   tagAction?: TagAction;
+  showOptionDetails?: ShowOptionDetailsEnum;
   defaultLanguagePack: LanguagePack;
   languagePackPath?: string;
   fluentDesign?: ComponentFramework.FluentDesignState;
@@ -64,3 +65,9 @@ export enum ShowIconOptions {
   EntityIcon = 1,
   RecordImage = 2,
 }
+
+export enum ShowOptionDetailsEnum {
+  Collapsed = 0,
+  Expanded = 1,
+  Tooltip = 2,
+}