Main Menu

Secondary Menu

Creating a Web Form in Wolfram Language

Introduction: Creating a Web Form in Wolfram Language

This is an exercise to create a Web Form using Wolfram Language. Though the explanation is using an example, "Energy Efficiency Calculator", we can use the functions used for generating any type of webform.

To do this, we need to first figure out the role of each function we need - CreateDatabin[], FormObject[] and various options to change the appearance of the Webform.

Finally, we put everything together and let the users enter their responses using FormFunction[] and deploy it using CloudDeploy[].

Let's move to Step 1!!!

Step 1: Connect to the Wolfram Cloud!

We can do this by using the CloudConnect[] function. This shows a dialog to input both the username and password if you haven't connect to the Wolfram Cloud. An Image of the code with its output is shown.

Code:

CloudConnect[]

Step 2: Create a Place to Store Your Data

The CreateDatabin[] funciton lets you create a databin in the Wolfram Data Drop where all your data will be stored and returns the corresponding Databin object. While using this function, we need to define what all goes into the Databin as well as its name and permissions. An example Databin for the Energy Efficiency Calculator is shown. It shows the list of data with its data types.

Step 3: Make Your Form Object, the Integral Part of Your Webform

The Webform is made up Form Objects. This defines what all constitute each row of the form along with its layout. The layout of the form can be defined by the FormLayoutFunction[] where the title, description and other Appearance rules can be defined. More about Appearance rules can be found at http://reference.wolfram.com/language/ref/Appeara...

The first part "fo" denotes the Form Object which we will be defining in the second line of code.

Note that we have defined our Form layout with a delayed evaluation (:= denotes delayed evaluation). This tells the program that the values for the Form Object will be input later (in this case, in the next line of code). Also, note that we have defined our Form Object to fo which has a delayed evaluation (:= denotes delayed evaluation). This tells the program that the values for the Webform would be input by the user later. We don't have to do this but this makes the code a lot cleaner moving forward as we will be adding more and more functions. Because of the delayed evaluation, this line of code will not have an output.

Step 4: Add Data to Your Databin

When the Webform is deployed, DatabinAdd[] function is used to denote what are the elements that are being added to your Databin. For the example shown, we will be assigning test values but the actual command will have to take the inputs from the user. TextString[] converts the final score to a string that is evaluated by adding all the values in the energyEfficiency Databin. The error return value "-1" has also been defined.

Step 5: The FormFunction[]

Now for the user to input the values, we use the FormFunction[]. Let's break this line of code down.

The first part "fo" denotes the Form Object which we had defined earlier.

The second part includes the DatabinAdd function which defines the data that needs to be added to our Databin, "energyEfficiency". We have used "#" i.e. a slot right before the variables that were defined in the Form Object as well as the Databin. This tells the program that the code is referring to the same variable in the program.

After that, Rasterize[], Style[] functions with FontSize and FontFamily are used to change the Style of the output. "PNG" means that the final output will be a picture in the PNG format.

Please note that we have put all this into our defined function, "formFunc" with delayed evaluation (using :=) so that the code for the final line will be easier to understand. Because of the delayed evaluation, this line of code will not have an output.

Step 6: Deploying to the Cloud

Lastly, we will deploy the program to the cloud using CloudDeploy[] so that you can run it in any web browser.

We have put all the things we want in the FormFunction[] into formFunc.

The first part of CloudDeploy evaluates this. Next is the name of the cloud program we have deployed which will be there in the link you get after you evaluate this line of code. Finally, we set the Permissions to Public so that anyone who has clicked the link can evaluate the program.