Elementor
Build your forms and write custom twig code using Elementor!
Introduction
Premium feature! This feature is available in the addon to the premium extension.
Our plugin supports Elementor. We offer several widgets that are compatible with Elementor (including Elementor Pro). To edit a form using Elementor, you need to install and activate the 'Dataverse Integration Elementor Extension' plugin. Please note that this functionality is available only with the premium version of our plugin.
You may also need to install and activate Elementor Pro.
Form widget
Widget Name - Form
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.
![Elementor form](/images/elementor-form.jpg)
![Save id](/images/elementor-id.jpg)
Next, navigate to Actions After Submit
, click +
and add the Send to Dataverse
action.
![Send to Dataverse action](/images/send-to-dataverse.jpg)
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.
![Binding configuration](/images/elementor-bind-table.jpg)
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.
![Mapping in Elementor](/images/elementor-mapping.png)
To create a field for a lookup column you need to add a new field and set its type to Dataverse Lookup.
Then type the appropriate table and view.
Map this field with the column logical name in the Send to Dataverse
action.
![Create a lookup field](/images/elementor-lookup.png)
To create a field for a Date Time column you need to add 2 fields: one field for date and the other - for time.
Set for both fields the same column logical name in Send to Dataverse
section.
To create a field for a Date Time column, follow these steps:
- Add Two Fields:
- Date Field: Create a field specifically for the date.
- Time Field: Create another field specifically for the time.
- Set Column Logical Name:
In the
Send to Dataverse
section, set the same column logical name for both the date and time fields. This ensures that both fields are recognized as part of the same Date Time column.
Twig widget
Widget Name - Twig Template
Category - Dataverse
Description: A simple and visual widget. Write your twig code and you will immediately see the generated content in the content area.
Field widget
Widget Name - Dataverse Field
Category - Dataverse
Description: To use this feature, simply select a table and then choose a column from that table which you wish to display.
Dynamic tags
One of the simplest methods to display a field value for any record is by using dynamic tags. First, configure the binding for the page by selecting a table and the binding method. Then, return to page editing and, in the Elementor Text Editor widget, click the Dynamic Tags button (symbolized by a coins icon). Next, select the 'Dynamic field' option and click the settings button. Now, you can choose any field from which to display a record value.
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.
![Elementor default](/images/elementor-default.png)