Merge pull request #70 from AlexaCRM/correct12204

add images for Elementor and Gravity Forms
AlexaCRM · Jun 10, 2024 · 24b60fa · 24b60fa
2 parents d812a59 + c904fd8
commit 24b60fa
Show file tree

Hide file tree

Showing 19 changed files with 66 additions and 2 deletions.
diff --git a/datapress/addons/elementor.md b/datapress/addons/elementor.md
@@ -8,7 +8,6 @@ tags:
     - DataPress
 keywords: [DataPress Elementor addon, create DataPress form with Elementor]
 ---
-
 <p class="lead">Build your forms and write custom twig code using Elementor!</p>
 
 export const Highlight = ({children, color}) => (
@@ -39,10 +38,32 @@ Category - `Pro`
 
 Description: It is a native form of Elementor, but you should add `Send to Dataverse` action after submit.
 
-All you need to do is drag the `Form` widget into the content area, create  the necessary fields and Save their ID. Next, navigate to `Actions After Submit`, click `+` and add the `Send to Dataverse` action.  Then, select the `Send to Dataverse` menu section and choose a table from the `Table` dropdown.
+All you need to do is drag the `Form` widget into the content area, create  the necessary fields and Save their ID.
+
+<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" />
+</div>
+
+Next, navigate to `Actions After Submit`, click `+` and add the `Send to Dataverse` action.  
+
+<div class="text--center"> 
+<img src="/images/send-to-dataverse.jpg" alt="Send to Dataverse action" width="400" />
+</div>
 
+To choose a table save the form and get back to the `Pages` -> `All pages` and find the page  and click `Configure Binding`. Here you can choose a table for new records. 
+
+<div class="text--center"> 
+<img src="/images/elementor-bind-table.jpg" alt="Binding configuration" width="550" />
+</div>
+
+Click `Edit with Elementor` and `Send to Dataverse`. Here you will see the chosen table in the `Table` dropdown.
 After selecting an action, for example `create`, you need to add `Fields Mapping`. Click `+ADD ITEM`. Here, fill in `Form field` (which is the field ID that was saved previously) and `Table column` (which is the logical name for the column) for each field.
 
+<div class="text--center"> 
+<img src="/images/elementor-mapping.png" alt="Mapping in Elementor" width="400" />
+</div>
+
 **To create a lookup field** you need to add `select` type field and map this field with the lookup field logical name in the `Send to Dataverse` action.
 
 ## Twig widget
@@ -68,3 +89,7 @@ One of the simplest methods to display a field value for any record is by using
 ## Default record in editing mode
 
 You can enter a record GUID to be used as the default record in the page editing context. Simply find the page, click `Configure Binding`, select a table and enter an id in the `Default record` textbox.
+
+<div class="text--center"> 
+<img src="/images/elementor-default.png" alt="Elementor default" width="400" />
+</div>
diff --git a/datapress/addons/gravity-forms.md b/datapress/addons/gravity-forms.md
@@ -33,8 +33,16 @@ When you have created the form and clicked the `Save Form` button, you must also
 
 To create a Dataverse Feed, you need to click `Settings` -> `Dataverse` without closing your Gravity form.
 
+<div class="text--center"> 
+<img src="/images/gf-dataverse.png" width="400" />
+</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" />
+</div>
+
 ## Dynamic column population
 
 If you want to set default values for columns you can follow these instructions:
@@ -80,14 +88,25 @@ 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" />
+</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" />
+</div>
+
 If you want to set a default value for Dataverse Lookup look at this example:
 
 ```php
    table:98837486-742e-ed22-9db1-00224893bd2f
 ```
 
+<div class="text--center"> 
+<img src="/images/gf-lookup-default.png" width="400" />
+</div>
+
 To control conditional access to requested records in dropdown or dialog use fetchXML filter.
 
 ## File upload columns

diff --git a/datapress/getting-started.md b/datapress/getting-started.md
@@ -58,6 +58,10 @@ By default, Dataverse Integration use a Wordpress `AUTH_KEY` constant for encryp
 - `ICDS_AUTH_KEY` - Used to encrypt sensitive data such as application secret.
 - `ICDS_FORM_AUTH_KEY` - Used for safe forms processing.
 
+<div class="text--center"> 
+<img src="/images/keys.png" width="700" />
+</div>
+
 These constants can be defined in your `wp-config.php` file, for example
 ```php
 define('ICDS_AUTH_KEY', 'TfsFu)- pF\"6KNx@VT,FV@*`lM;Ls(nRy0/e:h^TnJ6/Ee$-cm@o2o;6U{#;;n+R');
@@ -80,6 +84,10 @@ Go to your WordPress Admin  Area and access the *Integration Dataverse* menu. Sw
 5. Check whether the credentials are OK by hitting the **Verify Connection** button
 6. Upon successful test, click **Save settings** to establish a connection to CRM
 
+<div class="text--center"> 
+<img src="/images/connection.png" width="700" />
+</div>
+
 `For OAuth 2.0 / Certificate authentication method`
 1. Enter the *Organization URL* -- for example, `https://contoso.crm.dynamics.com`
 2. Select the *Authentication Method* -- **OAuth 2.0 / Certificate**
@@ -155,6 +163,10 @@ export const Highlight = ({children, color}) => (
 3. Click Edit Profile.
 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" />
+</div>
+
 ### Configure Dataverse Solution
 
 1. Download latest [Dataverse solution](https://wpab.alexacrm.com/release/WordPressIntegration_latest_managed.zip). 
@@ -170,6 +182,10 @@ export const Highlight = ({children, color}) => (
    - **Password**: application password you created earlier.
 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" />
+</div>
+
 ### Install WordPress Premium Solution
 
 1.  Sign in into WordPress as admin user.

diff --git a/datapress/premium-features.md b/datapress/premium-features.md
@@ -82,6 +82,10 @@ You can skip this paragraph if you click the `Add registration` button at the mo
    - **Password**: application password you created earlier.
 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" />
+</div>
+
 ### Install WordPress Premium Solution
 
 1. Sign in into WordPress as admin user.

diff --git a/static/images/connection.png b/static/images/connection.png
diff --git a/static/images/elementor-bind-table.jpg b/static/images/elementor-bind-table.jpg
diff --git a/static/images/elementor-default.png b/static/images/elementor-default.png
diff --git a/static/images/elementor-form.jpg b/static/images/elementor-form.jpg
diff --git a/static/images/elementor-id.jpg b/static/images/elementor-id.jpg
diff --git a/static/images/elementor-mapping.png b/static/images/elementor-mapping.png
diff --git a/static/images/gf-dataverse.png b/static/images/gf-dataverse.png
diff --git a/static/images/gf-lookup-default.png b/static/images/gf-lookup-default.png
diff --git a/static/images/gf-lookup.png b/static/images/gf-lookup.png
diff --git a/static/images/gf-lookup2.png b/static/images/gf-lookup2.png
diff --git a/static/images/gf-mapping.png b/static/images/gf-mapping.png
diff --git a/static/images/keys.png b/static/images/keys.png
diff --git a/static/images/password.png b/static/images/password.png
diff --git a/static/images/send-to-dataverse.jpg b/static/images/send-to-dataverse.jpg
diff --git a/static/images/wp-site.png b/static/images/wp-site.png