Update Record Creation

README.md

@@ -32,7 +32,7 @@ For detailed information on how to get started with Evolve Forms and take full a
 
 ## Documentation
 
-### [Editing Records](docs/editing_records.md)
+### [Editing and Creating Records](docs/editing_and_creating_records.md)
 
 ### [Calculated Fields](docs/calculated_fields.md)
 

docs/editing_records.md → docs/editing_and_creating_records.md

@@ -111,5 +111,4 @@ tailored to their exact needs.
 
 ![Digital Experience Builder](images/DigitalExperienceBuilder.png)
 
-**Note:** Evolve Forms Page Layouts are currently not supported in Digital
-Experiences, only individual Field Sections.
+> **NOTE:** When using Evolve forms within Digital Experiences, the sObject API name must be passed to the component from page builder or from a containing component. If using the Page Layout component, the layout's API name must also be passed to the component from page builder or from a containing component.

docs/setup.md

@@ -3,6 +3,8 @@
 There are a few steps necessary to get started using Evolve Forms on a given
 sObject within your org.
 
+## Editing Records
+
 ### 1. Replace the Default Edit Button
 
 Evolve Forms uses a custom `Edit` button on the lightning record page, so we need
@@ -47,3 +49,11 @@ component.
 ![Save and Cancel Buttons](images/SaveAndCancelButtons.png)
 
 Voilà! you are now ready to use Evolve Forms on the selected sObject.
+
+## Creating Records
+
+Creating records using Evolve is very similar to editing records. Use the Page Layout and Field Section components however you need to, but instead of using the [`c-dynamic-forms-save-cancel`](/evolve-forms/main/default/lwc/dynamicFormsElement/dynamicFormsSaveCancel.js) component to render the buttons, use the [`c-dynamic-forms-create`](/evolve-forms/main/default/lwc/dynamicFormsElement/dynamicFormsCreate.js) component instead.
+
+![Create Record](images/RecordCreate.gif)
+
+NOTE: When using Evolve forms to create records, the sObject API name must be passed to the component from page builder or from a containing component. If using the Page Layout component, the layout's API name must also be passed to the component from page builder or from a containing component.

evolve-forms/main/default/lwc/calculatedFieldSection/calculatedFieldSection.js-meta.xml

@@ -1,34 +1,33 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>59.0</apiVersion>
-    <isExposed>true</isExposed>
-    <masterLabel>Calculated Field Section</masterLabel>
-    <description
-  >This allows for dynamically calculated fields rendered as a field section.</description>
-    <targets>
-        <target>lightning__RecordPage</target>
-    </targets>
-     <targetConfigs>
-        <targetConfig targets="lightning__RecordPage">
-            <property
+  <apiVersion>59.0</apiVersion>
+  <isExposed>true</isExposed>
+  <masterLabel>Calculated Field Section</masterLabel>
+  <description>This allows for dynamically calculated fields rendered as a field section.</description>
+  <targets>
+    <target>lightning__RecordPage</target>
+  </targets>
+  <targetConfigs>
+    <targetConfig targets="lightning__RecordPage">
+      <property
         name="sectionLabel"
         type="String"
         label="Section Label"
         description="Enter the label of this section"
       />
-            <property
+      <property
         name="hideSectionTitle"
         type="Boolean"
         label="Hide Section Label?"
         description="Set to true to hide the section label."
       />
-            <property
+      <property
         name="apexClassName"
         type="String"
         label="Apex Class Name"
         description="Enter Apex Class Name to be used for calculating fields. Please mention either Apex class Name or Flow Name."
       />
-       <property
+      <property
         name="flowApiName"
         type="String"
         label="Flow API Name"
@@ -40,13 +39,13 @@
         label="Include Boundary?"
         description="Set to true to include a box around the field section"
       />
-            <property
+      <property
         name="columns"
         type="String"
         label="Number of Columns"
         description="Enter the number of columns for this section"
         datasource="1,2"
       />
-        </targetConfig>
-    </targetConfigs>
-</LightningComponentBundle>
+    </targetConfig>
+  </targetConfigs>
+</LightningComponentBundle>

evolve-forms/main/default/lwc/dynamicFormsCreate/dynamicFormsCreate.html

@@ -15,7 +15,7 @@
 -->
 
 <template>
-  <!-- Implementation for botton of page-pinned button -->
+  <!-- Implementation for bottom of page-pinned button -->
   <template if:true={pinToBottom}>
     <div class="bump"></div>
     <div
@@ -35,7 +35,7 @@
         variant="brand"
         label={buttonLabel}
         type="submit"
-        onclick={save}
+        onclick={handleSavePress}
         class="slds-p-horizontal_small"
         disabled={saveIsDisabled}
       ></lightning-button>
@@ -64,4 +64,55 @@
     >
     </lightning-button>
   </template>
