working form with all the changes

Author: AJIXuMuK

docs/documentation/docs/assets/DynamicForm.png

@@ -19,7 +19,9 @@ import { DynamicForm } from "fx-controls-react/lib/DynamicForm";
           listId={"3071c058-549f-461d-9d73-8b9a52049a80"}  
           listItemId={1}>
           onCancelled={() => { console.log('Cancelled') }}
-          onSubmitted={async (listItem) => { let itemdata = await listItem.get(); console.log(itemdata["ID"]); }}>
+          onBeforeSubmit={(async listItem) => { return true; }}
+          onSubmitError={(listItem, error) => { alert(error.message); }}
+          onSubmitted={async (listItemData) => { console.log(listItemData); }}>
 </DynamicForm>
 ```
 ![DynamicForm](../assets/DynamicForm.png)
@@ -35,5 +37,7 @@ The `DynamicForm` can be configured with the following properties:
 | listItemId | number | no | list item ID. |
 | contentTypeId | string | no | content type ID |
 | disabled | boolean | no | Option allow to be enable or disable. Default value is `false`|
-| onSubmitted | (ListItem: any) => void | no | Method that returns ListItem object.   |
+| onBeforeSubmit | (listItemData: any) => Promise&lt;boolean&gt; | no | Before submit handler. Allows to modify the object to be submitted or cancel the submission. |
+| onSubmitted | (listItem: any) => void | no | Method that returns listItem data JSON object. |
+| onSubmitError | (listItemData: any, error: Error) => void | no | Handler of submission error. |
 | onCancelled | () => void | no | Handler when form has been cancelled. |

docs/documentation/docs/controls/DynamicForm.md

@@ -67,6 +67,7 @@ The following controls are currently available:
 - [Dashboard](./controls/Dashboard) (Control to render dashboard in Microsoft Teams)
 - [DateTimePicker](./controls/DateTimePicker) (DateTime Picker)
 - [DragDropFiles](./controls/DragDropFiles) (Allow drag and drop of files in selected areas)
+- [DynamicForm](./controls/DynamicForm) (Dynamic Form component)
 - [FieldCollectionData](./controls/FieldCollectionData) (control gives you the ability to insert a list / collection data which can be used in your web part / application customizer)
 - [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
 - [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application)

docs/documentation/docs/index.md

@@ -27,6 +27,7 @@ nav:
     - Dashboard: 'controls/Dashboard.md'
     - DateTimePicker: 'controls/DateTimePicker.md'
     - DragDropFiles: 'controls/DragDropFiles.md'
+    - DynamicForm: 'controls/DynamicForm.md'
     - FieldCollectionData: 'controls/FieldCollectionData.md'
     - FilePicker: 'controls/FilePicker.md'
     - FileTypeIcon: 'controls/FileTypeIcon.md'

docs/documentation/mkdocs.yml

@@ -29,7 +29,7 @@
     "@microsoft/sp-office-ui-fabric-core": "1.12.1",
     "@microsoft/sp-property-pane": "1.12.1",
     "@microsoft/sp-webpart-base": "1.12.1",
-    "@pnp/sp": "2.0.6",
+    "@pnp/sp": "2.5.0",
     "@pnp/telemetry-js": "2.0.0",
     "@popperjs/core": "2.5.4",
     "@uifabric/icons": "7.3.0",

package-lock.json

@@ -169,3 +169,9 @@ export interface ICultureInfo {
     dateTimeFormat: ICultureDateTimeFormat;
     numberFormat: ICultureNumberFormat;
 }
+
+export interface IUploadImageResult {
+  Name: string;
+  ServerRelativeUrl: string;
+  UniqueId: string;
+}

package.json

@@ -4,42 +4,49 @@
 	padding: 4px 3px;
 }
 
+.titleContainer {
+  display: flex;
+}
+
 .fieldLabel {
 	font-weight: 600;
-	font-size: 12px;
+	font-size: 14px;
 	padding-top: 5px;
 	padding-bottom: 5px;
 	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
 		"Helvetica Neue", sans-serif;
 	-webkit-font-smoothing: antialiased;
-	font-size: 14px;
 	font-weight: 600;
 	color: "[theme:neutralPrimary, default:#323130]";
 	box-sizing: border-box;
 	box-shadow: none;
 	margin: 0px;
-	padding: 5px 0px;
 	overflow-wrap: break-word;
+  display: block;
 }
 
 .fieldIcon {
 	align-self: center;
-	font-size: 13px;
+	font-size: 16px;
 	color: "[theme:neutralSecondary, default: #605e5c]";
 	margin-right: 8px;
 }
 
-.feildDisplay {
-	display: inline-block;
+.feildDisplayNoPadding {
+  display: inline-block;
 	vertical-align: top;
 	width: 100%;
 	font-size: 14px;
 	font-weight: 400;
 	outline: 0;
+}
+
+.feildDisplay {
+	@extend .feildDisplayNoPadding;
 	padding: 6px 0 7px 0;
-	border: 2px solid;
-  border-color: "[theme:white, default:#ffffff]";
-	margin-left: -2px;
+	//border: 2px solid;
+  //border-color: "[theme:white, default:#ffffff]";
+	//margin-left: -2px;
 }
 
 .fieldRequired::after {
@@ -57,6 +64,10 @@
 	align-items: center;
 }
 
+.richText {
+  position: relative;
+}
+
 .errormessage {
 	animation-duration: 0.367s;
 	animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
@@ -84,3 +95,7 @@
 .pickersContainer {
   padding: 6px 0 7px;
 }
+
+.thumbnailFieldButtons {
+  display: flex;
+}