Update description about default value for premium forms

datapress/Forms/forms.md

@@ -108,6 +108,25 @@ This code is sufficient to display a Dataverse form on a WordPress page and star
 
 ### Default values
 
+You can set default values for different fields in two ways:
+
+- In the DataPress Admin Area
+- In the WordPress Admin Area
+
+1. **Setting default values in the DataPress Admin Area**
+
+- Go to **Forms → Forms Editor** and open the required form.
+- Find the **Fields Customization** section.
+- Under **Default Field Values**, select the column display name and set the default value.
+
+For a choice field, you can set the default value as 0 (choices value).
+
+<div class="text--center"> 
+<img src="/images/choice-value.png" alt="Choice value" width="400" />
+</div>
+
+2. **Setting default values in the WordPress Admin Area**
+
 You can provide default values to pre-populate specific form columns by using the ‘defaults’ attribute in the `{% form %}` tag.
 
 ```twig

datapress/addons/elementor.md

@@ -32,8 +32,8 @@ Widget Name - `Form`
  Drag the **Form** widget into the content area, create the necessary fields, and save their IDs.
 
 <div class="text--center"> 
-<img src="/images/elementor-form.jpg" alt="Elementor form" width="400" />
-<img src="/images/elementor-id.jpg" alt="Save id" width="550" />
+<img src="/images/elementor-form.jpg" alt="Elementor form" width="400" alt="Elementor form"/>
+<img src="/images/elementor-id.jpg" alt="Save id" width="550" alt="Elementor id"/>
 </div>
 
 2. **Configure Actions After Submit**

datapress/addons/gravity-forms.md

@@ -40,13 +40,13 @@ Premium feature! This feature is available in the addon to the premium extension
 - Follow the necessary configuration steps to map form fields to Dataverse columns.
 
 <div class="text--center"> 
-<img src="/images/gf-dataverse.png" width="400" />
+<img src="/images/gf-dataverse.png" width="400" alt="GF dataverse"/>
 </div>
 
 Then click `Add New`, select crm table, action type(create or update) and map form columns to crm columns(set a correspondence between the column name from crm (key) and the column name from the gravity form(value)).
 
 <div class="text--center"> 
-<img src="/images/gf-mapping.png" width="600" />
+<img src="/images/gf-mapping.png" width="600" alt="GF fields mapping"/>
 </div>
 
 ### Access to a table
@@ -82,7 +82,7 @@ Example for `companyid` parameter name (actual column name is `parentcustomerid`
 
 1. Fixed value:
 
-  ```php
+  ```
      field_values="companyid=account:f5aaed4c-654c-4730-bd4f-38bc19a330bd"
   ```
 
@@ -101,7 +101,7 @@ To bind a record on a page created with the help of Gravity Forms, follow these
 - Configure the form to perform an update action in your Dataverse feed.
 
 <div class="text--center"> 
-<img src="/images/feed-to-update.png" width="400" />
+<img src="/images/feed-to-update.png" width="400" alt="GF feed"/>
 </div>
 
 - Remember the name of this Gravity Form.
@@ -110,7 +110,7 @@ To bind a record on a page created with the help of Gravity Forms, follow these
 - Create a new page. Use the Gravity Form block to build your page. Save the page.
 
 <div class="text--center"> 
-<img src="/images/gravity-form.png" width="400" />
+<img src="/images/gravity-form.png" width="400" alt="GF"/>
 </div>
 
 3. Configure Binding for the Page:
@@ -119,7 +119,7 @@ To bind a record on a page created with the help of Gravity Forms, follow these
 - Choose the appropriate table name and select the `Via GUID in query string` option 
 
 <div class="text--center"> 
-<img src="/images/gf-configuration.png" width="400" />
+<img src="/images/gf-configuration.png" width="400" alt="GF configuration"/>
 </div>
 
 4. Add the Record GUID to the Page URL:
@@ -156,7 +156,7 @@ This eliminates the need to manually reconfigure Dataverse integration for each
 > After duplication, you can tweak individual mappings or feed settings in the new form without affecting the original.
 
 <div class="text--center"> 
-<img src="/images/gravity-duplicate.png" width="400" />
+<img src="/images/gravity-duplicate.png" width="400" alt="GF duplicate feed"/>
 </div>
 :::
 