+
+  <template if:true={showModal}>
+    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
+      <div class="slds-modal__container">
+        <header class="slds-modal__header">
+          <h2
+            data-id="confirmation-modal-heading"
+            tabindex="0"
+            class="slds-text-heading_medium slds-hyphenate"
+          >
+            Please Confirm
+          </h2>
+        </header>
+        <div
+          class="slds-modal__content slds-p-around_medium"
+          id="modal-content-id-1"
+        >
+          <template if:true={currentWarnings}>
+            <div class="slds-align_absolute-center">
+              <ul class="slds-list_dotted" tabindex="0">
+                <template for:each={currentWarnings} for:item="warning">
+                  <li key={warning}>{warning}</li>
+                </template>
+              </ul>
+            </div>
+          </template>
+        </div>
+
+        <footer class="slds-modal__footer">
+          <button
+            class="slds-button slds-button_neutral"
+            onclick={closeModal}
+            data-id="closeButton"
+            title="Close"
+            aria-label="Close"
+          >
+            Close
+          </button>
+          <button
+            class="slds-button slds-button_brand"
+            title="Save"
+            data-id="confirmButton"
+            onclick={save}
+            aria-label="Save"
+          >
+            Save
+          </button>
+        </footer>
+      </div>
+    </section>
+  </template>
 </template>

evolve-forms/main/default/lwc/dynamicFormsCreate/dynamicFormsCreate.js

@@ -14,13 +14,10 @@
  * limitations under the License.
  */
 
-import { api, track } from "lwc";
+import { api } from "lwc";
 import { createRecord } from "lightning/uiRecordApi";
-import { loadStyle } from "lightning/platformResourceLoader";
 import { ShowToastEvent } from "lightning/platformShowToastEvent";
-import DynamicFormsCSS from "@salesforce/resourceUrl/DynamicFormsCSS";
-import DynamicFormsElement from "c/dynamicFormsElement";
-import { reduceErrors } from "c/dynamicFormsUtils";
+import DynamicFormsSaveCancel from "c/dynamicFormsSaveCancel";
 
 /*
  * this component broadcasts completion events so other LWC can react to this component's actions.
@@ -31,7 +28,7 @@ import { reduceErrors } from "c/dynamicFormsUtils";
  * */
 const COMPLETION_EVENT = "completion";
 
-export default class DynamicFormsCreate extends DynamicFormsElement {
+export default class DynamicFormsCreate extends DynamicFormsSaveCancel {
   @api objectApiName;
   @api buttonLabel = "Submit";
   @api successMessage = "Record Created";
@@ -41,16 +38,11 @@ export default class DynamicFormsCreate extends DynamicFormsElement {
   /* Used for Parent component override for custom validations */
   @api disableCreateButton = false;
 
-  @track saveIsDisabled = false;
-  @track saveInProgress = false;
-  @track requiredFieldApiNames = new Set();
-  @track fields = {};
-
   save() {
     this.broadcast(this.EVENT_TYPE.SAVE_START);
 
     let event = null;
-    let fields = this.fields;
+    let fields = this.pendingUpdates;
     const recordInput = { fields };
     recordInput.apiName = this.objectApiName;
 
@@ -91,70 +83,4 @@ export default class DynamicFormsCreate extends DynamicFormsElement {
         }
       });
   }
-
-  cancel() {
-    this.broadcast(this.EVENT_TYPE.CANCEL);
-  }
-
-  getSaveIsDisabled() {
-    return (
-      this.saveInProgress ||
-      this.disableCreateButton ||
-      Array.from(this.requiredFieldApiNames).find(
-        (field) => !this.fields[field]
-      )
-    );
-  }
-
-  generateErrorMessage(error) {
-    const errorMessages = reduceErrors(error);
-    if (!errorMessages) {
-      return error.body.message;
-    }
-    let message = "The following errors occured:";
-    for (const errorMessage of errorMessages) {
-      message += `\n\t* ${errorMessage}`;
-    }
-    return message;
-  }
-
-  handleMessage(message) {
-    if (message.eventType === this.EVENT_TYPE.UPDATE) {
-      this.fields[message.fieldApiName] = message.newValue;
-      this.saveIsDisabled = this.getSaveIsDisabled();
-    } else if (message.eventType === this.EVENT_TYPE.CANCEL) {
-      this.fields = {};
-      this.requiredFieldApiNames.clear();
-      this.dispatchEvent(
-        new CustomEvent(COMPLETION_EVENT, {
-          detail: {
-            status: "cancel"
-          }
-        })
-      );
-    } else if (message.eventType === this.EVENT_TYPE.CHECK_EDIT) {
-      this.broadcast(this.EVENT_TYPE.EDIT);
-    } else if (message.eventType === this.EVENT_TYPE.SAVE_START) {
-      this.saveInProgress = true;
-    } else if (message.eventType === this.EVENT_TYPE.SAVE_END) {
-      this.saveInProgress = false;
-    } else if (message.eventType === this.EVENT_TYPE.REQUIRED_FIELD) {
-      this.requiredFieldApiNames.add(message.fieldApiName);
-      this.saveIsDisabled = this.getSaveIsDisabled();
-    } else if (message.eventType === this.EVENT_TYPE.RESET) {
-      this.requiredFieldApiNames.clear();
-      this.fields = {};
-      this.saveIsDisabled = this.getSaveIsDisabled();
-    }
-  }
-
-  connectedCallback() {
-    this.saveIsDisabled = this.getSaveIsDisabled();
-    loadStyle(this, DynamicFormsCSS);
-    this.subscribeToMessageChannel();
-  }
-
-  disconnectedCallback() {
-    this.unsubscribeToMessageChannel();
-  }
 }

