diff --git a/README.md b/README.md
index 153e3c0edd17e428f359d681cc5acbb4a1fa102f..f0ce50b210b60147c2ebf2a301eb1c17b9ca1b0e 100644
--- a/README.md
+++ b/README.md
@@ -36,3 +36,9 @@ The extension is licensed under [AGPL-3.0](LICENSE.txt).
Install this extension by downloading it from https://lab.civicrm.org/extensions/dataprocessor/-/archive/master/dataprocessor-master.zip
and then upload it to your civicrm server in the extension folder.
And then press install in the Administer --> System Settings --> Extensions screen.
+
+## Optional
+
+To get more information about each fields in DataProcessor. A CiviTutorial has been created, to view tutorial install CiviTutorial Extension.
+
+To Install CiviTutorial in the Administer --> System Settings --> Extensions screen. (Found in Add New)
diff --git a/crm-tutorials/civicrm-dataprocessor-form-edit-action-update-Overview_of_the_configuration_screen_of_DataProcessor.js b/crm-tutorials/civicrm-dataprocessor-form-edit-action-update-Overview_of_the_configuration_screen_of_DataProcessor.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc9dbb9d1d4a14fec72988ae302c918edaf9271e
--- /dev/null
+++ b/crm-tutorials/civicrm-dataprocessor-form-edit-action-update-Overview_of_the_configuration_screen_of_DataProcessor.js
@@ -0,0 +1,87 @@
+{
+ "title": ts("Overview of the configuration screen of DataProcessor"),
+ "auto_start": true,
+ "steps": [
+ {
+ "target": "#DataProcessor .label",
+ "title": ts("Contains the Title and Description of the DataProcessor"),
+ "placement": "bottom",
+ "content": ts("You can change the title and description of your dataprocessor.\nYou can also disable or enable the dataprocessor. "),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .add.button",
+ "title": ts("Data Sources"),
+ "placement": "bottom",
+ "content": ts("A data processor has at least one data source.\nA data source could be CiviCRM entity, such as Individual, Household, Activity, Relationship etc. "),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .right.nowrap",
+ "title": ts("Configuration of Data Sources"),
+ "placement": "bottom",
+ "content": ts("You can edit the Data Sources or remove them."),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .add.button:eq(3)",
+ "title": ts("Fields"),
+ "placement": "bottom",
+ "content": ts("Select the fields you want to return in the results. For example Contact ID, First Name, Birth date, Gender etc."),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .order-icon:eq(17)",
+ "title": ts("Change The order of the fields"),
+ "placement": "bottom",
+ "content": ts("You can use the arrows to change the order of the fields, the result will be shown in up to down order."),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .right.nowrap:eq(5)",
+ "title": ts("<span style=\"font-size: 13.376px;\">Configuration of Fields</span>"),
+ "placement": "bottom",
+ "content": ts("Similarly to the conifguration of data sources. You can change the configuration of fields or remove them."),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .add.button:eq(1)",
+ "title": ts("Aggregation Fields"),
+ "placement": "bottom",
+ "content": ts("Allows to group results by defining the aggregation field."),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .add.button:eq(4)",
+ "title": ts("Filters"),
+ "placement": "bottom",
+ "content": ts("Define the filters, that may or may not (depends on configuration) be exposed to user on the output page. Filters can be defined so that user can narrow down the results according to his needs. "),
+ "icon": ""
+ },
+ {
+ "target": "#DataProcessor .add.button:eq(2)",
+ "title": ts("Output result of Data Processor"),
+ "placement": "bottom",
+ "content": ts("Add output of the data processor. Output can be of form Contact Search, Activity Search etc. Depends on the user."),
+ "icon": ""
+ },
+ {
+ "target": "#_qf_DataProcessor_next-bottom",
+ "title": ts("Save Data Processor Configuration"),
+ "placement": "bottom",
+ "content": "",
+ "icon": ""
+ },
+ {
+ "target": "#_qf_DataProcessor_cancel-bottom",
+ "title": ts("<span style=\"font-size: 13.376px;\">Cancel Data Processor Configuration</span>"),
+ "placement": "bottom",
+ "content": "",
+ "icon": ""
+ }
+ ],
+ "groups": [],
+ "url": "civicrm/dataprocessor/form/edit?action=update",
+ "domain": null,
+ "source": null
+}
diff --git a/crm-tutorials/civicrm-dataprocessor-manage-Learn_about_this_screen.js b/crm-tutorials/civicrm-dataprocessor-manage-Learn_about_this_screen.js
new file mode 100644
index 0000000000000000000000000000000000000000..10e74429ba9ad21fdafc9602c35b771acca30739
--- /dev/null
+++ b/crm-tutorials/civicrm-dataprocessor-manage-Learn_about_this_screen.js
@@ -0,0 +1,22 @@
+{
+ "title": ts("Learn about this screen"),
+ "auto_start": false,
+ "steps": [
+ {
+ "target": "#ManageDataProcessors .button",
+ "title": ts("Add New Dataprocessor"),
+ "placement": "bottom",
+ "content": ts("You will see the dataprocessor list below after adding."),
+ "icon": ""
+ },
+ {
+ "target": "#ManageDataProcessors .button:eq(1)",
+ "title": ts("Import Data Processor"),
+ "placement": "bottom",
+ "content": ts("If you have a saved JSON config file that has stored dataprocessor configuration. You can import by clicking here. "),
+ "icon": ""
+ }
+ ],
+ "groups": [],
+ "url": "civicrm/dataprocessor/manage"
+}