@@ -169,12 +169,12 @@ Lookup column supports two views for displaying the column: dropdown and dialog.
 To select a view, you need to click the `Add Fields` tab and choose `Dataverse Lookup` from `Advanced Fields`. Then open the `Appearance` tab in the column settings.
 
 <div class="text--center"> 
-<img src="/images/gf-lookup.png" width="400" />
+<img src="/images/gf-lookup.png" width="400" alt="GF lookup"/>
 </div>
 If you select the dropdown, you must also select the table and view to lookup. The dialog view does not require any additional settings.
 
 <div class="text--center"> 
-<img src="/images/gf-lookup2.png" width="400" />
+<img src="/images/gf-lookup2.png" width="400" alt="GF lookup 2"/>
 </div>
 
 To set a default value for a Dataverse Lookup field, use the following format:
@@ -184,7 +184,7 @@ To set a default value for a Dataverse Lookup field, use the following format:
 ```
 
 <div class="text--center"> 
-<img src="/images/gf-lookup-default.png" width="400" />
+<img src="/images/gf-lookup-default.png" width="400" alt="GF lookup default value"/>
 </div>
 
 For a **Dialog** Lookup, the format includes the entity name:
@@ -208,7 +208,7 @@ Choice columns can be configured as either **single selection (choice)** or **mu
 When a user must select only one value from the list, use **Radio Buttons**:
 
 <div class="text--center"> 
-<img src="/images/gravity-single-choice.png" width="400" />
+<img src="/images/gravity-single-choice.png" width="400" alt="GF single choice"/>
 </div>
 
 - Select the **table** and the **column** where the choice values are stored.
@@ -220,7 +220,7 @@ Map the selected **Form Field** to the corresponding **Dataverse column** in Dat
 For cases where multiple values can be selected, use **Multi Select**:
 
 <div class="text--center"> 
-<img src="/images/gravity-multiple-choice.png" width="400" />
+<img src="/images/gravity-multiple-choice.png" width="400" alt="GF multiple choice" />
 </div>
 
 - Select the **table** and the **column** where the multi-choice values are stored.
@@ -235,29 +235,29 @@ To create a record with `date and time` data type columns you need to follow nex
 - Configure the date field according to your requirements (e.g., date format, default value, etc.).
 
 <div class="text--center"> 
-<img src="/images/date-gr.png" width="400" />
+<img src="/images/date-gr.png" width="400" alt="GF date" />
 </div>
 
 2. Add a Time Field:
 - Next, add a separate field to capture the time. This field will store the time portion of your record.
 - Customize the time field settings as needed (e.g., 12-hour or 24-hour format, default time, etc.).
 
 <div class="text--center"> 
-<img src="/images/time-gr.png" width="400" />
+<img src="/images/time-gr.png" width="400" alt="GF time"/>
 </div>
 
 3. Map the Fields and columns in Dataverse Feed:
 - When configuring your Dataverse feed (integration with DataPress), you’ll observe that instead of a single column from the Power App, you’ll encounter two separate columns: one for the date and another for the time. These columns are `pseudo-columns` because they do not exist in Dataverse as standalone entities. Instead, they are derived by splitting or combining data from the source column as needed.
 
 <div class="text--center"> 
-<img src="/images/fields-gf.png" width="400" />
+<img src="/images/fields-gf.png" width="400" alt="GF fields" />
 </div>
 
 - Map the date field from your Gravity Form to the corresponding date column in Dateverse.
 - Similarly, map the time field from your Gravity Form to the corresponding time column in Dateverse.
 
 <div class="text--center"> 
-<img src="/images/mapping.png" width="700" />
+<img src="/images/mapping.png" width="700" alt="Mapping" />
 </div>
 
 Here are two options. We recommend using **Local Date** and **Local Time** for the **User Local** behavior option, and **Date Only**, **Time Only** (or **UTC Date** and **UTC Time**) for the **Time Zone Independent** and **Date Only** behavior options.
@@ -290,7 +290,7 @@ Examples for the **DateOnlyUserLocal** column which has User Local behavior:
 |`DateOnlyUserLocal (Local Date)` |  convert the date to the user's timezone | convert the date to the user's timezone | convert the date to the user's timezone |
 
 <div class="text--center"> 
-<img src="/images/gravity-date-options.png" width="400" />
+<img src="/images/gravity-date-options.png" width="400" alt="Gravity date"/>
 </div>
 
 In case, when you set only time value, the date represents the date zero (January 1, 1900).

datapress/getting-started.md

@@ -91,7 +91,7 @@ By default, DataPress (Dataverse Integration) use a Wordpress `AUTH_KEY` constan
 - `ICDS_FORM_AUTH_KEY` - Used for safe forms processing.
 
 <div class="text--center"> 
-<img src="/images/keys.png" width="700" />
+<img src="/images/keys.png" alt="Keys" width="700" />
 </div>
 
 These constants can be defined in your `wp-config.php` file, for example
@@ -120,7 +120,7 @@ Go to your WordPress Admin  Area and access the *Dataverse* menu. Switch to the
 6. Upon successful test, click **Save settings** to establish a connection to CRM
 
 <div class="text--center"> 
-<img src="/images/connection.png" width="700" />
+<img src="/images/connection.png" alt="Connection" width="700" />
 </div>
 
 `For OAuth 2.0 / Certificate authentication method`
@@ -185,7 +185,7 @@ If you already have a registration, you can skip this step.
 4. Type password name in New Application Password Name text box and click the Add New Application Password button. It will be *application password*.
 
 <div class="text--center"> 
-<img src="/images/password.png" width="700" />
+<img src="/images/password.png" alt="Password" width="700" />
 </div>
 
 ### Configure Dataverse Solution
@@ -204,7 +204,7 @@ If you already have a registration, you can skip this step.
 7. Save the record (at the top of the page you will see "Successfully connected to the site" message).
 
 <div class="text--center"> 
-<img src="/images/wp-site.png" width="700" />
+<img src="/images/wp-site.png" alt="WP-site" width="700" />
 </div>
 
 </ExpandableSection>

datapress/premium-features.md

@@ -81,7 +81,7 @@ When adding a registration, you may encounter a 403 error. Follow [these steps](
 7. Save the row (at the top of the page you will see "Successfully connected to the site" message).
 
 <div class="text--center"> 
-<img src="/images/wp-site.png" width="700" />
+<img src="/images/wp-site.png" width="700" alt="WP site"/>
 </div>
 
 ### Install WordPress Premium Solution

docusaurus.config.ts

@@ -45,7 +45,7 @@ const config: Config = {
         },
         blog: false, 
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: require.resolve('./src/css/custom.css'),
         },
       } satisfies Preset.Options,
     ],
@@ -232,7 +232,12 @@ themes: [
       }),
     },
   ],
-  stylesheets: [ { href: '/css/custom.css', type: 'text/css', }, ],
+stylesheets: [
+  {
+    href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
+    type: 'text/css',
+  },
+],
 };
 
 export default config;

package.json

@@ -21,6 +21,7 @@
     "@docusaurus/plugin-content-docs": "^3.6.3",
     "@docusaurus/preset-classic": "^3.6.3",
     "@easyops-cn/docusaurus-search-local": "^0.40.1",
+    "@fortawesome/fontawesome-free": "^7.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-search-local": "^2.0.1",

src/components/ExpandableSection.tsx

@@ -8,24 +8,34 @@ interface ExpandableSectionProps {
 const ExpandableSection: React.FC<ExpandableSectionProps> = ({ title, children }) => {
   const [open, setOpen] = useState(false);
 
-  return (
-    <div style={{ marginBottom: '1em' }}>
-      <button
-        onClick={() => setOpen(!open)}
-        style={{
-          cursor: 'pointer',
-          background: 'none',
-          border: 'none',
-          fontSize: '1em',
-          padding: 0,
-          color: '#007acc',
-        }}
-      >
-        {open ? '🔼 Hide' : '🔽 Show'} {title}
-      </button>
-      {open && <div style={{ marginTop: '0.5em' }}>{children}</div>}
-    </div>
-  );
+return (
+  <div style={{ marginBottom: '1em' }}>
+    <button
+      onClick={() => setOpen(!open)}
+      style={{
+        cursor: 'pointer',
+        background: 'none',
+        border: 'none',
+        fontSize: '1em',
+        padding: 0,
+        color: '#007acc',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+      }}
+    >
+      <i
+        className={`fa ${
+          open ? 'fa-caret-square-o-down' : 'fa-caret-square-o-right'
+        }`}
+        aria-hidden="true"
+      ></i>
+      {open ? 'Hide' : 'Show'} {title}
+    </button>
+    {open && <div style={{ marginTop: '0.5em' }}>{children}</div>}
+  </div>
+);
+
 };
 
 export default ExpandableSection;