JRapid Quick Tip 2:Include JRapid forms in your public website

Using JRapid you can get your web application up and running in an incredibly short amount of time. You can define the models (entities) that represent the information your app must manage and get the necessary lists, forms and panels generated. This is what, in many applications with a public and an administration front end, is referred as the “admin”. See previous post on generating admin with reverse engineering.

What if you want to reuse one of the generated forms to let the users in the public front end enter data? You can do this very easily using the JRapid JavaScript library.

Suppose we define an entity in our project to register visitor’s messages, in other words a Contact form. The entity looks like this:

The next function specifies the name of a JavaScript function to execute after the form is successfully submitted. This is used to show a message to the user.

In our project we have create a public folder in the WebContent where we’ll store all of our public front end files. To simplify things we’ll just create an index.html file to include the contact form. This is how the HTML looks like:



Note the inclusion of the JRapid JavaScript libraries and the usage of the jrapid.form() function. It takes the name of the entity as a parameter and a canvas, that is the DOM element in which the form will be included. It also takes the name of the module, which is always ‘Main’ if you have only one module. The last parameter, target, takes the value “replace” to indicate that the content of the canvas must be replaced by the form.

The resulting form included in the HTML page looks like this.

And after the form is submitted, the users sees the message.

From the admin of the web app, you can access the records created from the public page.

You can also include lists using the JRapid JavaScript library, but I'll leave this for a future quick tip.