IN PROGRESS
( keywords:
Usage & Benefits
[HERE: Explain General Usage and Benefit of data loader]
the Data Loader field can load data from different sources
e.g. some data could be stored in the local storage of the browser. Data loader will access that storage and retrieve the data.
This tutorial will show you how to set up and use the data loader.
If you haven't already done it, install and setup your project. You can use the umkickstarter.
Continue with creating a new Contact Form instance.
Setting up Contact Form Instance
Go to the tab form wizard and add a new Topic or Text field. Change the Label to Data Loader and change the field show as to Data Loader. Now continue with setting up the type of the Data Loder as described in the next section. You can choose between:
Finally Save and Release your changes. All data from the Data Loader will be send from client to server side by its data loader Attribute e.g. cf_topic_01. |
Local Storage
By default the option Local Storage is pre selected for the field Data origin. Enter a Data origin id. | |
if (ctx.modus === "rendered") { localStorage.setItem("MyLocalStorageOriginDataID", "Some data from local storage"); } | Navigate to the tab JavaScript Snippet, select Set custom JS and add the if statement from the left. It will add an entry to your local storage with the previously specified id and some text as value. |
Session Storage
Change the drop down Data origin to Session Storage. Enter a Data origin id. | |
if (ctx.modus === "rendered") { sessionStorage.setItem("MySessionStorageOriginDataID", "Some data from session storage"); } | Navigate to the tab JavaScript Snippet, select Set custom JS and add the if statement from the left. It will add an entry to your session storage with the previously specified id and the given text as value. |
Session cookie
Change the drop down Data origin to Session cookie. Enter a Data origin id. |
Data Attribute in HTML tag
Change the drop down Data origin to Data Attribute in HTML tag. Enter a Data origin id. Enter an HTML attribute. | |
JavaScript Callback
Change the drop down Data origin to JavaScript Callback. | |
URL parameters
Change the drop down Data origin to URL parameters. |
Access data on Server side
You can access the data through the values and the data loader attribute after a contact form was submited from client to the server.