Form with special fields

In this example, we will see how to configure a couple of special Scriptcase fields, in a form application.

These are the special fields currently available in Scripcase:

For this example, we will use the Google Maps, YouTube and HTML Editor fields, see the respective settings below.

For more information on other types of special fields, access our documentation.

Google Maps type field

There are 3 types of settings available for the Google Maps field, in this example we will use Geocode.

1. Select Geocode in the Source option. (Method of passing parameters to the Google API)

2. Next, in Geocode, select the fields that will be used as geographic coordinates for your location on the map.

3. Configure the map display:

Display mode: Where the map will be displayed, on the same page using a modal or in a new window
Width – Modal width in pixel
Height – Modal height in pixel
Zoom – Initial zoom of the map.

4. Next, select the Link Type of how the link to the map will be displayed on the page: Button or Text

5. To display the map, you must inform the location correctly and click on the Google Maps button

6. The map will show the location according to the fields reported, without saving them in the table.

YouTube type

field 1. Select the YouTube type field in the Data type option;

2. Next, configure the display mode for the video, in this example, we will use the Modal mode;

3. Report the width and height of the screen modal, the value in pixels;

4. When running the application, report the link in the field and click on the YouTube button.

5. The modal will be shown containing the informed video.

HTML Editor typeHTML Editor

The field allows the creation of templates to facilitate application development.

1. To create templates for the design of the HTML Editor field we will do it as follows: Design> HTML Editor Templates

2. To create a new template, select one of the templates we offer and click on “Save As“.

3. Report the name to your new template and save it so you can start editing.

4. Next, you will see the page to edit the template. It is possible to define the position of the buttons, the horizontal alignment and the number of lines, and other things.