Location Picker + Dynamic Form Changes

Location Picker + Dynamic Form Changes

Author: ravichandran-blog

docs/documentation/docs/assets/location1.png

@@ -0,0 +1,78 @@
+# Location Picker
+
+  
+
+This control allows you to search and select the Location, also allows enter custom location.
+  
+
+## How to use this control in your solutions
+
+  
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+
+- Import the following modules to your component:
+
+  
+
+```TypeScript
+
+import { LocationPicker,ILocationPickerItem } from  "fx-controls-react/lib/LocationPicker";
+
+```
+
+  
+
+- Use the LocationPicker control in your code as follows:
+
+  
+
+```jsx
+
+<LocationPicker
+          context={this.props.context}
+          label="Location"
+          onSelectionChanged={(locValue: ILocationPickerItem) => {
+            console.log(locValue.DisplayName + ", " + locValue.Address.Street)
+          }
+          }/>
+
+
+```
+
+![Location Picker search](../assets/location1.png)
+
+![Location Picker Edit](../assets/location2.png)
+
+![Location Picker Read](../assets/location3.png)
+
+  
+
+## Implementation
+
+  
+
+The `LocationPicker` can be configured with the following properties:
+
+  
+
+| Property | Type | Required | Description |
+
+| ---- | ---- | ---- | ---- |
+
+| context | WebPartContext or ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
+
+| disabled | boolean | no | Option allow to be enable or disable. Default value is `false`|
+
+| defaultValue | ILocationPickerItem | no | Option allow set default value|
+
+| errorMessage | string  | no | Static error message displayed below the picker.|
+
+| className | string  | no | applies custom styling |
+
+| label | string  | no | Label to use for the control. |
+
+| placeholder | string  | no | Placeholder label to show in the dropdown. |
+
+| onSelectionChanged | (locItem: ILocationPickerItem) => void | no | Method that returns location data JSON object. |
+

docs/documentation/docs/assets/location2.png

@@ -0,0 +1 @@
+export * from './controls/locationPicker/index';

docs/documentation/docs/assets/location3.png