evolve-forms/main/default/lwc/dynamicFormsFieldSection/dynamicFormsFieldSection.html

@@ -15,8 +15,8 @@
 -->
 
 <template>
-  <div class={boundaryTheme}>
-    <template if:true={shouldRenderSection}>
+  <template if:true={shouldRenderSection}>
+    <div class={boundaryTheme}>
       <lightning-record-edit-form
         record-id={recordId}
         object-api-name={objectApiName}
@@ -199,9 +199,9 @@
           </c-dynamic-forms-collapsible-section>
         </lightning-record-view-form>
       </lightning-record-edit-form>
-    </template>
+    </div>
     <template if:true={error}>
       <p>error</p>
     </template>
-  </div>
+  </template>
 </template>

evolve-forms/main/default/lwc/dynamicFormsFieldSection/dynamicFormsFieldSection.js

@@ -296,7 +296,12 @@ export default class DynamicFormsFieldSection extends DynamicFormsElement {
         }
       })
       .catch((error) => {
-        displayToast(this, "Error", this.generateErrorMessage(error), "error");
+        displayToast(
+          this,
+          "Error",
+          this.generateUserAccessErrorMessage(error),
+          "error"
+        );
       });
   }
 

evolve-forms/main/default/lwc/dynamicFormsPageLayout/dynamicFormsPageLayout.html

@@ -15,20 +15,22 @@
 -->
 
 <template>
-  <template for:each={layoutSections} for:item="section">
-    <c-dynamic-forms-field-section
-      key={section.sectionLabel}
-      record-id={recordId}
-      object-api-name={objectApiName}
-      section-label={section.sectionLabel}
-      field-api-names={section.apiNamesCsv}
-      columns={section.numberOfColumns}
-      hide-section-label-on-view={section.hideSectionLabelOnView}
-      hide-section-label-on-edit={section.hideSectionLabelOnEdit}
-      label-overrides={labelOverrides}
-      help-text-overrides={helpTextOverrides}
-      start-in-edit-mode={startInEditMode}
-    >
-    </c-dynamic-forms-field-section>
-  </template>
+  <div class={boundaryTheme}>
+    <template for:each={layoutSections} for:item="section">
+      <c-dynamic-forms-field-section
+        key={section.sectionLabel}
+        record-id={recordId}
+        object-api-name={objectApiName}
+        section-label={section.sectionLabel}
+        field-api-names={section.apiNamesCsv}
+        columns={section.numberOfColumns}
+        hide-section-label-on-view={section.hideSectionLabelOnView}
+        hide-section-label-on-edit={section.hideSectionLabelOnEdit}
+        label-overrides={labelOverrides}
+        help-text-overrides={helpTextOverrides}
+        start-in-edit-mode={startInEditMode}
+      >
+      </c-dynamic-forms-field-section>
+    </template>
+  </div>
 </template>

evolve-forms/main/default/lwc/dynamicFormsPageLayout/dynamicFormsPageLayout.js

@@ -36,6 +36,7 @@ export default class DynamicFormsPageLayout extends LightningElement {
   @api labelOverrides = {};
   @api helpTextOverrides = {};
   @api startInEditMode = false;
+  @api boundary = false;
 
   @track layoutSections;
   @track pageLayoutId;
@@ -47,7 +48,7 @@ export default class DynamicFormsPageLayout extends LightningElement {
     modes: [VIEW]
   })
   wiredUI(result) {
-    if (this.pageLayoutName) {
+    if (this.pageLayoutName || !this.recordId) {
       return;
     }
     if (result.data) {
@@ -59,6 +60,10 @@ export default class DynamicFormsPageLayout extends LightningElement {
     }
   }
 
+  get boundaryTheme() {
+    return this.boundary ? "slds-box slds-theme_default" : "slds-theme_default";
+  }
+
   extractLayoutSectionsFromResponse(responseData) {
     let result = [];
     for (let key in responseData.layouts[this.objectApiName]) {