Added new enhancement requests

victorsolaya · Apr 25, 2021 · 1b009fe · 1b009fe
1 parent 5f7baaf
commit 1b009fe
Show file tree

Hide file tree

Showing 9 changed files with 430 additions and 211 deletions.
diff --git a/MultiselectRecordsEntity/ControlManifest.Input.xml b/MultiselectRecordsEntity/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="VictorSanchez" constructor="MultiselectRecordsEntity" version="0.0.24" display-name-key="Multiselect Records Entity" description-key="Multiple selector for several records and insert in a string" control-type="standard">
+  <control namespace="VictorSanchez" constructor="MultiselectRecordsEntity" version="0.0.26" display-name-key="Multiselect Records Entity" description-key="Multiple selector for several records and insert in a string" control-type="standard">
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
      <type-group name="textareas">
         <type>SingleLine.Text</type>
@@ -12,7 +12,7 @@
     <property name="data" display-name-key="Data" description-key="Data field from request to be inserted in field" of-type="SingleLine.Text" usage="input" required="true" />
     <property name="attributeid" display-name-key="Main Attribute Id" description-key="Schema name for the main field of the entity you want to retrieve" of-type="SingleLine.Text" usage="input" required="true" />
 
-    <property name="filter" display-name-key="Filter" description-key="Query to filter the results to return." of-type="SingleLine.TextArea" usage="input" required="true" />
+    <property name="filter" display-name-key="Filter" description-key="Query to filter the results to return." of-type-group="textareas" usage="input" required="true" />
     <property name="filterDynamicValues" display-name-key="Field Filter Values" description-key="Fields from the record entity to filter your query split by comma." of-type="SingleLine.Text" usage="input" required="false" />
 
     <property name="columns" display-name-key="Columns" description-key="Columns to be displayed in the list with the following syntax: DisplayName,fieldName;Name,name;Age,age" of-type="SingleLine.Text" usage="input" required="true" />
@@ -40,6 +40,7 @@
 
     <resources>
       <code path="index.ts" order="1"/>
+       <css path="css/MultiselectRecords.css" order="1" />
     </resources>
     <feature-usage>
       <uses-feature name="Utility" required="true" />

diff --git a/MultiselectRecordsEntity/MultiselectRecords.styles.tsx b/MultiselectRecordsEntity/MultiselectRecords.styles.tsx
@@ -1,4 +1,4 @@
-import { ITextFieldStyleProps, ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
+import { ITextFieldStyleProps, ITextFieldStyles } from '@fluentui/react/lib/TextField';
 export const textFieldStyles = (props: ITextFieldStyleProps): Partial<ITextFieldStyles> => ({
     fieldGroup: {
         border: props.focused ? "1px solid black !important" : "1px solid transparent !important",

diff --git a/MultiselectRecordsEntity/MultiselectRecords.tsx b/MultiselectRecordsEntity/MultiselectRecords.tsx
diff --git a/MultiselectRecordsEntity/MultiselectRecords.types.tsx b/MultiselectRecordsEntity/MultiselectRecords.types.tsx
@@ -30,6 +30,7 @@ export interface IMultiselectProps {
     records: any,
     logicalName: string,
     widthProp: number,
+    heightProp: number,
     filterTags: boolean,
     numberIfRecordsToBeShown: number
 }
diff --git a/MultiselectRecordsEntity/css/MultiselectRecords.css b/MultiselectRecordsEntity/css/MultiselectRecords.css
@@ -0,0 +1,13 @@
+.VictorSanchez\.MultiselectRecordsEntity .gridContainer{
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: auto;
+    position: relative;
+}
+
+.VictorSanchez\.MultiselectRecordsEntity .container{
+    position: absolute;
+    min-height: 500px;  
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 0px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0px 1.8px 0px;
+    z-index: 1995;
+}
diff --git a/MultiselectRecordsEntity/index.ts b/MultiselectRecordsEntity/index.ts
@@ -49,6 +49,7 @@ export class MultiselectRecordsEntity implements ComponentFramework.StandardCont
 		logicalName: "",
 		openWindow: "",
 		widthProp: 200,
+		heightProp: 500,
 		filterTags: true
 	}
 
@@ -110,6 +111,7 @@ export class MultiselectRecordsEntity implements ComponentFramework.StandardCont
 		this.props.isControlDisabled = context.mode.isControlDisabled;
 		this.props.isControlVisible = context.mode.isVisible;
 		this.props.widthProp = context.mode.allocatedWidth;
+		this.props.heightProp = context.mode.allocatedHeight;
 		this.renderElement()
 	}
 

diff --git a/README.md b/README.md
@@ -31,6 +31,10 @@ What have been the improvements with the previous version?
 
 - (React hooks) Changed the React into Hooks! (Some help from developers will be really well received to criticize how bad/good this has been done.)
 
+- Included scrollable list pane. (Thanks for the issue @acehaddock)
+
+- Changed old @office fabric ui with @fluentui
+
 ## Download
 
 [DOWNLOAD LATEST RELEASE](https://github.com/victorsolaya/Multiselect_Records_PCF/releases/latest)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "start": "pcf-scripts start"
   },
   "dependencies": {
+    "@fluentui/react": "^8.12.0",
     "@types/node": "^10.12.18",
     "@types/powerapps-component-framework": "^1.2.0",
     "@types/xrm": "^9.0.23",