@@ -85,7 +85,10 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
         if (val.required) {
           if (val.newValue === null) {
             if (val.fieldDefaultValue === null || val.fieldDefaultValue === '' || val.fieldDefaultValue.length === 0) {
-              val.fieldDefaultValue = '';
+              if (val.fieldType === "DateTime")
+                val.fieldDefaultValue = null;
+              else
+                val.fieldDefaultValue = '';
               shouldBeReturnBack = true;
             }
           }
@@ -145,6 +148,9 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
           else if (fieldType === "MultiChoice") {
             objects[columnInternalName] = { results: val.newValue };
           }
+          else if (fieldType === "Location") {
+            objects[columnInternalName] = JSON.stringify(val.newValue);
+          }
           else if (fieldType === "UserMulti") {
             objects[`${columnInternalName}Id`] = { results: val.newValue };
           }
@@ -169,7 +175,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       }
 
       if (onBeforeSubmit) {
-        const isCancelled =  await onBeforeSubmit(objects);
+        const isCancelled = await onBeforeSubmit(objects);
 
         if (isCancelled) {
           this.setState({
@@ -232,10 +238,15 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       }
       else if (field.fieldType === "UserMulti" && newValue.length !== 0) {
         field.newValue = [];
-        newValue.forEach(async element => {
-          let result = await sp.web.ensureUser(element.secondaryText);
+        for (let index = 0; index < newValue.length; index++) {
+          const element = newValue[index];
+          let user: string = element.secondaryText;
+          if (user.indexOf('@') === -1) {
+            user = element.loginName;
+          }
+          let result = await sp.web.ensureUser(user);
           field.newValue.push(result.data.Id);
-        });
+        }
       }
       this.setState({
         fieldCollection: fieldCol
@@ -392,6 +403,10 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             defaultValue = [];
           }
         }
+        else if (fieldType === "Location") {
+          defaultValue = JSON.parse(defaultValue);
+        }
+
         tempFields.push({
           newValue: null,
           fieldTermSetId: termSetId,

docs/documentation/docs/controls/LocationPicker.md

@@ -9,6 +9,7 @@ import { PeoplePicker, PrincipalType } from '../../peoplepicker';
 import { FilePicker, IFilePickerResult } from '../../filePicker';
 import { TaxonomyPicker, IPickerTerms } from '../../taxonomyPicker';
 import { ListItemPicker } from '../../listItemPicker';
+import { LocationPicker } from '../../locationPicker';
 import { RichText } from '../../richText';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { Shimmer } from 'office-ui-fabric-react/lib/Shimmer';
@@ -184,6 +185,22 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             errorMessage={errorText} />
         </div>;
 
+      case 'Location':
+        return <div className={styles.fieldContainer}>
+          <div className={`${styles.labelContainer} ${styles.titleContainer}`}>
+            <Icon className={styles.fieldIcon} iconName={"POI"} />
+            {labelEl}
+          </div>
+          <LocationPicker
+            context={context}
+            disabled={disabled}
+            placeholder={placeholder}
+            onSelectionChanged={(newValue) => { this.onChange(newValue); }}
+            defaultValue={defaultValue}
+            errorMessage={errorText}
+          />
+        </div>;
+
       case 'Lookup':
         return <div>
           <div className={styles.titleContainer}>
@@ -504,6 +521,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
     this.setState({
       changedValue: currValue
     });
+    this.props.onChanged(this.props.columnInternalName, currValue);
   }
 
   private onChange = (value: any) => {
@@ -565,47 +583,19 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
 
   private saveIntoSharePoint = async (files: IFilePickerResult[]) => {
     const {
-      context,
-      listId,
-      listItemId,
       columnInternalName,
-      onChanged,
-      fieldType
+      onChanged
     } = this.props;
 
     let newValue: any;
-    let preview: string | undefined;
-
     if (!files.length) {
       return;
     }
 
     try {
       const file = files[0];
-
-
-
       if (file.fileAbsoluteUrl === null) {
         newValue = file.previewDataUrl;
-        //await this.ensureSiteAssetsFolder();
-        //const folderUrl = urlCombine(context.pageContext.web.serverRelativeUrl, `SiteAssets/Lists/${listId}`, false);
-
-        // const resultContent = await file.downloadFileContent();
-        // const fileArrayBuffer = await resultContent.arrayBuffer;
-
-        // const fileResponse = await context.spHttpClient.post(`/_api/web/UplaodImage(imageName=@a2,listId=@a3,itemId=@4)?a2='${file.fileName}'&a3='${listId}'&a4=${listItemId || 0}`, SPHttpClient.configurations.v1, {
-        //   body: fileArrayBuffer,
-        //   headers: {
-        //     'content-length': fileArrayBuffer.byteLength.toString()
-        //   }
-        // });
-
-        // let fileResult = await fileResponse.json();
-        // newValue = {
-        //   "__metadata": { "type": "SP.FieldUrlValue" },
-        //   "Description": file.fileName,
-        //   "Url": document.location.origin + fileResult.data.ServerRelativeUrl
-        // };
       }
       else {
         newValue = file.fileAbsoluteUrl;
@@ -622,37 +612,4 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       console.log(`Error save Into SharePoint`, error);
     }
   }
-
-  private ensureSiteAssetsFolder = async () => {
-    const {
-      context,
-      listId
-    } = this.props;
-    const siteRelativeUrl = context.pageContext.web.serverRelativeUrl;
-    const folderUrl = urlCombine(siteRelativeUrl, `SiteAssets/Lists/${listId}`, false);
-
-    let folder: IFolder | undefined;
-
-    try {
-      await sp.web.getFolderByServerRelativeUrl(folderUrl).get();
-      folder = sp.web.getFolderByServerRelativeUrl(folderUrl);
-    }
-    catch {
-      folder = undefined;
-      //const folderAddResult = await sp.web.folders.add(`SiteAssets/Lists/${docLibId}`);
-      //folder = await folderAddResult.folder.get();
-    }
-
-    if (!folder) { // we need to create a folder with all parents
-      const folderPath = ['Lists', listId];
-      // Site Assets root folder
-      let mainFolder: IFolder = sp.web.getFolderByServerRelativeUrl(urlCombine(siteRelativeUrl, 'SiteAssets'));
-
-      for (let i = 0, len = folderPath.length; i < len; i++) {
-        const folderName = folderPath[i];
-        mainFolder = await mainFolder.addSubFolderUsingPath(folderName);
-      }
-      folder = mainFolder;
-    }
-  }
 }

src/LocationPicker.ts

@@ -0,0 +1,79 @@
+import { ExtensionContext } from '@microsoft/sp-extension-base';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { IComboBoxOption } from 'office-ui-fabric-react/lib/';
+
+export interface ILocationBoxOption extends IComboBoxOption {
+  locationItem: ILocationPickerItem;
+}
+
+export interface ILocationPickerItem {
+  EntityType: string;
+  LocationSource?: string;
+  LocationUri?: string;
+  UniqueId?: string;
+  DisplayName: string;
+  Address?: IAddress;
+  Coordinates?: any;
+}
+
+interface IAddress
+{
+  City?:string;
+  CountryOrRegion?:string;
+  State?:string;
+  Street?:string;
+}
+
+export interface ILocationPickerProps {
+  /**
+* The web part context
+*/
+  context: WebPartContext | ExtensionContext;
+  /**
+  * If provided, additional class name to provide on the dropdown element.
+  */
+  className?: string;
+  /**
+  * Whether or not the control is disabled
+  */
+  disabled?: boolean;
+  /**
+  * The label to use
+  */
+  label?: string;
+  /**
+  * Input placeholder text. Displayed until option is selected.
+  */
+  placeholder?: string;
+  /**
+* Input placeholder text. Displayed until option is selected.
+*/
+  defaultValue?: ILocationPickerItem;
+  /**
+  * Callback issued when the selected option changes
+  */
+  onSelectionChanged?: (newValue: ILocationPickerItem) => void;
+
+  /**
+  * This can be use to show error message for combobox
+  */
+  errorMessage?:string;
+}
+
+export interface ILocationPickerState {
+  currentMode: Mode;
+  searchText: string;
+  isCalloutVisible: boolean;
+  seletedItem: any;
+  /**
+  * The options available to the listPicker
+  */
+  options: ILocationBoxOption[];
+}
+
+
+export enum Mode {
+  view,
+  empty,
+  editView,
+}