Dynamic Form

docs/documentation/docs/controls/DynamicForm.md

@@ -0,0 +1,39 @@
+# Dynamic Form
+
+This control can dynamically generate SharePoint list or SharePoint document library form and everything controlled through list setting.
+
+## 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 { DynamicForm } from "fx-controls-react/lib/DynamicForm";
+```
+
+- Use the DynamicForm control in your code as follows:
+
+```jsx
+<DynamicForm 
+          context={this.props.context} 
+          listId={"3071c058-549f-461d-9d73-8b9a52049a80"}  
+          listItemId={1}>
+          onCancelled={() => { console.log('Cancelled') }}
+          onSubmitted={async (listItem) => { let itemdata = await listItem.get(); console.log(itemdata["ID"]); }}>
+</DynamicForm>
+```
+![DynamicForm](../assets/DynamicForm.png)
+
+## Implementation
+
+The `DynamicForm` 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. |
+| listId | string | yes | Guid of the list.|
+| 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.   |
+| onCancelled | () => void | no | Handler when form has been cancelled. |

src/DynamicForm.ts

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

src/controls/dynamicForm/DynamicForm.module.scss

@@ -0,0 +1,71 @@
+.FieldEditor {
+    padding: 4px 3px;
+}
+
+.fieldLabel {
+    font-weight           : 600;
+    font-size             : 12px;
+    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                 : rgb(50, 49, 48);
+    box-sizing            : border-box;
+    box-shadow            : none;
+    margin                : 0px;
+    padding               : 5px 0px;
+    overflow-wrap         : break-word;
+}
+
+.fieldIcon {
+    align-self  : center;
+    font-size   : 13px;
+    color       : #605e5c;
+    margin-right: 8px;
+}
+
+.feildDisplay {
+    display       : inline-block;
+    vertical-align: top;
+    width         : 100%;
+    font-size     : 14px;
+    font-weight   : 400;
+    outline       : 0;
+    padding       : 6px 0 7px 0;
+    border        : 2px solid #ffffff;
+    margin-left   : -2px;
+}
+
+.fieldRequired::after {
+    content      : " *";
+    color        : rgb(164, 38, 44);
+    padding-right: 12px;
+}
+
+.buttons {
+    padding: 15px 4px;
+}
+
+.filePicker
+{
+    padding: 7px;
+    align-items: center;
+}
+
+.errormessage{
+    animation-name: css-102, css-115;
+    animation-duration: 0.367s;
+    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    animation-fill-mode: both;
+    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: 12px;
+    font-weight: 400;
+    color: rgb(164, 38, 44);
+    margin: 0px;
+    padding-top: 5px;
+    display: flex;
+    align-items: center;
+}