Fixed layout problems and added Multitext to the columns

victorsolaya · Jul 7, 2021 · 51e66fd · 51e66fd
1 parent 64f211e
commit 51e66fd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 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.26" 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.27" 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>
@@ -15,7 +15,7 @@
     <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" />
+    <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-group="textareas" usage="input" required="true" />
     <property name="headerVisible" display-name-key="Header Visible" description-key="Is the header of the columns visible for the list?" of-type="Enum" usage="input" required="true">
       <value name="true" display-name-key="True" description-key="true">True</value>
       <value name="false" display-name-key="False" description-key="false">False</value>

diff --git a/MultiselectRecordsEntity/MultiselectRecords.tsx b/MultiselectRecordsEntity/MultiselectRecords.tsx
@@ -126,7 +126,6 @@ const MultiselectRecords = (props: IMultiselectProps) => {
 
     }
     const setItemsFromTextFieldValue = async () => {
-        debugger
         try {
             let valuesInTheTextField: any = []
             if (textFieldValue != null && textFieldValue != "" && textFieldValue != "[]") {
@@ -315,7 +314,7 @@ const MultiselectRecords = (props: IMultiselectProps) => {
     const _showDetailsList = (): JSX.Element => {
 
         if (listItems.length > 0 && showList == true) {
-            const height = (containerHeight != null && containerHeight !== -1) ? `${containerHeight}px` : "100%";
+            // const height = (containerHeight != null && containerHeight !== -1) ? `${containerHeight}px` : "100%";
             return (
                 <Stack>
                     <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, alignContent: 'space-between' }}>
@@ -348,9 +347,9 @@ const MultiselectRecords = (props: IMultiselectProps) => {
                     </div>
 
                     <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced={true} >
-                        <Stack grow verticalFill className="container" style={{ height, width: props.widthProp }}>
+                        <Stack grow verticalFill className="container" style={{ width: props.widthProp }}>
                             <Stack.Item grow className="gridContainer" >
-                                <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} >
+                                <ScrollablePane className="scrollableContainer" scrollbarVisibility={ScrollbarVisibility.auto} >
                                     <DetailsList
                                         data-custom-id="list-custom-data"
                                         isHeaderVisible={props.headerVisible}
@@ -365,13 +364,16 @@ const MultiselectRecords = (props: IMultiselectProps) => {
                                         onRenderRow={onRenderRow}
                                         componentRef={listRef}
                                         onRenderDetailsHeader={onRenderDetailsHeader}
+                                        className="detailsListClass"
                                     />
                                 </ScrollablePane>
                             </Stack.Item>
                         </Stack>
                     </Sticky>
                 </Stack>
             )
+
+
         } else {
             return (
                 <></>
@@ -652,6 +654,7 @@ const MultiselectRecords = (props: IMultiselectProps) => {
             </div>
         </div>
     );
+
 }
 
 export default MultiselectRecords;
diff --git a/MultiselectRecordsEntity/css/MultiselectRecords.css b/MultiselectRecordsEntity/css/MultiselectRecords.css
@@ -1,13 +1,18 @@
 .VictorSanchez\.MultiselectRecordsEntity .gridContainer{
-    height: 100%;
     overflow-y: auto;
     overflow-x: auto;
     position: relative;
 }
 
 .VictorSanchez\.MultiselectRecordsEntity .container{
-    position: absolute;
-    min-height: 500px;  
+    position: relative;
     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;
-}
+}
+.VictorSanchez\.MultiselectRecordsEntity .scrollableContainer, .VictorSanchez\.MultiselectRecordsEntity .ms-ScrollablePane--contentContainer {
+    position: relative;
+}
+
+.VictorSanchez\.MultiselectRecordsEntity .detailsListClass {
+    max-height: 500px;
+}
diff --git a/MultiselectRecordsEntity/index.ts b/MultiselectRecordsEntity/index.ts
@@ -110,7 +110,7 @@ export class MultiselectRecordsEntity implements ComponentFramework.StandardCont
 		this.props.inputValue = this._context.parameters.field.raw || null;
 		this.props.isControlDisabled = context.mode.isControlDisabled;
 		this.props.isControlVisible = context.mode.isVisible;
-		this.props.widthProp = context.mode.allocatedWidth;
+		this.props.widthProp = context.mode.allocatedWidth - 20;
 		this.props.heightProp = context.mode.allocatedHeight;
 		this.props.context = context;
 		this.renderElement()